基於作用域的ES6箭頭函式this分析

對於箭頭函式中this的描述，主要有以下幾種。

箭頭函式不會建立this，它只會從自己作用域鏈的上一層繼承this (出自mdn的解釋)

箭頭函式的this由它的外層（函式或全域性）作用域來決定 (出自你不知道的js p-99)

箭頭函式體內的this就是定義時所在的物件，而非執行時所在的物件 （出自阮一峰 es6標準入門 p-81）

所有的箭頭函式都沒有自己的this，指向外層 （出自github.com/ruanyf/es6t…）

01. 定義在乙個函式中，此時箭頭函式中的this取決於外層函式中的this指向。

function

foo() , 1000);
}const obj = {};
foo(); // this === window
foo.call(obj); // this === obj
複製**

在全域性作用域中呼叫foo, 寫法上等同於window.foo(), 所以此時this指向的全域性物件window

在obj上呼叫，此時foo中的this顯式地繫結在obj物件上，所以this等於obj

02. 定義在乙個物件中

物件的定義不會建立乙個作用域。

var name = 'window';

const person1 = 
}person1.sayname(); // window
複製**

這裡我們需要了解一下js作用域了。

js中存在基於函式的作用域，意味中每宣告乙個函式，都會為其自身建立乙個氣泡，而其他結構不會建立作用域氣泡。（摘自 你不知道的js p-22）

從上面的描述，我們可以得出，上述**其實一共存在兩個作用域氣泡。乙個全域性的作用域氣泡和乙個包含在其中的箭頭函式的作用域氣泡。根據一開始的描述，我們可以得出，箭頭函式中的this是由外層作用域來決定，即全域性作用域，所以此時this指向window.

==擴充套件：==

var name = 'window';

const person1 = 
}}person1.obj.init(); // window
複製**

03. 使用建構函式

有下面一段**：

var name = "global";

function person(name) 
}const persona = new person('aaa');
const personb = new person('bbb');
persona.sayname(); // aaa
personb.sayname(); // bbb
複製**

ps: 這裡將方法寫在建構函式內，是不妥當的（詳情請看關於js物件建立）。這裡我們只做**的演示，便於我們更清楚的分析作用域。

==**擴充套件01：==

// 在上面的基礎上增加一句

personb.sayname.call(persona); // bbb
複製**

==**擴充套件02：==

這一段**中，將箭頭函式定義在原型物件上。

var name = "global";

function person(name) 
person.prototype.sayname = () => 
const persona = new person('aaa');
const personb = new person('bbb');
persona.sayname(); // global
personb.sayname(); // global
personb.sayname.call(persona); // global
複製**

我們從多個方面，對箭頭函式中的this指向做了**的演示。

得出判斷箭頭函式中this指向最清晰、易懂的方式，就是對作用域的分析。

箭頭函式的this，由它自己作用域的上一層作用域的this決定。

筆記中可能存在有誤之處，歡迎指正。

ES6的箭頭函式this和普通函式的this區別

普通函式中，內層函式不能從外層函式中繼承this的值，在內層函式中，this會是window或者undefined，臨時變數self用來將外部的this值匯入到內部函式中 另外的方式是在內部函式執行.bind this es6中的箭頭函式會直接呼叫的this是繼承父級的this。functionfu...

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...