这里是《你不知道的JS》中常见的this绑定种类分享:
1)默认绑定:
function foo(){
console.log(this.a);
}
var a = 2;
foo();//
解析:foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，this指向全局对象
注意:严格模式下与foo()的调用位置无关:引擎会抛出TypeError: this is undefined的异常
2)隐式绑定:
function foo(){
console.log(this.a);
}
var obj = {
a:2,
foo:foo
};
obj.foo();//
解析:在这里 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();//
3)显式绑定:
function foo(){
console.log(this.a);
}
var obj = {
a:2
};
foo.call(obj);//
解析:call() 方法会将第一个参数绑定到this，在调用函数时指定这个this，上面示例即在调用foo时强制把他的this绑定到obj上
注意:显式绑定仍然无法解决丢失绑定问题
4)硬绑定:
function foo(){
console.log(this.a);
}
var obj = {
a:2
};
var bar = function(){
foo.call(obj);
};
bar();//
setTimeout(bar,100);//
//硬绑定的bar不可能再修改它的this
bar.call(window);//
解析:在将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);//
由于硬绑定函数是一种非常常用的模式，所以在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);//
注意: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);//
解析:使用new来调用 foo(...) 时，会构造一个新对象并把它绑定到 foo(...)调用中的this上
最后要说的是这几种绑定的优先级:
new绑定>显式绑定>隐式绑定>默认绑定