这里是《你不知道的JS》中常见的this绑定种类分享:
1)默认绑定:
function foo(){ console.log(this.a); } var a = 2; foo();//2
解析:foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,this指向全局对象
注意:严格模式下与foo()的调用位置无关:引擎会抛出TypeError: this is undefined的异常
2)隐式绑定:
function foo(){ console.log(this.a); } var obj = { a:2, foo:foo }; obj.foo();//2
解析:在这里 foo() 被调用时,落脚点确实指向obj对象,当函数引用有上下文对象时,隐式绑定规则会将函数调用中的this绑定到这个上下文对象,即this.a和obj.a是一样的
注意:对象属性引用链中只有最顶层或者说最后一层会影响调用位置
function foo(){ console.log(this.a); } var obj2 = { a:42, foo:foo }; var obj1 = { a:2, obj2:obj2 }; obj1.obj2.foo();//42
3)显式绑定:
function foo(){ console.log(this.a); } var obj = { a:2 }; foo.call(obj);//2
解析:call() 方法会将第一个参数绑定到this,在调用函数时指定这个this,上面示例即在调用foo时强制把他的this绑定到obj上
注意:显式绑定仍然无法解决丢失绑定问题
4)硬绑定:
function foo(){ console.log(this.a); } var obj = { a:2 }; var bar = function(){ foo.call(obj); }; bar();//2 setTimeout(bar,100);//2 //硬绑定的bar不可能再修改它的this bar.call(window);//2
解析:在将foo的this强制绑定到obj后,无论之后如何调用bar,都会在obj上调用foo
注意:硬绑定典型应用场景:创建一个包裹函数,传入所有的参数并返回接收到的所有值
function foo(something){ console.log(this.a,something);//2 3 return this.a+something; } var obj = { a:2 }; var bar = function(){ return foo.apply(obj,arguments); }; var b = bar(3); console.log(b);//5
由于硬绑定函数是一种非常常用的模式,所以在ES5中提供到了内置的方法:Function.prototype.bind
function foo(something){ console.log(this.a,something);//2 3 return this.a+something; } var obj = { a:2 }; var bar = foo.bind(obj); var b = bar(3); console.log(b);//5
注意:bind(...)会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数
5)new绑定:JS中的new的机制实际上和其他面向类的语言完全不同,JS中"构造函数"是一些使用new操作符时被调用的函数
使用new来调用函数,或者说发生构造函数调用时,会执行下面的操作:
#创建(构造)一个全新的对象
#这个新对象会被执行 [[原型]]连接
#这个新对象会绑定到函数调用的this
#如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
function foo(a){ this.a = a; } var bar = new foo(2); console.log(bar.a);//2
解析:使用new来调用 foo(...) 时,会构造一个新对象并把它绑定到 foo(...)调用中的this上
最后要说的是这几种绑定的优先级:
new绑定>显式绑定>隐式绑定>默认绑定