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

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

1. 语法形式不同：箭头函数使用箭头“=>”来定义函数，而普通函数使用 function 关键字定义。

// 使用普通函数
function greet(name) {
  console.log('Hello, ' + name + '!');
}

// 使用箭头函数
const greet = name => {
  console.log(`Hello, ${name}!`);
};

2. this 绑定不同：箭头函数的 this 值被继承自外层作用域，而不是在函数调用时确定；而普通函数的 this 值则是在函数调用时动态确定的。

const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  }
};

const sayName = obj.sayName; // 将 sayName 方法赋值给一个变量

sayName(); // 输出 undefined，因为 this 指向了全局对象 window

const obj = {
  name: 'Alice',
  sayName: () => {
    console.log(this.name);
  }
};

const sayName = obj.sayName; // 将 sayName 方法赋值给一个变量

sayName(); // 输出 undefined，因为箭头函数的 this 指向了全局对象 window

3. 不能使用 arguments 对象：箭头函数不能使用 arguments 对象来获取函数的参数列表，而是需要使用剩余参数（rest parameters）语法来获取函数的参数列表。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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;
}

sum(1, 2, 3, 4); // 输出 10

4. 不能使用 new 关键字调用：箭头函数不能被使用 new 关键字调用，因为它没有构造函数的行为。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person('Alice', 25);
console.log(person.name); // 输出 "Alice"
console.log(person.age); // 输出 25

const Person = (name, age) => {
  this.name = name; // 抛出 TypeError 错误
  this.age = age;
}

const person = new Person('Alice', 25); // 抛出 TypeError 错误

5. 不能作为生成器函数：箭头函数不能作为生成器函数（generator function），因为它们没有 iterator 和 next 方法。

function* counter() {
  let i = 0;
  while (true) {
    yield i;
    i++;
  }
}

const iterator = counter();
console.log(iterator.next().value); // 输出 0
console.log(iterator.next().value); // 输出 1
console.log(iterator.next().value); // 输出 2
// ...

const counter = () => {
  let i = 0;
  while (true) {
    yield i; // 抛出 TypeError 错误
    i++;
  }
}

const iterator = counter(); // 抛出 TypeError 错误

6. 简洁的函数体：当函数体只有一条语句时，可以省略花括号和 return 关键字。

//函数体只有一条语句，使用花括号和 return 关键字来明确指定返回值
const sum = (a, b) => a + b;

//函数体有多条语句，需要使用花括号和 return 关键字来明确指定函数的返回值
const calculate = (a, b) => {
  const sum = a + b;
  const difference = a - b;
  return sum * difference;
}