this的隐式绑定

一、隐式绑定:
function foo(){
	console.log(this.a);
}
var obj={
	a:2,
	foo:foo
};
obj.foo(); // 2
注:当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo()时this被绑定到obj,因此this.a和obj.a是一样的
注:当有多个对象属性链调用时,只有最后一层会起作用

二、隐式绑定的坑:隐式丢失
2.1 隐式丢失就是this的绑定会发生默认绑定,从而把this绑定到全局对象或者undefined上,这取决于是否是严格模式,(严格模式下为undefined)
例子:
function foo(){
	console.log(this.a);
}
var obj={
	a:2,
	foo:foo
}
var bar=obj.foo; // 函数别名
var a='global,a'; // a 是全局对象的属性
bar(); // 'global,a'
这里的bar进行了赋值操作,导致this丢失,这是因为bar实际上引用的是foo函数本身,obj相当于一个桥梁的作用,所以此时的bar()其实是一个不带任何修饰的函数调用。

2.2 传入回调函数时也会发生隐式丢失
function foo(){
	console.log(this.a)
}
function doFoo(fn){
	// fn 其实引用的是foo
	fn(); // <--调用位置
}
var obj={
	a:2,
	foo:foo
}
var a='global,a'; // a 是全局对象的属性
doFoo(obj.foo); //  'global,a'
注:参数传递其实就是一种隐式赋值,因此我们传入函数时也会被隐式赋值,本质上和上一个例子是一样的。





Guess you like

Origin blog.csdn.net/qq_45989814/article/details/121756593