ES5中的this指针 VS ES6中的this指针

在Javascript的面向对象编程中，无论是ES5还是ES6， this指针都是绕不开的话题，那么this指针到底指向谁？可以这么说，面向对象编程中的this指针归根结底都是指向被实例化得对象（听起来有点拗口~）

1.ES5中的this

先看下面一段代码：

<script>
        var a=100;
        function foo(){
            this.a=200;
            setInterval(function(){
                alert(this.a);
            },1000);
        }
        
        new foo();
    </script>

浏览器每隔一秒会弹出100还是200？答案是100！

记住一点：ES5的函数会绑定this指针到函数所属的对象！上例中的this指针最近的一层函数是setInterval()，而setInterval()属于全局对象window，所以this.a等于window.a也就等于100~

那么这么样才能让setInterval函数里面的this指针指向foo对象呢？

方法一，采用bind（this）：

<script>
        var a=100;
        function foo(){
            this.a=200;
            setInterval(function(){
                alert(this.a);
            }.bind(this),1000);
        }
        
        new foo();
    </script>

方法二，在setInterval函数外部保存this指针为一个局部上下文变量，然后再setInterval里面使用这个上下文对象：

    <script>
        var a=100;
        function foo(){
            this.a=200;
            var that = this;
            setInterval(function(){
                alert(that.a);
            },1000);
        }
        
        new foo();
    </script>

好了，下面让我们再来看看ES6中的箭头函数

2.ES6中箭头函数中的this

还是先来看一段代码吧：

<script>
        var a=100;
        function foo(){
            this.a=200;
            setInterval(()=>{alert(this.a)},1000);
        }
        new foo();
    </script>

浏览器每隔一秒会弹出100还是200？答案是200！

记住一点：ES6箭头函数不会绑定this指针到箭头函数本身, 此时的this指针仍然是一个局部变量，那么this到底指向谁呢？答案就是：往上找！

看下面这断代码：

<script>
        var a=100;
        function foo(){
            //this.a=200;
            setInterval(()=>{alert(this.a)},1000);
        }
        new foo();
    </script>

浏览器会弹出什么？undefined！ this指针往上找，找到了foo对象，但foo对象里面并没有定义a变量! 所以输出undefined！

 

再看下面这代码：

<script>
        var a=100;
        function foo(){
            //this.a=200;
            setInterval(()=>{alert(this.a)},1000);
        }
        foo();
    </script>

注意这时调用的是foo(); 就是纯粹的调用函数，并没有new 一个foo对象，此时浏览器输出什么呢？ 100！！！！this指针往上找，找到了谁？window对象，window对象里面的a是多少？100！

 

3.ES6箭头函数并不仅仅不绑定this！！！！事实上 =>箭头函数并不绑定 this，arguments，super(ES6)，抑或 new.target(ES6)。

看下面这段代码：

function foo() {
   setTimeout( () => {
      console.log("args:", arguments);
   },100);
}

foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

这段代码中，=>箭头函数并没有绑定 arguments，所以它会以 foo() 的 arguments 来取而代之，而 super 和 new.target 也是一样的情况。