箭头函数Arrow Function

结构

const/let 函数名=（参数）=>函数体
注：
1)单个参数可省略圆括号;无参数或多个参数不可省略圆括号
2）单行函数体可同时省略{}、return;多行不可
3）返回单行对象，{}外加()避免与函数体的花括号混淆

无this

题目1：

const calc = {
    add: () => {
        console.log(this);
    };
};
calc.add();//window

解析：无this，故在add箭头函数作用域找不到；
对象无作用域； 往外就到了全局作用域
题目2：函数嵌套

const calc = {
    add: function () {
        const adder = () => {
            console.log(this);
        };
        adder();
    }
};
//隐式绑定
calc.add();//calc
//函数别名
const addFn = calc.add;
//隐式丢失
addFn(); 
//undefined（严格模式）-> window（非严格模式）

不能作为构造函数

常见于绑定事件
1）一般函数

document.onclick = function () {
    console.log(this);//document
}
document.addEventListener('click', function () {
    console.log(this);//document
}, true);

2）箭头函数

document.onclick = () => {
    console.log(this);
    //undefined（严格模式）-> window（非严格模式）
}
document.addEventListener('click', () => {
    console.log(this);
    //undefined（严格模式）-> window（非严格模式）
}, true);

无arguments

<button id=btn>开始</button>
<p id=result>0</p>
<script>
    const btn = document.getElementById('btn');
    const result = document.getElementById('result');
    // const timer = {
    //     time: 0,
    //     start: function () {
    //         // this指向timer
    //         var self = this;
    //         btn.addEventListener('click', function () {
    //             // this指向btn
                   //DOM绑定事件-绑定事件的DOM元素
    //             setInterval(function () {
    //                 // this无指向
    //                 self.time++;
    //                 result.innerHTML = self.time;
    //             }, 1000);
    //         }, false);
    //     }
    // };
    // timer.start();
	//利用箭头函数无this，向上一层寻找的特点
	//改写最里层的两个一般函数为箭头函数
    const timer = {
        time: 0,
        start: function () {
            // this指向timer
            btn.addEventListener('click', () => {
                // this指向btn
                setInterval(() => {
                    // 默认绑定：undefined（严格模式）
                    //window（非严格模式下）
                    this.time++;
                    result.innerHTML = this.time;
                }, 1000);
            }, false);
        }
    };
    timer.start();
</script>