this
是什么?现在请不要往下看,告诉自己一个答案,什么是 this?它是一个指针?一个对象还是一个函数?其实远没有那么复杂!
this 是什么
名不正则言不顺。今天我们来整理下 this
的简单定义!this
是 Javascript 中的一个关键字,它代表了函数调用的上下文。
- 如果包含 this 的函数是被对象作为方法调用的,this 就指向这个调用对象,这个时候可以说, this 是一个对象(默认绑定)
- 如果该函数是直接调用的,那么在严格模式下,this 指向 undefined,非严格模式下 this 指向 window(隐式绑定)
- 如果 this 是通过 new 关键字调用的,也就是通过构造函数调用的,那么 this 指向 new 返回的对象实例(隐式绑定,可以理解为构造函数时一种特殊的函数)
- 如果 this 是通过 apply,call,bind 调用,那么 this 指向调用是绑定的对象(显式绑定)
也就是说,this 并不是具体的什么东西。它只有在函数运行的时候才会存在,它存在于运行时的世界中。所以当你看到
function call() {
/* 这里有很多代码*/
console.log(this);
/* 这里有很多代码*/
}
这样的代码的时候,this 在这里并没有什么意义。我们应该关注的是在什么时候 call()
和 如何 call()
。现在请简单复习下,当我们通过下面几种方式调用的时候,this 关键字指向了哪里?
new call();
call();
call.bind(null,);
call.apply(null, []);
如何定位 this
关于定位 this,先介绍一个简单粗暴的万金油来说明如何判断;
- 是否有点操作符?如果有,左边的就是 this
- 是否有 call 或者 apply?如果有,第一个逗号传进来的,就是 this
- 方法是被单独调用的吗?如果是,全局对象上下文,就是 this
通过这三点,我们可以判断出绝大多数的 this 指向。少部分的就是上面提到的通过构造函数调用的方式。请看下面这个例子:
var p2 = null;
function Person(name) {
this.name = name;
this.age = 8;
console.log(this); // {name: 'todd', age: 8}
p2 = this;
}
var p1 = new Person('todd');
console.log(p1 === p2) // true
我们看到,当函数(构造函数) Person 通过关键字调用的时候,此时 this 并没有指向全局上下文,而是指向 new 操作符返回的对象。通过 p1 === p2 的结果可以证明。this 的判断规则十分简单,只要记住前面提到的三种方法再加上 new 关键字的场景,我们可以对全部 this 的调用场景做以区分。比如:
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
},100 );
}
};
a.func2() // this.func1 is not a function
这道题目的 this,看似花里胡哨。其实我们只要根据第三点判断就轻而易举。this 的运行时是在一个定时器中,因为它是匿名函数被单独调用,其上下文是全局,所以没有func1 这个方法。所以必然报错。
假装有总结
没什么好总结的,如果你有更好的建议,请留言讨论吧!