ES6 => 箭头函数

萝らか妹 提交于 2020-03-14 10:08:32

箭头函数ES6一个非常有用的新特性,我这里小小的总结一下用法:

箭头函数相当于直接return一个值,当没有参数时,可以这么写:

var f = () => 0;
// 上面这句话相当于
var f = function(){ return 0;}

当有一个参数时:

var f = num => return num;
// 上面这一句相当于
var f  = function(num) { return num;}

当有两个或以上的参数时,要用括号并用逗号分隔开:

var f = (a,b) => a+b;
// 相当于
var f = function(a,b) { return a+b;}

上面这些就是箭头函数最基本的一些情况。

当箭头函数的代码块部分多于一条语句,需要用{}括起来,使用return返回

var add = (a,b) => {
                     let sum = a+b;
                     return sum;
                   }

当需要返回一个对象时,需要在对象外面再加():

var member = id => ({id: id})

与变量解构结合使用:

    var person = {
        first: '小明',
        last: '小红'
    }
    const friend = ({ first, last }) => first + ' ' + last;
    console.log(friend(person))

使用注意点:
( 1 )函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
( 2 )不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。

 对于第一点,有一个例子让大家加深理解:

    window.s2 = 10;
    function Timer() {
        this.s1 = 0;
        this.s2 = 0;
//  箭头函数
setInterval(() => this.s1++, 100);
//  普通函数
setInterval(function () {
    this.s2++;
}, 100);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 310);// 3
setTimeout(() => console.log('s2: ', timer.s2),310);// 0
setTimeout(() => console.log('s2: ', window.s2), 310);// 13

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!