1、默认绑定

直接调用函数，使用不带任何修饰的函数进行调用，只能使用默认绑定，无法应用其它规则，代码如下：

function foo() {  console.log(this.a);}var a = 1;foo() // 1

2、隐式绑定

函数被调用时有上下文对象，那么this会绑定这个上下文对象，代码如下：

function foo() {  console.log(this.a);}var obj = {  a: 2,  foo: foo}var a = 1;obj.foo() // 2

其实不能讲foo这个函数属于obj对象，但是foo函数被调用时的落脚点的确是指向obj对象，当函数引用有上下文对象时，隐式绑定就会把函数调用中的this绑定到这个上下文对象；

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

var foo = function () {  console.log(this.a)}var obj2 = {  a: 2  foo: foo}var obj1 = {  a: 1  obj2: obj2}obj1.obj2.foo() // 2

隐式丢失

对于应用隐式绑定方式绑定this经常导致的一个情况是隐式丢失this

function foo() {  console.log(this.a);}var obj = {  a: 2,  foo: foo}var bar = obj.foo;var a = 'global';bar() // 'global'

针对这种情况，虽然bar是obj.foo的一个引用，但是实际上它引用的是foo函数本身，此时bar（）其实是一个不带任何修饰的函数调用，应用了默认绑定；

3、硬绑定

使用call，apply或者bind，在调用函数的时候直接指定上下文对象，那么函数中的this会绑定到传入的对象，代码如下：

function foo() {  console.log(this.a);}var obj = {  a: 1}foo.apply(obj) // 1

4、new绑定

使用new调用某个构造函数，代码如下：

function Foo(a) {  this.a = a;  console.log(this.a);}var obj = new Foo(2);console.log(obj.a) // 2

学习更多技能

请点击下方公众号