this绑定的五种场景
- 默认绑定:默认绑定时this指向全局对象window(非严格模式),严格模式下为undefined。
- 隐式绑定:如果函数调用时,前面存在调用它的对象,那么this就会隐式绑定到这个对象上(多层则指向最近的)。
- 显式绑定:显式绑定是指我们通过call、apply以及bind方法改变this的行为。
- new绑定:构造调用创建了一个新对象echo,而在函数体内,this将指向新对象echo上。
- 箭头函数绑定:箭头函数中没有this,箭头函数的this指向取决于外层作用域中的this,外层作用域或函数的this指向谁,箭头函数中的this便指向谁。
- call、apply与bind都用于改变this绑定,但call、apply在改变this指向的同时还会执行函数,而bind在改变this后是返回一个全新的boundFunction绑定函数不会执行。
- bind属于硬绑定,返回的boundFunction的this指向无法再次通过bind、apply或call修改,call与apply的绑定只适用当前调用,调用完就没了,下次要用还得再次绑。
- call与apply功能完全相同,唯一不同的是call方法传递函数调用形参是以散列形式,而apply方法的形参是一个数组(在传参的情况下,call的性能要高于apply,因为apply在执行时还要多一步解析数组)。
- 一旦箭头函数的this绑定成功,也无法被再次修改。当然,箭头函数的this也不是真的无法修改,我们知道箭头函数的this就像作用域继承一样从上层作用域找,因此我们可以修改外层函数this指向达到间接修改箭头函数this的目的。
代码(可直接运行):
// 1.默认绑定
function f1() {
console.log("模式1 =>", this) // window/undefind
}
// f1()
// 2.隐式绑定
let obj = {
name: 'f2',
func: function fn() {
console.log("模式2 =>",this) // obj
}
};
obj.func()
// 3.显式绑定
let obj1 = {
name: 'obj1'
};
let obj2 = {
name: 'obj2'
};
var name = '全局';
function fn() {
console.log("模式3 =>",this.name);
};
fn.call(obj1); // obj1
fn(); // 全局/undefined
fn.apply(obj2); // obj2
fn(); // 全局/undefined
let boundFn = fn.bind(obj1); // obj1
boundFn.call(obj2); // obj1
boundFn.apply(obj2); // obj1
// 4.new绑定
function f4(){
this.name = 'f4'
};
let echo = new f4();
console.log("模式4 =>", echo.name) // f4
// 5.箭头函数绑定
function f5() {
return () => {
console.log("模式5 =>",this.name);
};
}
let obj3 = {
name: 'obj3'
};
let obj4 = {
name: 'obj4'
};
let bar = f5.call(obj3); // f5 this指向obj3
bar()
bar.call(obj4); // obj3 --- 证明绑定之后不可改变
f5.call(obj1)() // obj1 --- 证明改变最上层的this指向之后可以改变
f5.call(obj4)() // obj4 --- 证明改变最上层的this指向之后可以改变