JavaScript中this的四个绑定规则总结
前言
如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅。所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧。
绑定规则
1.默认绑定
独立函数调用时,this指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定,this绑定至undefined。
functionfoo(){ console.log(this.a); } vara=2; foo();//2
严格模式时:
functionfoo(){ "usestrict"; console,log(this.a); } vara=2; foo();//TypeError:thisisundefined
2.隐式绑定
当函数引用有上下文对象时(即函数作为引用属性被添加到对象中),隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
functionfoo(){ console.log(this.a); } varobj={ a:2, foo:foo }; obj.foo();//2
对象属性引用链中只有最顶层或者说最后一层会影响调用位置:
obj1.obj2.foo();//foo中的this与obj2绑定
2.1隐式丢失
隐式丢失指的是函数中的this丢失绑定对象,即它会应用第1条的默认绑定规则,从而将this绑定到全局对象或者undefined上,取决于是否在严格模式下运行。以下情况会发生隐式丢失:
绑定至上下文对象的函数被赋值给一个新的函数,然后调用这个新的函数时:
functionfoo(){ console.log(this.a); } varobj={ a:2, foo:foo }; varbar=obj.foo;//函数别名 vara="这是全局变量喔"; bar();//"这是全局变量喔"
传入回调函数时:
functionfoo(){ console.log(this.a); } functiondoFoo(fn){ fn();//<--调用位置 } varobj={ a:2, foo:foo }; vara="这是全局变量喔"; doFoo(obj.foo);//"这是全局变量喔"
其实这就是第一种情况的变种,实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数,在将函数传入语言内置的函数比如setTimeout时,同样会发生隐式丢失的情况。
3.显式绑定
显式绑定的核心是JavaScript内置的call(..)和apply(..)方法,这两个方法在JavaScript提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。
call(..)和apply(..)的第一个参数是一个对象(二者区别在后面传入的参数形式,这里不是重点,不讨论),他们会将this绑定到这个对象上。因为你可以直接指定this绑定的对象,所以这条规则被称为显式绑定。
functionfoo(){ console.log(this.a); } varobj={ a:2 }; foo.call(obj);//2
如果call或者apply传入的第一个参数是原始值(字符串类型、布尔类型或者数字类型),那么该原始值会被转换成它的对象形式(newString()、newBoolean()或newNumber()),俗称“装箱”。
显式绑定仍然无法解决丢失绑定问题。
3.1硬绑定
作为显式绑定的一个变种,硬绑定可以解决丢失绑定问题。
functionfoo(){ console.log(this.a); } varobj={ a:2 }; varbar=function(){ foo.call(obj); }; bar();//2 setTimeout(bar,100);//2 bar.call(window);//无效,硬绑定的bar不会再修改它的this
在一个新的函数内部强制绑定this到某个对象上,无论之后如何调用这个新的函数,其this都不会丢失。
典型应用场景为创建一个包裹函数,传入所有的参数并返回接收到的所有值:
functionfoo(something){ console.log(this.a,something); returnthis.a+something; } varobj={ a:2 }; varbar=function(){ returnfoo.call(obj,arguments); }; varb=bar(3);//23 console.log(b);//5
或者将绑定的对象改为可配置,这样就成了一个辅助绑定函数:
... functionbind(fn,obj){ returnfunction(){ returnfn.apply(obj,arguments); }; } ...
由于硬绑定实在太过常见,所以ES5提供了内置的Function.prototype.bind,其用法如下:
functionfoo(something){ console.log(this.a,something); returnthis.a+something; } varobj={ a:2 }; varbar=foo.bind(obj); varb=bar(3);//23 console.log(b);//5
3.2API调用的“上下文”
JavaScript自身以及许多第三方库的函数都提供了一个可选的参数,通常被称为“上下文”,其作用和bind(..)一样,确保回调函数使用指定的this。
functionfoo(el){ console.log(el,this.id); } varobj={ id:"awsome" }; //调用foo(..)时把this绑定到obj [1,2,3].forEach(foo,obj); //1awsome2awsome3awsome
实际上这些函数背后还是调用了call()或者apply(),只不过这样开发者需要写的代码就少了一些。
4.new绑定
使用new来调用函数时,会自动执行下面的操作:
1、创建一个全新的对象
2、这个新对象会被执行[[原型]]连接
3、这个新对象会绑定到函数调用的this
4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
举例如下:
functionfoo(){ this.a=a; } varbar=newfoo(2); console.log(bar.a);//2
使用new来调用foo(..)时,会构造一个新对象并把它绑定到foo(..)调用中的this上。
优先级
具体推断细节不再表述,以上四种绑定规则的使用先后推断如下:
1、函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。
varbar=newfoo();
2、函数是否通过call、apply(显示绑定)或者硬绑定?如果是的话,this绑定的是指定的对象。
varbar=foo.call(obj2);
3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。
varbar=obj1.foo();
4、如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局对象。
varbar=foo();
绑定例外
如果把null或者undefined作为this的绑定对象传入call、apply或者bind,那么这些值在调用时会被忽略,实际应用的是默认绑定规则。(书中推荐使用一个空对象来绑定this)。
间接引用。这种情况容易在赋值时发生:
functionfoo(){ console.log(this.a); } vara=2; varo={a:3,foo:foo}; varp={a:4}; o.foo();//3 (p.foo=o.foo)();//2
p.foo()实际上引用了foo(),如此,会应用默认绑定。
另外ES6对改变this的混乱绑定作了相应的努力,诞生了箭头函数,其根据当前词法作用域来决定this而非上面的四条规则,具体来说,箭头函数会继承外层函数调用的this绑定(这其实和ES6之前代码中的self=this是一个道理)。
总结
以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。