结构
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>