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

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

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

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

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

產(chǎn)生原因

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

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

1，函數(shù)體內(nèi)的 this 對(duì)象，是定義時(shí)所在對(duì)象，而不是調(diào)用該函數(shù)的對(duì)象。
2，正因?yàn)樽约罕旧頉](méi)有 this 對(duì)象，因此不可以用作構(gòu)造函數(shù)，不能用 call()，apply()，bind()這些方法去改變 this 的指向。
3，不綁定 arguments 對(duì)象，可以使用 rest 參數(shù)來(lái)解決。
4，嚴(yán)格模式（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 操作符，否則會(huì)報(bào)錯(cuò)

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

6，沒(méi)有 prototype 屬性

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

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

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

寫(xiě)在后面

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

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

這個(gè)是可以的，但是下面的寫(xiě)法就會(huì)報(bào)錯(cuò)

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

有知道原因的小伙伴嗎？

2018-07-18
補(bǔ)充一下幾點(diǎn)：
1，在對(duì)象字面量上定義方法，會(huì)出現(xiàn)問(wè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對(duì)象
obj.d(); 
// 10 obj對(duì)象

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

同樣的規(guī)則也適用于給對(duì)象 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，動(dòng)態(tài)上下文中的回調(diào)函數(shù)
this是js中非常強(qiáng)大的特點(diǎn)，他讓函數(shù)可以根據(jù)其調(diào)用方式動(dòng)態(tài)的改變上下文，然后箭頭函數(shù)直接在聲明時(shí)就綁定了this對(duì)象，所以不再是動(dòng)態(tài)的。

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

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

因?yàn)檫@個(gè)回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。所以當(dāng)this是由目標(biāo)對(duì)象決定時(shí)，我們應(yīng)該使用函數(shù)表達(dá)式：

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95932.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

王晗

男|高級(jí)講師

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

TA的文章

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

閱讀 2030·2021-09-29 09:35
面試知識(shí)點(diǎn)總結(jié)

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

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

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

閱讀 581·2019-08-29 14:04
2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

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

閱讀 1032·2019-08-28 18:19
【js】《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》——this的指向

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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