美文网首页
箭头函数

箭头函数

作者: L楠 | 来源:发表于2017-08-28 11:12 被阅读0次

箭头函数的产生有两个目的:更简洁的语法和父作用域共享关键字this

箭头函数基本用法

ES6中新增的=>来定义简单函数
如:

x=>x+1

相当于

function(x){
   return x+1;
} 

如果没有参数或者多个参数,需要使用()

(a,b)=>a+b
相当于
(a,b)=>{
      return a+b;
}
var log= () =>{
     alert('no param')
}

当需要编写一个简单的参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样省略function和return的输入,还有括号,分号等。

//es6
var total = values.reduce((a,b) => a + b,0);
//es5
var total = value.reduce(function (a,b){
return a+b;
},0;

除了函数样式编写,箭头函数还可以包含区域块语句而不仅仅是单一表达式:

//es5
$("#a-btn").click(function (event){
        playTrumpet();
        fireConfettiCanno();
});
//es6
$("#a-btn").click(event => {
       playTrumpet();
       fireConfettiCanno();
});

箭头函数中的this

箭头函数没有自己的this值,其this值是通过继承其他传入对象而获得的。

JS中处理this:
{
    ···
   addAll: function addAll(pieces){
           var self=this;
            _.ech(pieces,function(piece){
           self.add(piece);
      });
   },
   ···
}
ES6中this

遵循以下原则
1.使用非箭头函数处理object.methos()语法调用的方法。因为他们会接受到来自调用者的有意义的this值
2.在其他场合都使用箭头函数

{  
  ...  
  addAll: function addAll(pieces) {  
    _.each(pieces, piece => this.add(piece));  
  },  
  ...  
}  

相关文章

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

  • TS  笔记this

    this 箭头函数在箭头函数创建的地方获得this;非箭头函数,在调用函数的地方获得this如图

  • 箭头函数和数组

    箭头函数&数组 箭头函数 特点: 没有 this 没有 arguments 没有prototype在箭头函数中使用...

  • 箭头函数

    箭头函数 为什么使用箭头函数

  • 箭头函数中this的指向

    箭头函数在平时开发中用着非常爽,箭头函数有什么特点呢 箭头函数不能够当做构造函数使用 箭头函数没有argument...

  • js学习笔记4(函数)

    1.箭头函数 ES6新增属性。箭头函数特别适合嵌入函数的场景。 箭头函数虽然语法简介,但是很多场合不适用。箭头函数...

  • js理解普通函数和箭头函数

    普通函数: 箭头函数: 区别: 构造函数和原型 箭头函数不能作为构造函数 不能new。会报错 箭头函数没有原型属性...

网友评论

      本文标题:箭头函数

      本文链接:https://www.haomeiwen.com/subject/vvmwdxtx.html