ES6箭头函数Arrow Function

　　果然，隔了很长时间都没有来博客园上逛了......

　　前一段时间一直在忙我们参加的一个比赛，转眼已经好久没有来逛过博客园了，果然还是很难坚持的......

　　今天总算还是想起来要过来冒个泡，强行刷一波存在感......

------------------------------------以上全是废话----------------------------------------------------

　　箭头函数时es6中的语法，总体来说，语法相较于es5中函数的写法要简明很多，使用起来也很方便，那么，就简单来说说，箭头函数的用法和好处吧。

　　1. 箭头函数拥有简明的语法，写起来更加简单

　

const numbers = [1, 2, 3, 4, 5, 6];
numbers.forEach(function(number) {
    console.log(number);
})

// 箭头函数简写形式
// 1.去掉function关键字，使用 => 替代
numbers.forEach((number) => {
    console.log(number);
})

// 当匿名函数有且仅有一个参数的时候，参数的括号可以进一步省略，当参数列表有多个参数是，括号不能省略
numbers.forEach(number => {
    console.log(number);
})

　　2. 箭头函数隐式返回

　　当函数体有且仅有一个return 语句时，箭头函数可以进一步简化

　　

numbers.forEach(number => console.log(number));
// 箭头函数语法很简洁有木有
// 上面的代码与下面是等价的
numbers.forEach(number => {
    return console.log(number);
})
// 虽说返回console.log()的值不太好，但写起来更加简便，
// console.log()是没有返回值的，而且forEach()方法进行迭代也是没有返回值的
// 需要注意的是，当return值返回的是一个对象时，不能够直接使用箭头返回
// getObject = () => {name: 'zhang', age: 18}; ###错误示例，外层的大括号将被解析为代码块，因此报错
let getObject = () => ({name: 'zhang', age: 18}); // 正确示例

　　3. 绑定this

　　　首先来看看js里面的this的指向问题

　　　假定我有一个json对象如下：我需要将header与bodyList数组里的每一项拼接起来，然后在对象中定义一个concat方法

　　

const json = {
    header: 'header',
    bodyList: ['body1', 'body2', 'body3'],
    concat: function () {
        this.bodyList.forEach(function(item){
            console.log(this.header + item);
        })
    }
}
json.concat();

　　上面的代码看起来没有毛病，但执行起来结果却是出乎意料的

　　　　

　　我们可以发现在forEach()方法中this.header的值是一个undefined

　　那是因为javascript的this值是在运行的时候绑定的，当函数不是作为对象的方法被调用时，函数中的this是指向window。forEach()函数时是被独立执行的，而不是由json调用的，因此forEach()中的this指向window对象，而不是json对象

　　针对这种情况，有以下解决方法：

　　

// es5中的解决方法
const json = {
    header: 'header',
    bodiList: ['body1', 'body2', 'body3'],
    conacat: function() {
        // 由于concat函数是由json直接调用的，因此在此处this指向json，使用self保存当前的上下文
        var self = this;
        this.bodyList.forEach(function(item) {
            console.log(self.header + item);
        })
    }
}

// es6中更简单的做法是使用箭头函数绑定this
let json ={
    ...
    concat: function() {
        this.bodyList.forEach(item => {
            console.log(this.header + item);
        })
    }
}
json.concat()

　　箭头函数的作用域是此法作用域，this的指向在定义的时候就已经确定，也不会随着函数的调用而改变。

2019-03-14   20:30:29