【前端工程師手冊】this拾遺之關于箭頭函數的種種

oogh 發布于2019-08-26 11:55 / 2537人閱讀

摘要：之前總結了的一些常見綁定情況前端工程師手冊之的筆記，但是還有一些沒有說到，今天繼續學習一下。參考資料箭頭函數你不知道的上卷

之前總結了this的一些常見綁定情況（【前端工程師手冊】JavaScript之this的筆記），但是還有一些沒有說到，今天繼續學習一下。

es6箭頭函數

先說結論：箭頭函數沒有自己的this，它是根據外層(函數或者全局，后面會說到箭頭函數作為某個對象的方法時的情況)作用域來決定this，箭頭函數可以像 bind(..) 一樣確保函數的 this 被綁定到指定對象，也就是說它在運行中不會丟失this，它的this是在聲明箭頭函數時就決定了。

一個例子

var name = "out"
function  test(){
    this.name = "in";
    setTimeout(function(){
        console.log(this.name)
    },1000)
}
new test() // 1秒后打印"out"

上面這個是es5中常見的this問題，計時器1s后運行匿名函數，this已經丟失了，于是默認綁定到了window上。
之前的經典處理方法是：

var name = "out"
function  test(){
    this.name = "in";
    var self = this;
    setTimeout(function(){
        console.log(self.name)
    },1000)
}
new test() // 1秒后打印"in"

顯式的使用self來保存住正確的this，防止this丟失。
其實這些都可以使用箭頭函數來實現：

var name = "out"
function  test(){
    this.name = "in";
    setTimeout(() => {
        console.log(this.name)
    },1000)
}
new test() // 1秒后打印"in"

在上面的代碼片段中，箭頭函數內部的this在聲明期間就綁定為外層函數的this，且在運行過程中不會被修改。

不能當做構造函數

var Agumon = () => {  this.name = "agumon" }

var agumon = new Agumon() // Uncaught TypeError: Agumon is not a constructor

使用箭頭函數去當做構造函數來new對象會直接報錯，不過這個也好理解，因為箭頭函數并沒有自己的this，new操作中有用到this的步驟它搞不定。

call或apply調用無效

function foo() {
// 返回一個箭頭函數
    return (a) => {
        console.log( this.a ); 
    };    
}
var obj1 = {
    a:2
};
var obj2 = { a:3};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是3

上面的代碼片段顯式的使用call來想把foodethis綁定到obj1，然而并不奏效，因為箭頭函數的this并不會在運行時再被改變。

沒有prototype

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

箭頭函數是沒有原型的

不適用于作為對象的方法

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

剛剛說了根據外層作用域來決定this，上面代碼片段中的對象obj還不足以生成作用域，再往上就是全局作用域了，所以this被綁定為window。
參考資料：
MDN-箭頭函數
《你不知道的JavaScript-上卷》

云服務器 GPU云服務器關于前端的網站箭頭函數優秀的前端工程師好的前端工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107813.html

【前端工程師手冊】JavaScript作用域拾遺

摘要：昨天總結了一些作用域的知識前端工程師手冊之作用域，但是發表完發現忘記了一些東西，今天拾個遺。循環完畢之后，，且此時生成了個匿名函數，由于這個匿名函數處在同一個詞法作用域中，所以他們引用同一個，所以當他們執行時，自然而然就會打出。昨天總結了一些作用域的知識【前端工程師手冊】JavaScript之作用域，但是發表完發現忘記了一些東西，今天拾個遺。昨天說到了JavaScript中沒有塊級作...

flyer_dev 2019-08-22 17:08 評論0 收藏0
前端技能拾遺

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~ 解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。編譯型語言在程序執行之前...

lyning 2019-08-30 15:54 評論0 收藏0
前端技能拾遺

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~ 解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。編譯型語言在程序執行之前...

Vultr 2019-08-02 13:56 評論0 收藏0
前端技能拾遺

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~ 解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。編譯型語言在程序執行之前...

kevin 2019-08-23 14:13 評論0 收藏0