函数的 this
关键字**在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。
1. 无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。
2. 严格模式下,不在全局执行环境中,进入执行环境时没有设置 this 的值,this 会保持为 undefined。
function f2(){
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined; // true
3. 重点来了, this
永远指向调用它本身的对象,构造函数 this
指向构造函数新创建的对象。
下面我将举例说明这一点
函数自己调用
function f1(){
return this;
}
//在浏览器中:
f1() === window; //在浏览器中,全局对象是window, f1() 相当于 window.f1();
//在Node中:
f1() === globalThis;
当某个函数为对象的一个属性时
var car = {
name:'丰田',
run() {
console.log(this); // {name: "丰田", run: ƒ} 调用 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 调用他的是 this 指向 p
作为构造函数 , this构造函数新创建的对象
var Car = function(name) {
this.name = name;
console.log(this); // Car {name: "亚洲龙"}
// Car {name: "汉兰达"}
}
var myCar_1 = new Car('亚洲龙');
var myCar_2 = new Car('汉兰达');
当一个元素被绑定事件处理函数时,this指向被点击的这个元素
var btn = document.querySelector('button');
btn.onclick = function() {
console.log(this); // <button>this</button>
}
4. 箭头函数没有自身的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) ',' 运算符返回了一个匿名函数 ` inner.func` this 指向 window
console.log(inner.func()); // 20 inner 调用 this指向 inner
console.log((inner.func)()); // 20 inner 调用 this指向 inner
console.log((inner.func = inner.func)()); // 25 (inner.func = inner.func) 返回了一个匿名函数 this 指向 window