函數(shù)的 this
關(guān)鍵字**在 JavaScript 中的表現(xiàn)略有不同吕世,此外,在嚴格模式和非嚴格模式之間也會有一些差別戴陡。
1. 無論是否在嚴格模式下塞绿,在全局執(zhí)行環(huán)境中(在任何函數(shù)體外部)this 都指向全局對象。
2. 嚴格模式下恤批,不在全局執(zhí)行環(huán)境中异吻,進入執(zhí)行環(huán)境時沒有設(shè)置 this 的值,this 會保持為 undefined喜庞。
function f2(){
"use strict"; // 這里是嚴格模式
return this;
}
f2() === undefined; // true
3. 重點來了诀浪, this
永遠指向調(diào)用它本身的對象,構(gòu)造函數(shù) this
指向構(gòu)造函數(shù)新創(chuàng)建的對象延都。
下面我將舉例說明這一點
函數(shù)自己調(diào)用
function f1(){
return this;
}
//在瀏覽器中:
f1() === window; //在瀏覽器中雷猪,全局對象是window, f1() 相當于 window.f1();
//在Node中:
f1() === globalThis;
當某個函數(shù)為對象的一個屬性時
var car = {
name:'豐田',
run() {
console.log(this); // {name: "豐田", run: ?} 調(diào)用 run 的是 car,所以this指向car
}
}
car.run()
原型鏈中的 this
var o = {
f: function() {
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5 調(diào)用他的是 this 指向 p
作為構(gòu)造函數(shù) , this構(gòu)造函數(shù)新創(chuàng)建的對象
var Car = function(name) {
this.name = name;
console.log(this); // Car {name: "亞洲龍"}
// Car {name: "漢蘭達"}
}
var myCar_1 = new Car('亞洲龍');
var myCar_2 = new Car('漢蘭達');
當一個元素被綁定事件處理函數(shù)時晰房,this指向被點擊的這個元素
var btn = document.querySelector('button');
btn.onclick = function() {
console.log(this); // <button>this</button>
}
4. 箭頭函數(shù)沒有自身的this求摇,他沿用父級作用域的this。
5. 題目測試
var out = 25,
inner = {
out: 20,
func: function () {
var out = 30;
return this.out;
}
};
console.log((inner.func, inner.func)()); // 25 (inner.func, inner.func) ',' 運算符返回了一個匿名函數(shù) ` inner.func` this 指向 window
console.log(inner.func()); // 20 inner 調(diào)用 this指向 inner
console.log((inner.func)()); // 20 inner 調(diào)用 this指向 inner
console.log((inner.func = inner.func)()); // 25 (inner.func = inner.func) 返回了一個匿名函數(shù) this 指向 window