箭头函数的基本概念
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