ES6写法优化 箭头函数

this

const Jelly = {
    name: 'Jelly',
    hobbies: ['Coding', 'Sleeping', 'Reading'],
    printHobbies: function() {
        // a --- this
        // c --- let self = this 
        this.hobbies.map(function(hobby) {
        // b --- this
            console.log(`${this.name} loves ${hobby}`)
        // d --- console.log(`${self.name} loves ${hobby}`)
        })
    }
}

Jelly.printHobbies();

//打印结果 发现我们的 name 属性 Jelly 不见了
VM67:6  loves Coding
VM67:6  loves Sleeping
VM67:6  loves Reading

注：js 中的 this 值是在运行的时候才绑定的。

a 处的 this 指向 Jelly 对象，是因为 printHobbies 函数是 Jelly 对象调用的。

b 处的 this 指向 window。b处的函数是 map 方法的回调函数，是一个独立的函数，而一个函数当它独立运行的时候(不是作为对象的方法调用，也不是通过 call、aplly、bind来改变 this 值)。这时候独立函数的 this 就指向 window/global/undefined(严格模式下)。

我们可以通过 c 处来用 self 来赋值 this 然后调用的时候 d 处使用 self 替代。

箭头函数的写法：

const Jelly = {
    name: 'Jelly',
    hobbies: ['Coding', 'Sleeping', 'Reading'],
    printHobbies: function() {
        this.hobbies.map(hobby => {
            console.log(`${this.name} loves ${hobby}`)
        })
    }
}

Jelly.printHobbies();
// 打印结果 发现我们的 name 属性 Jelly 回来了
VM104:6 Jelly loves Coding
VM104:6 Jelly loves Sleeping
VM104:6 Jelly loves Reading

箭头函数 this 是在函数定义的时候就被指定了的，区别普通函数调用的时候绑定，没有自己的 this 值。所以它里面的 this 就是继承它的父作用域的 this 值。

参数默认值

function multiply(a, b = 5 /*ES6默认值写法*/) {
    a = a || 3 // 原写法
    return a * b;
}