ES6中箭头函数的注意点和基本用法

博客介绍了箭头函数的应用场景是替换匿名函数,阐述了有一个参数名和两个及以上参数的匿名函数的基本用法,还提到箭头函数中this的指向。同时列举了箭头函数的使用注意点,如this指向、不能作构造函数等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

箭头函数

应用场景:用于替换匿名函数

基本用法

有一个参数名的匿名函数

var fn = function(name) {
console.log(name)
}
// 等价于
var fn = name => {
console.log(name)
}
// 也等价于
var fn = (name) => {
console.log(name)
}

有两个或以上的参数的匿名函数

var q = function(naem, age) {}
// 等价于
var q = (naem, age) => { //切记:()不能省略
}

箭头函数中关于this的指向

var p = {
age: 18,
// es6中对象方法的箭头函数表达形式
run: () => {
setTimeout(() => {
console.log(this); //window
}, 100)
},
travel: function() {
// this=>p
setTimeout(() => {
console.log(this); //p
}, 100)
},
// 
es6中对象方法的箭头函数表达形式的简写形式
say() {
console.log(' ssst', this) //p
setTimeout(() => {
console.log(this); //window
}, 100)
},
}
p.run();
p.travel();
p.say();
箭头函数有几个使用注意点。

1. 函数体内的this对象, 就是定义时所在的对象, 而不是使用时所在的对象。
2. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3. 不可以使用arguments对象, 该对象在函数体内不存在。 如果要用, 可以用 rest 参数代替。
4. 普通的匿名函数,或者说具名函数都可以决定this的值,而箭头函数不可以
5. 淘汰:不可以使用yield命令, 因此箭头函数不能用作 Generator 函数。Generator 函数x现在经常用async替代

ES6中引入的箭头函数(arrow function)与传统的普通函数(regular function)之间存在多个关键区别,这些差异不仅影响代码的可读性,还对功能行为产生重要影响。 1. **语法** 箭头函数使用一种更为简洁的语法形式。例如,一个简单的函数可以写成 `(x) => x * 2`,而等效的普通函数则为 `function(x) { return x * 2; }`。这种简化的语法使得代码更易于阅读编写[^2]。 2. **this 的绑定** 箭头函数不会创建自己的 `this` 上下文,它继承自外围作用域。这意味着,在箭头函数内部使用的 `this` 实际上引用的是外部作用域中的 `this` 值。相比之下,普通函数会在调用时创建一个新的 `this` 上下文,这通常取决于函数是如何被调用的。这一特性使箭头函数非常适合用于回调函数,尤其是在需要访问外部 `this` 的情况下。 3. **arguments 对象** 箭头函数不拥有自己的 `arguments` 对象,如果需要获取参数列表,可以使用 rest 参数替代。而在普通函数中,可以通过 `arguments` 对象来访问传递给函数的所有参数。 4. **作为构造器的能力** 箭头函数不能用作构造器,即不能通过 `new` 关键字实例化一个对象。尝试这样做会导致运行时错误。相反,普通函数可以通过 `new` 被用来创建新的对象实例。 5. **原型属性** 普通函数自动获得一个 `prototype` 属性,该属性指向函数的原型对象;然而,箭头函数没有自己的 `prototype` 属性,因为它们不可作为构造函数使用。 6. **生成器函数** 只有普通函数能够成为生成器函数,通过在函数定义前加上 `*` 符号,并利用 `yield` 关键字产出值。箭头函数无法以这种方式定义生成器。 7. **方法简写** 在对象字面量中定义方法时,普通函数允许使用简短的形式:`method() {}`。尽管箭头函数也可以分配给对象属性以实现类似效果,但它们并不具备相同的方法简写形式。 了解这些区别有助于开发者根据具体需求选择合适的函数类型,特别是在处理异步操作、事件监听以及React等框架中的组件逻辑时尤为重要。对于不需要自身 `this` 上下文或构造能力的情况,推荐使用箭头函数以获得更加简洁明了的代码结构。 ```javascript // 示例 - 箭头函数 const multiplyByTwo = (x) => x * 2; console.log(multiplyByTwo(5)); // 输出: 10 // 示例 - 普通函数 function multiplyByThree(x) { return x * 3; } console.log(multiplyByThree(5)); // 输出: 15 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值