箭头函数和普通函数使用上的区别

本文探讨了ECMAScript6中箭头函数的特性,包括this指向的差异、不可构造实例、参数列表获取方式等,对比了ECMAScript5与ECMAScript6在函数定义上的不同。

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

       因为学习箭头函数的时候肯定先行学习过了ECMAScript5.0的语法,所以在本文中会以箭头函数(ECMAScript6.0中函数的新特性)为主来进行说明
1.箭头函数和普通函数this的指向问题:
        使用ECMA5.0语法定义的普通函数里,this的指向取决于使用,谁使用它,this就会指向谁,而在node.js(ECMA6.0的语法环境中)对于函数,this的指向取决于函数的定义,而不是谁使用函数
如果直接调用this,在普通函数中,this会指向Window,而在箭头函数中,它会指向nodejs环境下的所有成员
改变this的指向

function foo(){
    console.log(this);
}
foo.call({num:100});   //{ num: 100 }
foo.bind({num:200})(); // { num: 200 }

2. 箭头函数不可以使用new来构造函数
在ECMA5.0中,可以使用new的方法来将构造函数初始化对象,而在ECMA6.0中,引用了类的概念,特意的增加了一个回调函数------classcallback函数,防止通过构造函数直接调用,也就不能直接new实例,这点特性会在ECMA6.0类和继承中进行详细说明
3. 箭头函数不可以使用arguments获取参数列表,可以使用rest参数来代替arguments
let foo=(...c)=>{console.log(arguments);}; foo(123,456)
返回结果为:是一个空的对象列表 在这里插入图片描述
而在ECMA5中,返回的是一个参数列表
而使用rest参数来代替的话,可以返回一个参数数组
`let foo=(…c)=>{console.log©;};
返回结果为:

[ 123, 456 ]

s

### 箭头函数普通函数区别 #### 语法形式 箭头函数的定义相较于传统函数更加简洁。对于单个表达式的箭头函数,可以省略大括号 `{}` `return` 关键字;如果仅有一个参数,甚至可以省略圆括号 `()`[^1]。例如: ```javascript const add = (a, b) => a + b; // 单表达式箭头函数 const square = x => x * x; // 单参数箭头函数 ``` 而普通函数则需要完整的函数声明或者匿名函数赋值语句[^2]。 #### this 指向 这是两者之间最重要的区别之一。普通函数内部的 `this` 是动态绑定的,取决于函数被调用的方式。相反,箭头函数并不拥有自己的 `this` 绑定,而是捕获其所在上下文环境中的 `this` 值[^1]。这意味着在对象方法或事件处理器等场景下,使用箭头函数通常能避免因意外改变 `this` 导致的问题。 #### 是否具有原型属性 另一个显著差异在于,箭头函数不具备 `prototype` 属性,它的 `prototype` 默认为 `undefined`,因此无法作为构造器通过 `new` 操作符实例化对象[^3]。 ```javascript const normalFunction = function() {}; console.log(normalFunction.prototype); // 输出: { constructor: [Circular] } const arrowFunction = () => {}; console.log(arrowFunction.prototype); // undefined ``` #### 使用 yield 的可能性 箭头函数不允许包含 `yield` 表达式,所以不能充当 Generator 函数的一部分[^3]。比如下面的例子会抛出错误: ```javascript const generatorFunc = () => { yield 'value'; }; // SyntaxError: Unexpected number ``` 综上所述,尽管箭头函数提供了更紧凑的书写风格以及解决了部分关于 `this` 处理上的难题,但它也有一些局限性需要注意,如不适合做为类的构造器或是生成器函数等情况。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值