ES6：箭头函数

了解

1. 箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。
2. 我们常见的window属性和方法有alter，document，parseInt，setTimeout，setInterval，localtion等等，这些在默认的情况下是省略了window前缀的。（window.alter = alter）。
3. 在“use strict”严格模式下，没有直接的挂载者（或称调用者）的函数中this是指向window，这是约定俗成的。在“use strict”严格模式下，没有直接的挂载者的话，this默认为undefined。以下都是在非严格模式下讨论。

普通函数中的this（调用时绑定）

在这之前我们必须得了解普通函数中的this。普通函数，this的概念是：this是JavaScript的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就等于那个对象）。

举个例子：

var name = "the window";
    var object ={
      name:'my object',
      getnameFn:function(){
          return function(){
             return this.name;
        }
      }
    }
console.log(object.getnameFn()()); 

打印是结果是the window。原因是，匿名函数的执行环境是全局的，而且this只在函数内部起作用。此时的this.name在匿名函数中找不到，所以就从全局中找，找到后打印出来。

当时ES5的解决方法是

var name = "the window";
    var object ={
      name:'my object',
      getnameFn:function(){
          var that = this
          return function(){
             return that.name;
        }
      }
    }
console.log(object.getnameFn()()); 

我们在getNameFun内将this赋给that，此时的that指向的是挂载（调用）的对象，即为object，此时在匿名函数中调用that.name会在object上查找相应的数据，而不是在全局上查找，最终打印出myobject。

或者是

var name = "the window";
    var object ={
      name:'my object',
      getnameFn:function(){
          return function(){
             return that.name;
        }.bind(this)
      }
    }
console.log(object.getnameFn()()); 

箭头函数中的this（创建时绑定）

箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

所以，这会很好的解决匿名函数和setTimeout和setInterval的this指向问题。我们不用再去给其用that变量存储this。

接下来我们来看个有趣的例子

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
const obj = {
    str:'obj',
    fn: ()=>{
	console.log(this.str);	
    }
}
obj.fn();  //运行结果为  window

这时候this竟然指向了window对象，这也是使很多刚接触箭头函数的朋友容易困惑的一个点。在来看看下面的例子就能明白其中的原由了。

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
const obj = {
    str:'obj',
    fn: ()=>{
	console.log(this.str);	
    },
    fn2: function(){
	console.log(this.str, '当前词法作用域中的this')
	return {
	    str: 'newObj',
	    fn: ()=>{
		console.log(this.str);	
	    }	
	}
    }
} 
obj.newFn = ()=>{
    console.log(this.str);	
} 
obj.fn();
obj.newFn();
 
var newObj = obj.fn2();
newObj.fn();

运行结果：
window
window
obj 当前词法作用域中的this
obj

---

当我们创建对象的时候，是在全局作用域下创建的，而对象中的方法也是这时候创建的(参考obj.newFn() )；所以这时候的this是指向全局的，而我们在fn2里面创建的对象，这个对象的方法的this就指向他被创建时的词法作用域obj了。