箭頭函數不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this。
由于箭頭函數沒有自己的this指針，通過 call() 或 apply() 方法調用一個函數時，只能傳遞參數（不能綁定this），他們的第一個參數會被忽略。
前言
閱讀下面的內容要先看下《你不知道的javascript（上）》中的第二部分：this和對象原型（里面對于this指向的理論部分主要來源于該書）。
問題
這周在寫代碼的時候，聽同事在說箭頭函數無法更改this的指向，并且使用下面代碼進行驗證：
// (1) 使用箭頭函數，this一直指向windowvar a = 0var obj1 = { a: 1, fn: () => { console.log(this.a) }}obj1.fn() // 結果：0var obj2 = { a: 2}obj2.fn = obj1.fnobj2.fn() // 結果：0// （2）不使用箭頭函數，this的指向會更改var obj3 = { a: 3, fn: function() { console.log(this.a) }}obj3.fn() // 結果：3第一段代碼，無論fn綁定在哪個對象上，this.a始終指向全局的a（在非嚴格模式下的瀏覽器中我們可認為是window）
然而，這種說法是有問題（我認為）。
先理解this
this代表什么取決于：
var a = 0test() // 調用位置在此，通過【默認綁定規則】，可知test的this綁定到了window上function test() { console.log(this) // this是window var obj1 = { a: 1, fn: function() { console.log(this) // this是obj1 console.log(this.a) } } obj1.fn() // 調用位置在此,通過【隱式綁定規則】，可知fn中的this綁定到了obj1上 var obj2 = { a: 2 } obj2.fn = obj1.fn obj2.fn() // 調用位置在此，【隱式綁定規則】，可知fn內的this綁定到了obj2}箭頭函數中的this
其實這么起標題不太準確（然而想不出好的名字），因為箭頭函數是不會創建自己的this的（MDN），那么下面代碼的this是來源于哪里的呢？
var obj3 = { a: 3, fn: () => { console.log(this.a) }}obj3.fn() // 調用位置在此，this指向windowarrowFoo1() // （1）此處是調用位置，使用【默認的綁定規則】，this = windowfunction arrowFoo1() { var obj1 = { vv: 'svv1', fn: () => { console.log(this.vv, 'vv的值是') } } // （2）調用位置是此處，若fn不是箭頭函數，那么這里也會有自己的this（即【隱式調用規則】，this綁定為obj1），而fn是箭頭函數，則它沒有this，那么fn內部調用的this是誰？ // 這時候需要根據作用域的規則，往外層查找，找到哪里？找到調用obj1.fn的調用棧，即arrowFoo1函數的this，那么從（1）中可知，那個this指向的是window obj1.fn() var obj2 = { vv: 'svv2', } obj2.fn = obj1.fn obj2.fn()}function arrowFoo2() { var vv = '哦哦哦哦哦' console.log(this.vv, 'vv的值是')}因此，箭頭函數里面要是用到了this，那么其實它是通過作用域鏈，往外進行查找的，找到了就直接返回咯。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
