在對(duì)象中
看下面的一個(gè)例子，這里的 this 指向的是哪里呢疼蛾？
const money = {
a: 1,
fn: () => {
console.log(this)
}
}
按照箭頭函數(shù)定義的解釋肛跌，誰實(shí)例化（或定義）就指向誰，那這里的 this 應(yīng)該是對(duì)象 money察郁。
事實(shí)卻不是這樣衍慎，執(zhí)行上面結(jié)果如下：
可以這樣來理解，箭頭函數(shù)不會(huì)創(chuàng)建自己的 this皮钠，它只會(huì)從自己的作用域鏈的上一層繼承this稳捆。這里字面量的方式定義它封閉函數(shù)可以理解為就是 Window，所以這里箭頭函數(shù)的 this 也指向 Window
另一種理解是箭頭函數(shù)是用當(dāng)前的詞法作用域覆蓋 this 本來的值鳞芙，上面代碼里詞法作用域中 this 指向的是 Window
在方法中
function dollar() {
this.fn = () => {
console.log(this)
}
}
new dollar().fn() // this -> dollar
在類中
class Dollar {
fn = () => {
console.log(this)
}
}
new Dollar().fn() // this -> Dollar
class RMB {
constructor(fn) {
this.fn = fn
}
}
new RMB(new Dollar().fn).fn() // this -> Dollar
- 按照上面描述眷柔，this 繼承自上一層期虾，箭頭函數(shù)定義在方法或類中指向的就是實(shí)例本身原朝，不論方法在哪里執(zhí)行、誰來執(zhí)行镶苞。
普通函數(shù)中 this 的行為
this 指向執(zhí)行這個(gè)方法的上下文（對(duì)象或類）
函數(shù)根據(jù)它是被如何調(diào)用的來定義這個(gè)函數(shù)的this值
首先看一個(gè)普通的例子
class abe {
fn() {
console.log(this)
}
}
class dd1 {
constructor(d) {
this.fn = d.fn
}
}
new abe().fn() // this -> abe
new abe().fn.call(new dd1({})) // this -> dd1
new dd1(new abe()).fn() // this -> dd1
從這個(gè)結(jié)果可以看出 this 指向執(zhí)行時(shí)的上下文喳坠，即誰執(zhí)行指向誰。
const aba = {
a: 1,
fn: function() {
console.log(this)
}
}
function abi() {
this.fn = function() {
console.log(this)
}
}
class abe {
fn() {
console.log(this)
}
}
分別在對(duì)象茂蚓、方法壕鹉、類中驗(yàn)證剃幌，普通函數(shù)定義的 this 指向都滿足一致的規(guī)則溶锭，誰執(zhí)行指向誰井辆。
結(jié)論
- 普通函數(shù)中 this 指向執(zhí)行這個(gè)方法的上下文（對(duì)象或類），誰執(zhí)行指向誰
- 箭頭函數(shù)中 this 繼承自上一層的 this益兄，誰實(shí)例化指向誰脊凰，沒有實(shí)例的指向上一層（比如對(duì)象中定義的方法）
- 不論普通 function 還是 arrow function 抖棘，直接執(zhí)行的 this 大多是指向當(dāng)前定義的上下文
- 箭頭函數(shù)的特點(diǎn)，語法簡(jiǎn)單狸涌、沒有自己的 this切省、arguments、new帕胆、prototype
一個(gè)特殊的箭頭函數(shù)
箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己的作用域鏈的上一層繼承this朝捆。
箭頭函數(shù)沒有定義this綁定。
function c() {
this.fn = () => {
console.log(this)
};
return this
}
new c().fn() // c
c().fn() // window
// 可以這樣理解
// c() 沒有執(zhí)行上下文默認(rèn)是 window懒豹，那箭頭函數(shù)指向上一層也是 window
// new 的操作是創(chuàng)建一個(gè)空對(duì)象并將這個(gè)對(duì)象做為 this 的上下文
'use strict';
var obj = {
a: 10
};
Object.defineProperty(obj, "b", {
get: () => {
console.log(this.a, typeof this.a, this);
return this.a+10;
// 代表全局對(duì)象 'Window', 因此 'this.a' 返回 'undefined'
}
});
obj.b;
參照
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
