1. 默认绑定与隐式绑定
function fun() {
console.log(this.a);
}
var a = 'a';
var o2 = {a: "a2", fun: fun};
var o3 = {a: "a3", fun: fun};
fun(); // "a" – 默认绑定
o2.fun(); // "a2" – 隐式绑定
o3.fun(); // "a3" – 隐式绑定
fun()这种调用方法,就是默认绑定。如果在非严格模式下,this就是全局对象,浏览器当中就是window。而如果在严格模式(use strict)下,this就会是undefined。
之所以这是默认绑定,因为fun的调用不属于任何人,前面没有任何限定条件。这是最简单的绑定。
o2.fun()和o3.fun()这两种调用方法,都是隐式绑定。fun是作为o2和o3的方法而调用的,那么谁调用fun,this就指向谁。在上面的例子中,o2.fun()中的this指向o2,因此this.a就是o2当中的a: “a2”;同理,o3.fun()打印出来的就是o3中的”a3”。
2. 显式绑定
function fun() {
console.log(this.a);
}
var a = "a";
var obj = {a: "a2"};
fun(); // "a" 默认绑定
fun.call(obj); // "a2" 显式绑定,使用obj作为"this"
如果fun是通过call、apply或者bind调用的,那么这种调用就是显式绑定。这种绑定中,this的指向就是这三个函数中传递的第一个参数。
3. 关键字new绑定
function fun() {
this.b = "b";
console.log(this.a + " " + b);
}
var a = "a";
var b = new fun();
如果把new这个关键字放在一个函数调用的前面,JS编译器会做这四件事情:
- 创建一个新的空的对象
- 把这个对象链接到原型对象上(prototype)
- 这个对象被绑定为this
- 如果这个函数不返回任何东西,那么就会默认return this
我们从这四步可以看出,如果在函数调用前面加上new,那么这个函数中的this就是这个新的对象。
上面的例子,最终会输出undefined undefined。这是因为b这个变量并没有a这个属性,而b此时只被定义,没有被赋值,因此b也是undefined。
4. 箭头函数
箭头函数会无视以上所有的规则,this的值就是函数创建时候所在的lexical scope中的this,而和调用方式无关。
可以对比下面两个例子:
function Person(){
this.age = 0;
setTimeout(function () {
console.log(this.age); // 输出undefined
}, 1000);
}
var p = new Person();
function Person(){
this.age = 10;
setTimeout(()=> {
console.log(this.age); // 输出10
}, 1000);
}
var p = new Person();
在上面没有使用箭头函数的例子当中,setTimeout内部的函数是被global调用的,而global没有age这个属性,因此输出undefined。
第二个例子使用了箭头函数,this就会使用lexical scope中的this,就是Person,因此输出10。
绑定优先级
如果多重绑定规格都适用,那么绑定规则的优先级顺序是这样的:
- 箭头函数
- 关键字new调
- 显式绑定
- 隐式绑定
- 默认绑定
箭头函数优先级最高,会无视2-5绑定规则。而默认绑定优先级最低,只有其他绑定都不使用的时候,才会使用默认绑定。