箭头函数与普通函数（function）的区别-阿里云开发者社区

箭头函数与普通函数（function）的区别

2024-10-23 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

RDS MySQL Serverless 基础系列，0.5-2RCU 50GB

Redis 开源版，标准版 2GB

云数据库 RDS MySQL，集群系列 2核4GB

简介： 箭头函数是ES6引入的新特性，与传统函数相比，它有更简洁的语法，且没有自己的this、arguments、super或new.target绑定，而是继承自外层作用域。箭头函数不适用于构造函数，不能使用new关键字调用。

语法形式
- 普通函数：使用function关键字来定义。例如：
```
function add(a, b) {
       
  return a + b;
}
```
- 箭头函数：使用箭头=>来定义。例如：
```
const add = (a, b) => {
       
  return a + b;
};
```
- 对于只有一个参数的箭头函数，括号可以省略。如果函数体只有一条语句且是返回值，花括号和return关键字也可以省略。例如：
```
const square = x => x * x;
```

this指向

普通函数：this的值在函数被调用时确定，它取决于函数的调用方式。在全局环境中调用函数，this指向全局对象（在浏览器中是window，在Node.js中是global）；当作为对象的方法调用时，this指向该对象。例如：

const obj = {
       
  name: 'John',
  sayName() {
       
    console.log(this.name);
  }
};
obj.sayName();//'John'，这里this指向obj
const sayNameFn = obj.sayName;
sayNameFn();//在非严格模式下，这里this指向全局对象，会输出undefined（如果是浏览器环境可能是window）

箭头函数：没有自己的this，它的this是在定义时确定的，与它所在的上下文的this相同。例如：

const obj = {
       
  name: 'John',
  sayName: () => {
       
    console.log(this.name);
  }
};
obj.sayName();//这里this指向全局对象，会输出undefined（如果是浏览器环境可能是window）
const outerThis = this;
const newObj = {
       
  name: 'Alice',
  sayName: function() {
       
    const arrowFn = () => {
       
      console.log(this.name);
    };
    arrowFn();
  }
};
newObj.sayName();//'Alice'，箭头函数的this继承自外层函数的this，这里外层函数的this指向newObj

arguments对象

普通函数：可以访问arguments对象，它是一个包含函数调用时传入的所有参数的类数组对象。例如：

function sum() {
       
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
       
    result += arguments[i];
  }
  return result;
}
console.log(sum(1, 2, 3));//6

箭头函数：没有自己的arguments对象。不过，它可以访问外层函数的arguments（如果存在）。例如：

function outerFn() {
       
  const arrowFn = () => {
       
    console.log(arguments);
  };
  arrowFn();
}
outerFn(1, 2, 3);

构造函数使用
- 普通函数：可以作为构造函数使用，通过new关键字创建对象实例。在构造函数内部，this会被绑定到新创建的对象上。例如：
```
function Person(name) {
       
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name);
```
- 箭头函数：不能作为构造函数使用。如果尝试使用new来调用箭头函数，会抛出错误。例如：
```
const ArrowPerson = (name) => {
       
  this.name = name;
};
const arrowPerson = new ArrowPerson('Bob');//会抛出错误
```
适用场景
- 普通函数：
  - 当需要使用this指向调用对象、访问arguments对象、作为构造函数创建对象等场景时，使用普通函数。
  - 适合用于定义对象的方法，特别是需要改变this指向的情况。
- 箭头函数：
  - 当需要简洁的语法来定义简单的函数，特别是在回调函数中不需要自己的this（例如在Array.prototype.map、Array.prototype.filter等数组方法的回调函数中），箭头函数是很好的选择。
  - 适合在函数内部创建函数，并且希望内部函数的this与外层函数保持一致的场景。

箭头函数与普通函数（function）的区别

数据库

热门文章

最新文章

相关电子书

相关实验场景