这里是《你不知道的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绑定>显式绑定>隐式绑定>默认绑定