this的绑定规则有哪些?
- 默认绑定
- 隐式绑定
- 显式绑定 / 硬绑定
- new绑定
默认绑定
在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。
如下, 严格模式下this为undefined
function sayHi(){
console.log('Hello,', this.name);
}
var name = 'gg';
sayHi(); //gg
隐式绑定
函数的调用是在某个对象上触发的,即调用位置上存在上下文对象。典型的形式为 XXX.fun(), 对象属性链中只有最后一层会影响到调用位置。
function sayHi(){
console.log('Hello,', this.name);
}
var person2 = {
name: 'ggg',
sayHi: sayHi
}
var person1 = {
name: 'yyy',
friend: person2
}
person1.friend.sayHi(); //Hello,ggg
函数赋值于其他变量:
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'ggg',
sayHi: sayHi
}
var name = 'yyy';
var Hi = person.sayHi;
Hi(); // Hello, yyy
回调的情况
function sayHi(){
console.log('Hello,', this.name);
}
var person1 = {
name: 'YvetteLau',
sayHi: function(){
setTimeout(function(){
console.log('Hello,',this.name);
})
}
}
var person2 = {
name: 'Christina',
sayHi: sayHi
}
var name='Wiliam';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
person2.sayHi();
},200);
Hello, Wiliam
Hello, Wiliam
Hello, Christina
- 情况1: setTimeout中回调为默认绑定
- 情况2: 相当于person2.sayHi函数赋值给了一个中间形参fn,最后执行fn, 所以和
函数赋值于其他变量
一样 - 情况3: 对象上触发的,没毛病
显式绑定 / 硬绑定
就是通过call,apply,bind的方式,显式的指定this所指向的对象。箭头函数无法通过call、apply,bind改变this指向
new 绑定
顾名思义
使用new来调用函数,会自动执行下面的操作:
- 创建一个新对象
- 将构造函数的作用域赋值给新对象,即this指向这个新对象
- 执行构造函数中的代码
- 返回新对象
因此,我们使用new来调用函数的时候,就会新对象绑定到这个函数的this上。
绑定优先级
new绑定 > 显式绑定 > 隐式绑定 > 默认绑定