普通函數(shù)和箭頭函數(shù)

王晗發(fā)布于2019-08-22 18:30 / 3239人閱讀

摘要：普通函數(shù)和箭頭函數(shù)寫在前面函數(shù)是里的一等公民。在客戶端，在元素上綁定事件監(jiān)聽函數(shù)是非常普遍的行為，在事件被觸發(fā)時，回調(diào)函數(shù)中的指向該可當我們使用箭頭函數(shù)時因為這個回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的是。

普通函數(shù)和箭頭函數(shù) 寫在前面

函數(shù)（Function）是 JavaScript 里的‘一等公民’。是由稱為函數(shù)體的一系列語句組成?？梢援斪鋈?yún)?，出參（返回值）使用。和對象一樣，有自己的屬性和方法。區(qū)別之處在于可以被調(diào)用。數(shù)據(jù)類型是 function（用 typeof 判斷），用 Object.prototype.toString.call() 判斷是 [object Function]。如果沒有使用 retrun 語句，則默認返回 undefined。反之則函數(shù)必須使用 return 語句來指定一個要返回的值。(使用 new 關(guān)鍵字調(diào)用一個構(gòu)造函數(shù)除外，不再是實例化一個對象)。函數(shù)執(zhí)行時，this 關(guān)鍵字并不會指向正在運行的函數(shù)本身，而是指向調(diào)用該函數(shù)的對象。
函數(shù)表達式不會提升，因此在使用之前必須先聲明。和用 var 聲明變量不一樣。

產(chǎn)生原因

箭頭函數(shù)的產(chǎn)生原因就是在于 this 關(guān)鍵字指向問題。它很容易讓人產(chǎn)生疑惑，尤其是當函數(shù)調(diào)用層級比較多的時候。和傳統(tǒng)函數(shù)定義相比，語法也相對簡潔。并且沒有自己的this，arguments，super或 new.target。這些函數(shù)表達式更適用于那些本來需要匿名函數(shù)的地方，并且它們不能用作構(gòu)造函數(shù)。箭頭函數(shù) this 指向的固定化，并不是因為函數(shù)內(nèi)部做了處理，而是因為箭頭函數(shù)在創(chuàng)建的時候根本就沒有自己的 this。

使用箭頭函數(shù)需要注意的點

1，函數(shù)體內(nèi)的 this 對象，是定義時所在對象，而不是調(diào)用該函數(shù)的對象。
2，正因為自己本身沒有 this 對象，因此不可以用作構(gòu)造函數(shù)，不能用 call()，apply()，bind()這些方法去改變 this 的指向。
3，不綁定 arguments 對象，可以使用 rest 參數(shù)來解決。
4，嚴格模式（use strict）中，指定的與 this 相關(guān)的規(guī)則都將被忽略。

var aaa = () => {
    "use strict";
    console.log(this);
    // window
}

var bbb = function() {
    "use strict";
    console.log(this);
    // undefined
}

5，不能使用 new 操作符，否則會報錯

var Func = () => {};
var func = new Func();
// TypeError: Func is not a constructor

6，沒有 prototype 屬性

var Func = () => {};
console.log(Func.prototype);
// undefined

7，不能用作生成器。 yield 關(guān)鍵字通常不能在箭頭函數(shù)中使用（除非是嵌套在允許使用的函數(shù)內(nèi)）。
8，箭頭函數(shù)的簡寫，可以直接省略 return，在塊體中，必須使用明確的 return 語句。如果需要返回對象字面量的話，記得用圓括號包起來。

var func = () => ({num: 1});

寫在后面

拋一個大佬留下的問題，有箭頭函數(shù)的 IIEF:

(() => {
console.log("執(zhí)行看看");
// 執(zhí)行看看
})();

這個是可以的，但是下面的寫法就會報錯

(() => {
console.log("執(zhí)行看看");
// Uncaught SyntaxError: Unexpected token (
}());

有知道原因的小伙伴嗎？

2018-07-18
補充一下幾點：
1，在對象字面量上定義方法，會出現(xiàn)問題
如下代碼執(zhí)行：

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  },
  d() {
    console.log( this.i, this)  
  }
}
obj.b(); 
// undefined Window
obj.c();
// 10 obj對象
obj.d(); 
// 10 obj對象

obj.b 使用箭頭函數(shù)來定義，但是調(diào)用 obj.b() 時出現(xiàn)了異常。因為當執(zhí)行b的時候上下文仍然是window，這是因為箭頭函數(shù)已經(jīng)綁定了window做為上下文。
解決辦法就是不要在對象的方法上使用箭頭函數(shù)短語法，這樣this關(guān)鍵字會在調(diào)用時決定，而不是早早綁定在閉合的上下文中。如 obj.d()

同樣的規(guī)則也適用于給對象 prototype原型上定義方法，如

function Obj(name) {
  this.objName = name;  
}
Obj.prototype.getObjName = () => {
    console.log(this === window);
    // true
    return this.objName;
}

var obj = new Obj("小紅");
obj.getObjName(); 
// undefined

2，動態(tài)上下文中的回調(diào)函數(shù)
this是js中非常強大的特點，他讓函數(shù)可以根據(jù)其調(diào)用方式動態(tài)的改變上下文，然后箭頭函數(shù)直接在聲明時就綁定了this對象，所以不再是動態(tài)的。

在客戶端，在dom元素上綁定事件監(jiān)聽函數(shù)是非常普遍的行為，在dom事件被觸發(fā)時，回調(diào)函數(shù)中的this指向該dom,可當我們使用箭頭函數(shù)時：

button.addEventListener("click", () => {  
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

因為這個回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。所以當this是由目標對象決定時，我們應該使用函數(shù)表達式：

button.addEventListener("click", function() {  
    console.log(this === button); // => true
    this.innerHTML = "Clicked button";
});

以上補充的摘自：翻譯 | ES6 箭頭函數(shù)使用禁忌

云服務器 GPU云服務器箭頭函數(shù) 存儲過程和函數(shù)的區(qū)別 php數(shù)組和函數(shù)參數(shù) php中函數(shù)和參數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95932.html

發(fā)表評論

登陸后可評論

0條評論

王晗

男|高級講師

我要關(guān)注我要私信

TA的文章

在 main 函數(shù)之前執(zhí)行代碼（C 語言）

閱讀 2124·2021-09-29 09:35
面試知識點總結(jié)

閱讀 2003·2019-08-30 14:15
盒子模型，怪異盒子模型

閱讀 3024·2019-08-30 10:56
純css實現(xiàn)手機通訊錄

閱讀 1014·2019-08-29 16:59
5分鐘搞定box-sizing

閱讀 634·2019-08-29 14:04
2017 前端面試準備 - 收藏集 - 掘金

閱讀 1366·2019-08-29 12:30
CSS 樣式優(yōu)先級

閱讀 1084·2019-08-28 18:19
【js】《JavaScript設計模式與開發(fā)實踐》——this的指向

閱讀 562·2019-08-26 11:51

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

普通函數(shù)和箭頭函數(shù)

相關(guān)文章

**論普通函數(shù)和箭頭函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項、不適用場景**