1 箭头函数的基本用法[JavaScript] 纯文本查看 复制代码 const func = value => value
相当于
[JavaScript] 纯文本查看 复制代码 const func = function(value) {
return value
}
1.1 基本用法
[JavaScript] 纯文本查看 复制代码 // 不传参数
const func = () => 'result'
// 等同于
const func = function () {
return 'result'
}
[JavaScript] 纯文本查看 复制代码 // 多个参数
const sum = (a, b) => a + b
// 等同于
const func = function (a, b) {
return a + b
}
[JavaScript] 纯文本查看 复制代码 // 函数有多条语句时用{}包裹
const foo = () => {
// do something
return 'result'
}
// 返回一个对象
const info = () => ({name: 'zyk', age: 24})
[JavaScript] 纯文本查看 复制代码 // 与变量结构结合使用
const foo = ({firstName, lastName}) => 'fullName:' + firstName + lastName
foo({firstName: 'z', lastName: 'yk'}) // fullName:zyk
2 箭头函数与普通函数的区别（箭头函数需要注意的地方）2.1 函数内部this指向（本质上箭头函数没有this）普通函数中的this指向是在运行时基于函数的执行环境绑定的，也就是动态的。而箭头函数恰恰相反，箭头函数的this指向定义时所在的环境，它时静态固定的。导致这个区别的原因并不是箭头函数内部有什么特殊的绑定机制，而是因为箭头函数没有自己的this，所以需要通过查找作用域链来确定 this 的值，导致内部的this就是外层代码块的this。
[JavaScript] 纯文本查看 复制代码 // 箭头函数中
function foo() {
setTimeout(() => {
console.log(this)
}, 0)
}
// 等同于普通函数
function foo() {
var that = this
setTimeout(function () {
console.log(that)
}, 0)
}
2.2 箭头函数内部没有arguments对象所以在箭头函数内部使用arguments时会使用函数父级作用域中的arguments对象。如果想访问箭头函数的参数，可以使用rest参数的形式访问 [JavaScript] 纯文本查看 复制代码 const foo = (...num) => console.log(num)
foo(1, 2, 3, 4) // [1, 2, 3, 4]
[JavaScript] 纯文本查看 复制代码 var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
3 不适用箭头函数的场景虽然箭头函数很大程度上解决了this指向的困扰，推荐在编码中尽量的使用箭头函数，但还有两个不适用的场景 3.1 不应被用在定义对象的方法上可以通过这个例子进行解释 [JavaScript] 纯文本查看 复制代码 const obj = {
val: 1,
foo: () => console.log(this.val, this),
bar: function() {
console.log(this.val, this)
}
}
obj.foo() // undefined window
obj.bar() // 1 obj:{}
可以看出对象的方法使用箭头函数时，由于对象不构成作用域，所以箭头函数内部的作用域根据作用域链查找最后绑定到了全局的作用域。因此不会得到预期的结果。 3.2 需要动态this的时候，也不应使用箭头函数
[JavaScript] 纯文本查看 复制代码 var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
this.classList.toggle('on');
});
执行时会报错，因为btn的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象
| 
收藏
淘帖
踩
