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

 2023-08-30  阅读 475  评论 5  点赞 365

摘要:箭头函数是ES6新增的一种函数表达式,相较于传统的函数声明,它有许多不同之处。下面将从几个方面来对比箭头函数和普通函数。 1. 写法 箭头函数的写法更加简洁,没有function关键字,而是用“=>”作为函数的声明符号。以下是两种写法的对比: // 普通函数 function sayHello(

箭头函数是ES6新增的一种函数表达式,相较于传统的函数声明,它有许多不同之处。下面将从几个方面来对比箭头函数和普通函数。

1. 写法

箭头函数的写法更加简洁,没有function关键字,而是用“=>”作为函数的声明符号。以下是两种写法的对比:


// 普通函数
function sayHello(name) {
  console.log("Hello, " + name + "!");
}

// 箭头函数
const sayHello = (name) => {
  console.log("Hello, " + name + "!");
}

2. this指向

在普通函数中,this的指向是动态的,它指向调用它的对象。而在箭头函数中,this的指向是固定的,它指向箭头函数定义时所在的上下文。以下是一个例子:


const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  },
  sayHelloArrow: () => {
    console.log("Hello, " + this.name + "!");
  }
}

person.sayHello(); // 输出:Hello, Alice!
person.sayHelloArrow(); // 输出:Hello, undefined!

在这个例子中,person对象有两个方法,一个是普通函数sayHello,另一个是箭头函数sayHelloArrow。当调用sayHello方法时,this指向person对象,因此可以正确地输出"name"属性的值。而当调用sayHelloArrow方法时,this指向箭头函数定义时所在的上下文,即全局作用域,因此输出的是undefined。

3. arguments对象

在普通函数中,可以使用arguments对象来获取函数传入的参数。而在箭头函数中,arguments对象是不存在的,可以使用Rest参数来获取函数传入的参数。以下是一个例子:


// 普通函数
function sum() {
  let total = 0;
  for (let i = 0; i  {
  let total = 0;
  for (let i = 0; i 

常见问题解答

1. 箭头函数和普通函数哪个更好?

这个问题并没有绝对的答案,因为每种函数都有它的适用场景。一般来说,当函数体比较简单,且不需要使用this或arguments对象时,可以使用箭头函数,因为它的写法更加简洁。而当函数体比较复杂,需要使用this或arguments对象时,还是使用普通函数比较好。

2. 箭头函数是否可以被new关键字调用?

箭头函数不能被new关键字调用,因为它没有构造函数的特性,不能创建新的对象。

3. 箭头函数是否可以作为构造函数?

箭头函数不能作为构造函数,因为它没有prototype属性,也没有自己的作用域。

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

4. 箭头函数是否可以递归调用?

箭头函数可以递归调用,但是需要把函数赋值给一个变量,然后再进行递归调用,否则会报错。

5. 箭头函数是否可以省略参数的括号?

当箭头函数只有一个参数时,可以省略参数的括号。但是当没有参数或者有多个参数时,必须加上参数的括号。

评论列表:

  •   tg7187037109
     发布于 1月前回复该评论
  • 写的很不错,学到了!
显示更多评论

发表评论:

管理员

承接各种程序开发,外贸网站代运营,外贸网站建设等项目
  • 内容2462
  • 积分67666
  • 金币90666

Copyright © 2024 LS'Blog-保定PHP程序员老宋个人博客 Inc. 保留所有权利。 Powered by LS'blog 3.0.3

页面耗时0.0261秒, 内存占用1.9 MB, 访问数据库25次

冀ICP备19034377号