ES6 箭头函数

首先，我们先来初步了解箭头函数的使用，请看以下代码：

function foo(x,y) {
  return x+y;
}

//对比
var foo = (x,y）=> x+y； //如果只有一个表达式，并且沈略掉{ ...} 的话，则意味着表达式前面有一个隐含的 return

在前面的代码中箭头函数就是（x，y） => x+y; 直观上给人的感觉就是更短的语法表达相同的意思。那 es6 的箭头函数只是为了节省输入的字符数吗？答案当然是否定的。

箭头函数的主要设计目的就是以特定的方式改变 this 的行为特征。

接下来我们来观察它是如何实现的，请看以下代码：

var controller = {
      make:function(...) {
          btn.addEventListener ("click",function(){
                this.make();
        }，false)
      }
}

以上代码运行时是会报语法错误的。错误的原因即是：this 绑定是动态性的，代码中的 this 和make（）本身的this绑定是不同的，所以会造成错误。

以下是上面代码的正确写法，使用 var self = this 这一hack（变量 self 依赖于词法作用域的可预测性）

var controller = {
      make:function(...) {
          var self = this;
          btn.addEventListener ("click",function(){
                self.make();
        }，false)
      }
}

在前面的代码中，如果使用箭头函数作为回调， this 则如我们所愿是可预测的。
考虑：

var controller = {
      make:function(...) {
          btn.addEventListener ("click",（）=>{
                this.make();
        }，false)
      }
}

前面代码的箭头函数回调中的词法 this 现在与封装函数 make（）指向同样的值，也就是说，=> 是 var self = this 的词法替代形式。

假使用 => 替代 var self=this 或者 .bind(this) 的情况有所帮助，那么猜测一下一个支持 this 的函数中使用 => ，而这个函数不需要 var self=this会怎么样呢？答案是：会把事情搞乱。
考虑：

var  controller = {
        make:(...) => {
                 this.help()
        },
        help:(...) {
              //dosomething
        }
}
controller.make(...);

虽然我们以 controller.make()的形式调用，但是 this.help（）调用还是会失败。因为这里的 this 并不像平常一样指向 controller 。那么他指向哪里呢？它指向全局作用域，因为他是从包围的作用域中词法继承而来的 this。

除了词法 this，箭头函数还有词法 arguments--它们没有自己的 arguments 数组，而是继承自父层。

现在给出一组详细的 => 适用时机的规则

1.如果你有一个简短单据在线函数表达式，其中唯一的语句是 return 某个计算出的值，且这个函数内部没有 this 的引用，且没有自身引用（递归，事件绑定，解绑定），且不会要求函数执行这些，那么就可以安全的把它重构为 => 箭头函数
2.如果你有一个内层函数表达式，依赖于包含它的函数中调用 var self = this或者 .bind(this) 来确保适当的 this 的绑定，那么这个内层函数表达式应该可以安全的转换为 => 箭头函数
3.如果内层函数表达式依赖于封装函数中某种像 var args = Array.prototype.slice.call(arguments) 来保证 argumengts 的词法复制，那么这个内层函数应该可以安全的转换为 => 箭头函数
4.所有其他情况--函数声明，较长的多语句的函数表达式，需要词法名称标识符的函数，以及人物不符合以上几个特征的函数--一般都应该避免 => 函数语法

以上，如果发现有错误的地方，麻烦在评论区指出，谢谢~
喜欢的点个赞呗~

最后编辑于：2019.02.14 19:35:42