小白學JavaScript箭頭函數踩坑總結你遇到了嗎

幾天我在學習JS基礎知識的時候也接觸了一些函數，大概知道函數的作用是干什么的，但是具體細節的話，和一些重點的知識還是不太明白，今天重點研究一下函數的相關知識。

一、認識JavaScript函數

JavaScript函數是用來執行特定的代碼塊的，僅僅在調用它的時候才會執行里面的代碼。

語法：

JavaScript通過function關鍵字定義一個函數，后面跟上函數名和一對英文狀態下的括號()，函數名的命名規則跟變量命名規則相同。括號里面可以放置參數，也可以什么也不放。

(參數1,參數2,參數3,...)

需要執行的代碼塊放置在{}中，所以一個完整的函數應該是下面這個樣子的：

function name(arg1, arg2, arg3) {
    // 執行的代碼塊
}

其中圓括號里的參數有個名字叫：形參

函數的調用:

函數名稱 + () 即可調用函數，例如調用上述函數：

// 調用函數
name(1, 2, 3);

為什么要使用函數呢？

因為函數可以使我們復用某些代碼塊，只需定義一次，就能重復使用N次，可以避免了寫一些重復代碼。

實例：

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

如果說在調用函數的時候不加()，是什么情況呢？我把結果打印了一下：

document.body.innerHTML=sum;

結果：

上面的結果說明如果在調用函數的時候不加圓括號，返回的結果是函數本身。

二、ES6箭頭函數

箭頭函數類似于匿名函數，它簡化了函數的定義。

匿名函數：

let demo=function () {
    return ['20200102', '手機', 'MI 11 Pro', '3999'];
}

將函數名放入一個變量中，然后再使用這個變量去調用匿名函數：

document.body.innerHTML=demo(); // 20200102,手機,MI 11 Pro,3999

上述匿名函數如果使用箭頭函數簡化，：

let demo=()=> {
    return ['20200102', '手機', 'MI 11 Pro', '3999'];
}

二者結果都是一樣的。

上述的箭頭函數只有一條返回語句，所以可以省略大括號，簡寫成下面的格式：

let demo=()=> ['20200102', '手機', 'MI 11 Pro', '3999'];

以上是在箭頭函數沒有參數的情況下的書寫方法，如果帶有參數的呢該怎么寫呢？

帶一個參數

let demo=x=> x * 2;
console.log(demo(2)); // 4

一個以上的參數

let demo=(x, y)=> x * x + y * y;
console.log(demo(2, 3)); // 13

以上的案例都是函數體只有一條語句時的場景，如果函數體有多條語句，應該這樣寫：

let demo=x=> {
    if (x % 2==0) {
        console.log("偶數");
    } else {
        console.log("奇數");
    }
}
console.log(demo(3)); // 奇數

根據以上案例，我做了一個總結：

1.可以省略圓括號的場景：

只有一個參數。

2.不能省略圓括號的場景：

沒有參數；
參數個數在1個以上。

3.大括號可以省略的場景：

只有一條語句。

4.大括號不可省略的場景：

有多條語句。

這里面有一點需要值得注意的是，如果我們返回的是一個對象，如果這么寫就會報錯，例如：

// 這是一個錯誤方法
(x, y)=> {x: 1, y: 2};

那么這個錯誤如何解決呢？需要在對象外面再包裹一層圓括號即可：

// 這才是正確方法
(x, y)=> ({x: 1, y: 2});

使用箭頭函數需要注意以下幾點：

函數體內的this指向在箭頭函數中是固定的；
不可以作為構造函數使用，即：不能使用new命令，否則會拋出錯誤；
不可使用arguments對象，因為函數體內不存在該對象；
不能使用yield命令，因此，也不能作為Generator函數使用。

以上4點注意事項，是我在資料書中看到的總結，其中1、3這兩條我倒是知道，至于2、4我還沒有學到并不太清楚這個是什么意思，等以后學到了應該就理解了，如果有大佬知道的話還請不吝賜教。

角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三角形</title>
<style type="text/css">
body{
    background-color: pink;
}
div{
    width: 0px;
    height: 0px;
    border-top: 10px solid blue;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /* 唰(忽略不計) */
    /* border-width: 10px;
    border-style: solid;
    border-color: green orange blue pink; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

箭頭

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

三角形使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 40px;
    cursor: pointer;
}
ul{
    width: 200px;
    margin: 0 auto;
    border: 1px solid #000;
}
h3{
    text-indent: 1em;
    background-color: dodgerblue;
    position: relative;
}
h3:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #000;
    position: absolute;
    left: 5px;
    top: 12px;
}
h3.active:before{
    border-top: 8px solid #000;
    border-left: 8px solid transparent;
    left: 0px;
    top: 15px;
}
</style>
</head>
<body>
<ul>
<li>
<h3>我的好友</h3>

</li>
<li>
<h3 class="active">企業好友</h3>

</li>
<li>
<h3>黑名單</h3>

</li>
</ul>
</body>
</html>

制作箭頭

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

實例: 實心箭頭上下左右

頭函數是ES6新增的一種函數簡寫形式。

箭頭函數的寫法更簡潔，當箭頭函數的函數體只有一個 `return` 語句時，可以省略 `return` 關鍵字和方法體的花括號

當參數只有一個的時候可以省略小括號

箭頭函數和普通有很多不同，最主要就是改變的了this的指向

箭頭函數內部的this由上下文決定。可以理解為箭頭函數在定義的時候this就已經確定了。而普通函數只有在調用的時候才指定this。

普通函數，setTimeout的回調函數是由window調用，所以this指向window

箭頭函數，this總是指向詞法作用域，即obj

在線咨詢

上一篇：fishhook 支持ARC的18個函數初步探究
下一篇：js實現一個可拖動的div

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

小白學JavaScript箭頭函數踩坑總結你遇到了嗎

一、認識JavaScript函數

二、ES6箭頭函數

您的項目需求