一文详解JavaScript普通函数与箭头函数的本质区别与使用场景

// 普通函数
function greet(name) {
  return `Hello, ${name}!`;
}

// 箭头函数
const greetArrow = name => `Hello, ${name}!`;

const person = {
  name: '我',
  sayName: function() {
    console.log(this.name); // 正确指向person对象
  }
};

person.sayName(); // 输出"我"

const person = {
  name: '我',
  sayName: () => {
    console.log(this.name); // 指向window/undefined(严格模式)
  }
};

person.sayName(); // 输出undefined

// 使用普通函数需要额外绑定this
const obj = {
  values: [1, 2, 3],
  printValues: function() {
    this.values.forEach(function(item) {
      console.log(item, this); // 这里的this不是obj了！
    }.bind(this));
  }
};

// 使用箭头函数则自动绑定
const objArrow = {
  values: [1, 2, 3],
  printValues: function() {
    this.values.forEach(item => {
      console.log(item, this); // 正确指向objArrow
    });
  }
};

function Person(name) {
  this.name = name;
}
const me = new Person('我');
console.log(me.name); // "我"

const PersonArrow = (name) => {
  this.name = name; // 报错！
};
// const me = new PersonArrow('我'); // TypeError

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

const sumArrow = () => {
  console.log(arguments); // 报错！
};
// sumArrow(1, 2, 3); // ReferenceError

const sumArrow = (...args) => {
  return args.reduce((a, b) => a + b, 0);
};
console.log(sumArrow(1, 2, 3)); // 6

function Foo() {}
console.log(Foo.prototype); // 存在

const Bar = () => {};
console.log(Bar.prototype); // undefined

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数多种写法
const addArrow1 = (a, b) => {
  return a + b;
};

// 单行简写
const addArrow2 = (a, b) => a + b;

// 单个参数可省略括号
const square = x => x * x;

// 无参数需要括号
const sayHi = () => console.log('Hi!');

// 使用普通函数
function Timer() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++; // 这里的this指向window！
    console.log(this.seconds);
  }, 1000);
}
// const timer = new Timer(); // 不会按预期工作

// 修复方案1：保存this引用
function TimerFixed1() {
  this.seconds = 0;
  const self = this;
  setInterval(function() {
    self.seconds++;
    console.log(self.seconds);
  }, 1000);
}

// 修复方案2：使用bind
function TimerFixed2() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++;
    console.log(this.seconds);
  }.bind(this), 1000);
}

// 最佳方案：使用箭头函数
function TimerArrow() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 正确绑定到TimerArrow实例
    console.log(this.seconds);
  }, 1000);
}

const counter = {
  count: 0,
  increment: () => {
    this.count++; // 错误！this指向外层作用域
  }
};

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

// 错误用法
Person.prototype.sayName = () => {
  console.log(this.name); // 不会按预期工作
};

button.addEventListener('click', () => {
  console.log(this); // 指向外层作用域，不是button元素
});

// 应该使用普通函数
button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});