js中箭头函数的一些理想用途是什么?

时间:2017-07-26 16:35:15

标签: javascript

js中箭头函数的一些理想用途是什么?:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我之前在代码中看到过这些,我喜欢它们似乎能够编写更简洁的代码。上面的url似乎表明箭头函数存在一些约束。

那么js中箭头函数的理想用途是什么?我想确定最强的例子,作为在我的js中实现它们的第一步。此外,开发人员是否曾以任何其他名称引用“箭头功能”?

更新

这似乎是一个很好的例子:

//ES5
var multiply = function(x,y)
{
   return x * y;
}

//ES6
var multiply = (x,y) => {return x * y};

然而,看起来你不能通过这种方法重复使用b / c你正在实现内联函数。此外,如果函数更复杂,您可能希望将逻辑放在自己的函数中。

基于上面的例子,我仍然没有看到使用函数指针的情况。好像我在过去看过一些与Jasmine js单元测试一起使用的函数指针,但我不记得上下文。

根据上述评估,您能否提供使用箭头功能的可靠理由?我想知道我是否看到箭头功能主要用于b / c它是一个新功能或语法糖

2 个答案:

答案 0 :(得分:1)

很好的问题,从个人使用来说,我喜欢使用箭头函数来替换经典的回调函数,因为它将保留父作用域的“this”而不是创建新的作用域。

不再

var self = this;
self.boy = "tom";

$get().then(function(){
   console.log(self.boy) //tom
})

代替

$get().then(() => {
   console.log(this.boy) //tom
})

答案 1 :(得分:0)

您可以将箭头功能主要用作回调

var arrayItems=[1,2,3];
arrayItems.map(item=>console.log(item))

从函数中轻松返回内容。

var a=()=>2;
console.log(a())//return 2

最重要的是绑定执行上下文。

  

箭头函数不会创建自己的this,使用封闭执行上下文的this值

没有箭头功能

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
   // The callback refers to the `that` variable of which
   // the value is the expected object.
   that.age++;
  }, 1000);
}

var p = new Person();

使用箭头功能

 function Person(){
   this.age = 0;

   setInterval(() => {
     this.age++; // |this| properly refers to the person object
   }, 1000);
 }

var p = new Person();