这两个JavaScript函数定义语句是否完全等价?
JavaScript箭头函数赋值与普通函数声明的差异
二者并不完全等同,除了语法写法区别外,在运行时的行为存在多个核心差异,具体如下:
你提到的两段代码分别是:
第一种(箭头函数赋值给const变量):
const handleClick = () => alert('foo');
第二种(普通函数声明):
function handleClick() { alert('foo'); }
二者的核心差异有以下几点:
- this绑定规则不同
箭头函数没有独立的this上下文,它的this继承自定义时所在的外层作用域的this,且绑定后不会被call、apply、bind等方法修改。普通函数的this由调用时的场景决定:作为对象方法调用时this指向对象,作为DOM事件回调时this指向触发事件的元素,直接调用时非严格模式指向window、严格模式指向undefined,还可以通过call等方法手动修改this指向。 - 构造函数能力不同
普通函数声明可以通过new关键字作为构造函数创建实例对象,本身也持有prototype原型属性。箭头函数无法被new调用,执行new handleClick()会直接抛出错误,也不存在prototype属性。 - arguments对象差异
普通函数内部可以直接访问arguments类数组对象,获取所有传入的实参。箭头函数没有自身的arguments对象,如果在箭头函数内访问arguments,实际获取的是外层作用域的arguments,如果要获取自身的入参需要使用剩余参数语法(...args) => { /* 操作args */ }。 - 提升规则不同
普通函数声明存在函数提升特性,在同作用域下,即使调用语句写在函数声明语句之前,也可以正常执行。而第一种写法是将箭头函数赋值给const变量,仅存在变量提升但会进入暂时性死区,在变量赋值语句之前调用handleClick会抛出ReferenceError错误。 - 生成器语法支持不同
普通函数可以添加*标记为生成器函数,内部使用yield关键字暂停执行。箭头函数无法作为生成器函数使用,内部不允许使用yield关键字。
如果仅在全局作用域定义、不涉及上述特性相关的使用场景,二者直接调用的执行结果是一致的,但本质上并非只有语法层面的差异。
内容的提问来源于stack exchange,提问作者JSNinja
相关产品推荐
相关产品推荐

