全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

箭头函数和普通函数有什么区别?

发布时间:2023-10-14 02:29:16
发布人:xqq

一、语法结构的不同

普通函数使用function关键字声明,后跟函数名、参数列表和函数体。而箭头函数使用箭头(=>)来定义函数,箭头函数省略了function关键字以及函数体中的return关键字(在某些情况下)。

普通函数的语法结构示例:

function add(a, b) {  return a + b;}

箭头函数的语法结构示例:

const add = (a, b) => a + b;

二、this的绑定机制不同

在普通函数中,this的值是在运行时动态确定的,它的指向取决于函数被调用的方式。而箭头函数具有词法作用域的特性,它会继承外层作用域的this值,因此箭头函数中的this指向的是定义时的作用域。

普通函数中this的绑定机制示例:

const obj = {  name: 'Alice',  greet: function() {    console.log('Hello, ' + this.name);  }};const greetFunc = obj.greet;greetFunc(); // 输出:Hello, undefined

在上述例子中,当将obj对象中的greet方法赋值给greetFunc后,greetFunc中的this已经不再指向obj对象,而是指向全局作用域(即window对象)。因此在调用greetFunc时,this.name的值为undefined。

箭头函数中this的绑定机制示例:

const obj = {  name: 'Alice',  greet: function() {    const greetArrow = () => {      console.log('Hello, ' + this.name);    };    greetArrow();  }};obj.greet(); // 输出:Hello, Alice

在上述例子中,箭头函数greetArrow继承了外层作用域(即greet方法)的this值,所以在箭头函数中使用this.name时,它指向的是obj对象中的name属性。

三、arguments对象的不同

在普通函数中,可以使用arguments对象访问传递给函数的所有参数。但是在箭头函数中,arguments对象不可用,取而代之的是使用剩余参数(rest parameters)来获取所有参数的值。

普通函数使用arguments对象示例:

function sum() {  let total = 0;  for (let i = 0; i < arguments.length; i++) {    total += arguments[i];  }  return total;}console.log(sum(1, 2, 3, 4)); // 输出:10

箭头函数使用剩余参数示例:

const sum = (...args) => {  let total = 0;  for (let i = 0; i < args.length; i++) {    total += args[i];  }  return total;};console.log(sum(1, 2, 3, 4)); // 输出:10

在上述例子中,普通函数sum使用arguments对象遍历了传递给函数的所有参数并计算它们的总和。而箭头函数sum使用了剩余参数语法(…args),将所有参数打包成一个数组args,然后可以直接对args进行遍历和计算。

四、适用场景的不同

由于箭头函数和普通函数具有不同的特性和行为,它们在不同的场景中有着不同的适用性。

箭头函数适用的场景:

简短的函数表达式,例如回调函数、数组方法的参数函数等。保留外层作用域的this值,避免this指向发生变化的问题。函数体只有一条返回语句时,可以省略花括号和return关键字。

普通函数适用的场景:

需要动态确定this的值,或者需要使用call()、apply()和bind()等方法来更改this的值。需要使用arguments对象来访问传递给函数的参数。作为构造函数创建对象实例。

本文逐条介绍了箭头函数与普通函数之间的不同点,以便更好地理解它们的特性和适用场景。箭头函数更加简洁,省略了function关键字和部分语法元素,并且继承外层作用域的this值,方便在回调函数等场景中使用。普通函数拥有更大的灵活性,可以根据运行时的情况动态确定this的值,并且可以使用arguments对象访问所有传递给函数的参数。根据具体的使用场景和需求,我们可以选择合适的函数类型来编写代码。

延伸阅读1:使用箭头函数应该注意什么

箭头函数是JavaScript中的一种特殊函数语法,它具有简洁的语法和特定的行为。虽然箭头函数在许多场景下非常有用,但在使用它们时需要注意以下几点:

一、缺乏自己的this绑定

箭头函数没有自己的this绑定,它会继承外层作用域的this值。因此,在使用箭头函数之前,确保了解当前代码块中的this是什么,并且这个继承的行为是否符合预期。

二、不能作为构造函数

箭头函数不能用作构造函数来创建新的对象实例。如果尝试使用new关键字调用箭头函数,会抛出一个TypeError错误。因此,在需要使用构造函数的情况下,请使用普通函数来确保功能的正确性。

三、不能使用arguments对象

箭头函数没有自己的arguments对象。它使用剩余参数语法(…args)来获取函数的参数。如果需要在函数体内访问所有传递给函数的参数,请使用剩余参数语法来替代arguments对象。

四、适用于简短的函数体

箭头函数适用于函数体比较简短的情况。如果函数体较长或复杂,较好使用普通函数,以提高代码的可读性和可维护性。

五、无法更改this的值

由于箭头函数没有自己的this绑定,因此无法使用call()、apply()和bind()等方法来显式地更改this的值。如果需要动态确定this的值,或者需要更改this,则应使用普通函数。

六、注意循环中的使用

在循环中使用箭头函数时要格外小心。由于箭头函数继承外层作用域的this,在循环中可能会导致this值的意外共享。为了避免这种情况,可以使用普通函数或函数绑定来确保每个循环迭代都有独立的this值。

七、对于对象方法的注意事项

在对象方法中使用箭头函数时要注意,因为箭头函数不具有自己的this绑定。如果需要在方法内部使用this来引用对象本身,请使用普通函数来确保this绑定正确。

虽然,箭头函数具有简洁和方便的语法,但在使用时需要注意其特定的行为和限制。了解这些注意事项可以帮助我们更好地应用箭头函数,避免潜在的问题并确保代码的正确性和可维护性。

#it技术干货

相关文章

国产编程语言木兰(ulang)是什么?

国产编程语言木兰(ulang)是什么?

2023-10-14
ARM64指的是什,与x86什么区别?

ARM64指的是什,与x86什么区别?

2023-10-14
服务器、IP地址和域名之间有什么关系?

服务器、IP地址和域名之间有什么关系?

2023-10-14
IT运维岗位可以细分哪几种,职责是什么?

IT运维岗位可以细分哪几种,职责是什么?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取