摘要

上一篇文章中，引入了为什么使用this,以及this中常见的误区和解决方案。接下来我就关于this的使用以及规则说一下，希望对读友有帮助。

1 调用位置

在理解this的使用之前，先了解一个调用位置:函数在代码中调用的位置，这有助于我们理解this是指向谁。例子

function baz() {
        console.log('baz');
        bar();
    }
    function bar() {
        console.log('bar');
        foo();
    }
    function foo() {
        console.log('foo');
        debugger;
    }
    baz();

以上代码在浏览器中执行，我们可以通过浏览器的调试工具查看函数的调用顺序与this指向谁。这里效果图就不截取了。接下来就是this的规则。

2 绑定规则

2.2.1 默认规则

首先看一下代码来自《你不知道的JavaScript》中。

    function foo() {
        console.log(this);
        console.log(this.a);
    }
    var a = 'hello';
    foo();//this->window,this.a->hello

预期结果就是输出window，hello。函数在自身调用的时候，其this指向的是全局对象window，这样被称之为默认规则。但这条默认规则，在严格模式下又是不可取的，如下代码

 function foo() {
        "use strict";
        console.log(this);
        console.log(this.a);
    }
    var a = 'hello';
    foo();//this->undefined,this.a->获取不到 undefined

在严格模式下的函数中，函数在自身调用的时候，this的指向为undefined。
但是，还有另外一种情况就是在严格模式下调用，依然会使用默认规则代码如下

    function foo() {
        console.log(this);
        console.log(this.a);
    }
    var a = 'hello';

    (function () {
        'use strict';
        foo();//this->window,this.a->hello
    })();

2.2.2 隐式绑定

在隐式绑定中，可以理解为谁调用这个函数，this就指向谁。话不多说直接上代码

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

通过代码来看 其实一点不难理解,obj调用了这个函数，自然的this就指向了obj这个对象。其实换句话说就是谁直接调用这个函数，this就指向谁。在上代码

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

这段代码中，最终直接调用foo的是obj2，那么this.a就会获取obj2的a的值。
在隐式绑定中，会出现一个问题，就是this绑定丢失的问题。上代码

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

我们预期的运行结果是this.a=2；但是实际结果是oops,global;在代码中虽然我们用bar引用了obj.foo这个属性，但实际上是引用了foo这个函数。因此最后调用bar()和调用foo()是一个道理,最后this指向了window。应用了默认绑定在非严格模式下的规则。

2.2.3 显式绑定

在隐式绑定中，我们是通过让函数绑定到对象中的某个属性来实现this的指向，这个容易造成this指向的丢失。为了解决这个问题，我们通过显式绑定的方式解决。在JavaScript中的函数中都有两个方法call与apply可以通过调用者两个方法强制改变this的指向。这种方式我们称之为显式绑定。
实例直接上代码

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

2.2.3.1 硬绑定

在显式绑定中的一种方式就是硬绑定，一旦绑定成功不会受调用他的对象影响。上代码

    function foo() {
        console.log( this.a );
    }
    var obj = {
        a:2
    };
    var bar = function () {
        foo.call(obj);
    };
    bar.call(window);//2
    setTimeout(bar,100);//2

在这段代码中，我们看到了foo绑定了obj，让this指向了obj。在调用foo的函数中bar也改变了this的指向。但对于运行的预期结果没有影响。

2.2.3.2 API调用的"上下文"

在第三方库中的许多函数，以及JavaScript和宿主环境中的许多新的内置函数，都提供了一个可选的参数，来指定this。上代码

function foo(el) {
    console.log(el,this.id);
}
var obj = {
    id:"awesome"
};
//调用foo(...)时把this绑定到obj
[1,2,3].forEach(foo,obj);//1 "awesome"  2 "awesome" 3 "awesome"

类似的forEach内置的函数实际上是通过call和apply来实现绑定的。

2.2.4 new 绑定

在JavaScript中new操作符合其他语言的new有很大的区别。一个函数通过new 调用的时候，其实并不是真正的类的调用，这里模仿了java中类的调用，可以称之为虚拟类吧。JavaScript的new一次其实进行了很多操作这里就不赘述了。下面直接上代码，看看new是怎么绑定this的

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

一句话，就是这么简单。bar引用了new调用的foo;那么this就绑定到了bar上。

总结

关于this部分，暂时讲解到这里，这里面可能或多或少讲解的也并不是那么透彻，但算是给自己做个小笔记以后方便自己查阅，哪里有不正确的地方还希望朋友们帮忙指正。