关于this的全面解析（call,apply,new）

我们在写代码的时候，时常会被this弄的傻傻分不清楚，看源码的时候也经常被call啊apply啊弄的头皮发麻。this到底是什么？本文主要根据书上和实际应用做了一些归纳。一般情况下this有4种绑定规则：

1、默认绑定 - this指向全局变量

举例：

       function baz(){
           console.log('a',this.a);
       };
       var a = 2;
       baz();

      // a 2

在非严格模式下，我们调用了baz，它没有被任何对象包裹，而是暴露在全局环境中，因此此时它被调用的上下文就是全局环境，所以获取到this.a是2；

2、隐式绑定

这种情况应该是最常见的，我们调用的方法被包含在某个对象中，此时应该找到调用这个方法的对象所处的上下文。

举例：

       function baz(){
         console.log('a',this.a);
       };
       var a = 2;
       var obj = {
           a: 3,
           baz: baz
       }
       obj.baz();

       // a, 3

这个时候，this指向调用baz这个方法的对象obj；所以获取的this.a就是obj.a是3；

思考一下下面的this.a的值又是什么：

      function baz(){
         console.log('a',this.a);
       };
       var a = 2;
       var obj = {
           a: 3,
           baz: baz
       };

       var obj2 = {
           a: 4,
           baz: obj.baz
       }
       obj2.baz();

tips: 对象属性的引用链只有最后一层在调用位置中起作用。

3、显式绑定

这里就是函数可以使用的方法call(obj,param1,param2,...)和apply(obj,[param1,param2,...]),它们的作用是我们可以显式的改变函数的上下文(this)，参数说明：

• obj：一个对象，将方法的this指向该对象的this；
• paramX：参数，两者的表现形式不同

       var a = 2;
       function baz(){
         console.log('a',this.a);
       };

       var obj = {
           a: 3
       };

       baz.call(obj); // 改变了this，并执行了函数
       // a 3

如果直接baz()，则采用的是第一种规则，这里使用baz.call强行将baz的this指向了obj，所以此时baz中的this是obj；

应用场景：带参数的

        var a = 2;

        function baz(p1, p2) {
            console.log(this.a, p1, p2);
        };

        var obj = {
            a: 3
        };

        var foo = function () {
            return baz.apply(obj, arguments)
        };

        foo("hi,", "heimayu");

        // 3 hi, heimayu

4、new绑定

在js中，我们经常使用new来对函数进行构造调用，如下：

       function Foo(a) {
            this.a = a;
        };

        var foo = new Foo(3);
        console.log("a", foo.a)

这里，使用new Foo()的时候构造出一个新的对象foo并把它绑定到Foo调用中的this上。

5、优先级

在大多数情况下我们找到函数的调用位置，并判断应用哪种规则，就可以快速找到this；结论：

new绑定 > 显式绑定(call,apply) > 隐式绑定 > 全局默认绑定

6、一些例外

规则是死的，程序是活的，总有例外出现。比如啊：

我不关心this是什么

        function foo(a, b) {
            console.log("a:" + a, "b:" + b);
        };

        foo.apply(null, [1, 2]);
        // a:1 b:2

ES6箭头函数

箭头函数不使用上面的规则，而是根据 由外层的作用域来决定它的this

       function foo() {
            // return function () {
            //     console.log('第一种情况', this.a)
            // }
            return (a)=>{
                console.log('第二种情况',this.a)
            }
        };

        var obj1 = {
            a: 2
        };

        var obj2 = {
            a: 3
        };

        var bar = foo.call(obj1);
        bar.call(obj2);
        // 第一种情况：3
        // 第二种情况：2

记住箭头函数的绑定无法被修改！！！因此在执行bar的时调用了foo,而foo中的this是指向到obj1的。

最常见的场景：

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

        obj.foo();
        // 1

在ES5中，我们想打出的值是2，会这样做：

        var a = 1;
        var obj = {
            a:2,
            foo: function(){
                let self = this;
                setTimeout(function(){
                    console.log(self.a)
                },100)
            }
        };

        obj.foo();

在ES6中，则可以直接这样：

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

        obj.foo();

理解一下：因为箭头函数中的this，指向了foo，foo的上下文是obj。具体的说：箭头函数会继承外层函数调用的this绑定。