this的指向问题一直以来都是前端开发者找工作面试的重点,现在就聊聊这个this到底是何方神圣?
ECMAScript中这样写到:this关键字执行为当前执行环境的thisBinding.
MDN这样写到:绝大多数中,函数的调用决定了this的指向。
简单来说,this的指向是由于调用时候决定的,this
具有运行期绑定的特性。
全局执行上下文:
在全局执行上下文中,this的指向为window
console.log(this === window) // true
在浏览器里面this
等价于window
对象,如果你声明一些全局变量,这些变量都会作为this的属性。
函数执行上下文:
在函数执行上下文,this的指向取决于函数的调用方式。
function test() {
return this === window
}
test() // true
直接调用,this就会指向全局window.
var obj = {
name: 'cat',
age: 3,
say: function () {
console.log(this.name)
}
}
obj.say() // cat
指向调用的对象,这里this指向的对象为obj.
构造函数的this:
构造函数的创建的对象会有以下操作:
- 创建新对象
- 将this指向这个对象
- 给对象赋值(属性、方法)
- 返回this
所以this
就是指向创建的这个对象上。
function Person(name){
this.name = name;
this.age = 25;
this.say = function(){
console.log(this.name + ":" + this.age);
}
}
var person = new Person("axuebin");
console.log(person.name); // axuebin
person.say(); // axuebin:25
DOM事件处理函数:this
指向触发事件的元素,也就是始事件处理程序所绑定到的DOM节点。
var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
console.log(this);
console.log(this === e.target); // true
})
这里的this指向e.target.
箭头函数的this:箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
。因此,在下面的代码中,传递给setInterval
的函数内的this
与封闭函数中的this
值相同:
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}
var p = new Person();
这就是令人讨厌的this指向哪里的讲解,比较简单,但是容易忽略。。。。