在es6中,箭頭函數體內的this對象,就是定義該函數時所在的作用域指向的對象。箭頭函數中this的指向就是上下文裡對象this指向,偶爾沒有上下文對象,this就指向window;即使是call、apply、bind等方法也不能改變箭頭函數this的指向。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
箭頭函數相信大家在日常開發中用到的地方非常之多,因為它很簡潔,可讀性強,但是它最大的好處,其實是解決了匿名函數的this指向問題,有利於封裝回呼函數。
先來個總結:
箭頭函數體內的this對象,就是定義該函數時所在的作用域指向的對象,而不是使用時所在的作用域指向的對象。
ES6箭頭函數中this
(1)預設指向定義它時,所處上下文的物件的this指向。也就是ES6箭頭函數裡this的指向就是上下文裡對象this指向,偶爾沒有上下文對象,this就指向window
#(2)即使是call,apply,bind等方法也不能改變箭頭函數this的指向
下面是普通函數的列子:
var name = 'window'; // 其实是window.name = 'window' var A = { name: 'A', sayHello: function(){ console.log(this.name) } } A.sayHello();// 输出A var B = { name: 'B' } A.sayHello.call(B);//输出B A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window
從上面可以看到,sayHello這個方法是定義在A物件中的,當我們使用call方法,把其指向B對象,最後輸出了B;可以得出,sayHello的this只跟使用時的對像有關。
改造一下:
var name = 'window'; var A = { name: 'A', sayHello: () => { console.log(this.name) } } A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window
我相信在這裡,大部分同學都會出錯,以為sayHello是綁定在A上的,但其實它綁定在window上的,那到底是為什麼呢?
一開始,我重點標註了“該函數所在的作用域指向的對象”,作用域是指函數內部,這裡的箭頭函數,也就是sayHello,所在的作用域其實是最外層的js環境,因為沒有其他函數包裹;然後最外層的js環境指向的對像是winodw對象,所以這裡的this指向的是window對象。
那如何改造成永遠綁定A呢:
var name = 'window'; var A = { name: 'A', sayHello: function(){ var s = () => console.log(this.name) return s//返回箭头函数s } } var sayHello = A.sayHello(); sayHello();// 输出A var B = { name: 'B'; } sayHello.call(B); //还是A sayHello.call(); //还是A
OK,這樣就做到了永遠指向A物件了,我們再根據「該函數所在的作用域指向的物件」來分析一下:
函數所在的作用域:箭頭函式s 所在的作用域是sayHello,因為sayHello是一個函式。
作用域指向的物件:A.sayHello指向的物件是A。
所以箭頭函數s 中this就是指向A啦~~
----------------finish--- ----------
最後是使用箭頭函數其他幾點需要注意的地方
#不可以當作建構函數,也就是說,不可以使用new指令,否則會拋出一個錯誤。
不可以使用arguments對象,該對像在函數體內不存在。如果要用,可以用 rest 參數代替。
不可以使用yield指令,因此箭頭函數不能用作 Generator 函數。
【推薦學習:javascript影片教學】
以上是es6箭頭法中this的指向是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!