ES6 中箭头函数与普通函数的区别解析

箭头函数的基本概念

ES6 中的箭头函数是一种新的函数语法,它可以让我们更加简洁地定义函数。箭头函数使用箭头 (=>) 来定义函数,它的语法如下:

-------- ------- -- ------- -- - ---------- -

其中,param1, param2, …, paramN 是函数的参数,statements 是函数体。箭头函数的特点是它没有自己的 this,它的 this 始终指向它所在的作用域的 this。这就是箭头函数和普通函数的最大区别。

箭头函数和普通函数的区别

1. 箭头函数没有自己的 this

在普通函数中,this 的值取决于函数的调用方式。如果是通过对象调用函数,this 的值就是该对象;如果是通过 apply 或 call 调用函数,this 的值就是传入的第一个参数。而在箭头函数中,this 的值始终指向它所在的作用域的 this。下面是一个示例代码:

----- --- - -
  ----- ------
  -------- ---------- -
    -----------------------
  --
  ------------- -- -- -
    -----------------------
  -
-

-------------- -- -- -----
------------------- -- -- ---------

在上面的代码中,sayName 是一个普通函数,它的 this 值指向 obj 对象。而 sayNameArrow 是一个箭头函数,它的 this 值指向它所在的作用域的 this,也就是全局作用域的 this,因此输出 undefined。

2. 箭头函数不能使用 arguments 对象

在普通函数中,我们可以使用 arguments 对象来访问函数的参数。但是在箭头函数中,arguments 对象是不存在的。下面是一个示例代码:

-------- ----- -
  -----------------------
-

------ -- --- -- -- --- -- --

----- -------- - -- -- -
  -----------------------
-

----------- -- --- -- ------------ -- --- -------

在上面的代码中,sum 是一个普通函数,它可以使用 arguments 对象访问函数的参数。而 sumArrow 是一个箭头函数,它不能使用 arguments 对象,因此会报错。

3. 箭头函数不能作为构造函数使用

在普通函数中,我们可以使用 new 关键字将函数作为构造函数来使用。而在箭头函数中,它没有自己的 this,因此不能作为构造函数使用。下面是一个示例代码:

-------- ------------ -
  --------- - -----
-

----- ------ - --- --------------
------------------------- -- -- -----

----- ----------- - ------ -- -
  --------- - -----
-

----- ----------- - --- ------------------- -- -------------- -- --- - -----------

在上面的代码中,Person 是一个普通函数,它可以作为构造函数使用。而 PersonArrow 是一个箭头函数,它不能作为构造函数使用,因此会报错。

总结

ES6 中的箭头函数是一种新的函数语法,它可以让我们更加简洁地定义函数。箭头函数和普通函数的最大区别是箭头函数没有自己的 this,它的 this 始终指向它所在的作用域的 this。除此之外,箭头函数不能使用 arguments 对象,也不能作为构造函数使用。在实际开发中,我们需要根据实际情况选择使用普通函数还是箭头函数。

参考文献

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65d3421cadd4f0e0ffb8cd19