箭头函数与传统JavaScript的不同

先来谈谈ES5中的this

在ES5中，每个函数在被调用时都会自动取得this这个特殊的对象。因此，每个内部函数不能访问到外部函数的this对象。（跟变量访问一样，如果局部环境存在某个变量，就不会去搜索全局环境的同名变量）。

** this对象是在运行时基于函数的执行环境决定的。**

执行环境：

a.全局环境

运行在全局上下文(在任何函数体外部)，this指向全局对象，并且，无论是否是在严格模式下，this都指代全局对象。在浏览器中，this指向window对象。

console.log(this === window);  // true;

b.函数环境

在函数内部，this的值取决于函数是如何调用的。

• 直接调用，非严格模式下，this默认指向全局对象。不管调用的函数是在全局函数还是局部环境。

  function app() {
    console.log(this === window); // true
  }
  app(); // 全局调用
  function foo() {
      function bar() {
          console.log(this === window); // true
      }
      bar(); // 局部调用
  }
  foo();
  

• 直接调用，严格模式下，this默认指向undefined。不管调用的函数是在全局函数还是局部环境。

    'use strict'
  function app() {
    console.log(this === undefined); // true
  }
  app();
  function foo() {
      function bar() {
        console.log(this === undefined); // true
    }
    bar();
  }    
  foo();
  

• 作为对象调用
  当函数以对象的方法被调用时，它的this是调用该函数的对象，并且是距离最近的对象。

  var o = {
    sayName: function() {
    console.log(this === o); // true
    }
  }
  o.sayName();
  

• 作为构造函数调用

  当函数被当做构造函数调用时，this指向刚要被创建的新对象。

  function Person() {
    this.name = 'noshower'; 
  }
  var person = new Person();
  console.log(person.name); //'noshower'
  

• 使用call和apply调用，改变函数内部this的绑定值。

   function foo() {
      console.log(this.name); //'noshower'
  }
  var obj = {
    name: 'noshower'
  }
  foo.call(obj); 
  

  // 函数foo内部的this对象被绑定到了obj对象上。

• 使用bind方法，会永久把this与一个对象绑定。无论这个函数如何被调用，都改变不了this。

  function foo() {
    console.log(this.name); // 'noshower'
  }
  var obj1 = {
      name: 'noshower'
  }
  var obj2 = {
      name: 'DaLin'
  }
  var a = foo.bind(obj1); //用bind方法，将this进行永久绑定。
  a.call(obj2); // 此时使用call方法将改变不了this的指向。
  

下面我们开始讲ES6箭头函数中的this对象

箭头函数被调用的时候，不会自动绑定一个this对象。换句话说，箭头函数根本就没有自己的this。它的this都是捕获自其所在上下文的this值。

• 作为匿名函数被调用。

  function foo() {
    console.log(this);  //{name:'noshower'}
    setTimeout(() => {
        console.log('name:', this.name); //noshower
      }, 100);
  }
  var name = 'DaLin';
  foo.call({ name: 'noshower' });
  

上面代码中，我们用call()方法，将函数foo的this对象绑定到了对象{name:'noshower'}上。由于，箭头函数没有this变量，所以，箭头函数能够访问到外部环境的this变量。此时，箭头函数内部，访问到的是foo函数的this对象。因此，this.name的值是'noshower'。

• 作为方法被调用

    var obj = {
      name: 'noshower',
      sayName: () => this.name
  }
  var name = 'bar';
  console.log(obj.sayName());
  

上面代码中，箭头函数是作为对象的方法。因为，箭头函数本身是不绑定this对象的。因此，它只能从外部搬运this对象。上面代码中，只有全局环境存在this对象，因此返回的是window.name，即'bar'。

• 在方法内部被调用

  var obj = {
    name: 'noshower',
    sayName: function() {
        var a = () => this.name;
        console.log(a()); // noshower
    }
  }
  var name = 'bar';
  obj.sayName();
  

上面代码中，箭头函数是在sayName方法中运行的。此时，箭头函数的this对象，搬运的是sayName方法的this对象。当sayName函数作为方法调用时，它的this对象指向obj对象。因此，箭头函数的this.name就是obj.name,即'noshower';

• 使用new 操作符调用，会抛出错误

  var Obj = (name) => {
      this.name = name;
  }
  new Obj('noshower');
  

上面的代码，箭头函数作为构造函数被调用，会报错。原因是，箭头函数没有自己的this对象，就没法给this添加属性。

• 使用call和apply，bind()调用

   var o = (val) => {
     console.log(this.name, val)； // bar,bar
   };
    var obj = {
       name: 'foo'
   }
   var name = 'bar';
   o.call(obj, name);
  

上面代码中，箭头函数使用了call方法来调用。原本想将函数的this绑定在obj对象上面。结果显示，this被绑定在了全局对象上了。这是因为，箭头函数没有自己的this对象，此时使用call方法仅仅起到了传递参数的作用，没有改变它的this对象。它的this对象依旧来自外部执行环境。

总结一下

箭头函数没有自己的this对象，它总是搬运外部环境的this对象。因此，只要离它最近的外部环境中的this改变，箭头函数中的this就改变。如果离它最近的环境中的this，没有改变。那么箭头函数中的this就不会改变。

我不生产this,我只是this的搬运工。