箭头函数与普通函数区别

ES6中允许使用“箭头”（=>） 来定义函数。箭头函数相当于匿名函数，并且简化了函数定义。

// 箭头函数
let foo = (name) => `我是${name}`
foo('nk') // 我是nk

// 等同于下面这个普通函数
let foo2 = function(name) {
    return `我是${name}`
}

箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

let foo = (name) => {
    if(name){
        return `我是${name}`
    }
    return 'nk'
}
foo('nk') // 我是nk

var name = '南玖'
function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person1 = new Person('nan')
var person2 = new Person('jiu')

person1.foo1() // 'nan'
person1.foo1.call(person2) // 'jiu'

person1.foo2() // 'nan'
person1.foo2.call(person2) // 'nan'

person1.foo3()() // '南玖'
person1.foo3.call(person2)() // '南玖'
person1.foo3().call(person2) // 'jiu'

person1.foo4()() // 'nan'
person1.foo4.call(person2)() // 'jiu'
person1.foo4().call(person2) // 'nan'

解析：

全局代码执行，person1 = new Person('nan'),person2 = new Person('jiu')执行完，person1中的this.name为nan，person2中的this.name为jiu，OK这一点清楚后，继续往下看：

• 执行person1.foo1()，foo1为普通函数，所以this应该指向person1，打印出nan
• 执行person1.foo1.call(person2)，foo1为普通函数，并且用call改变了this指向，所以它里面的this应该指向person2，打印出jiu
• 执行person1.foo2()，foo2为箭头函数，它的this指向上层作用域，也就是person1，所以打印出nan
• 执行person1.foo2.call(person2)，箭头函数的this指向无法使用call改变，所以它的this还是指向person1，打印出nan
• 执行person1.foo3()()，这里先执行person1.foo3()，它返回了一个普通函数，接着再执行这个函数，此时就相当于在全局作用域中执行了一个普通函数，所以它的this指向window，打印出南玖
• 执行person1.foo3.call(person2)()这个与上面类似，也是返回了一个普通函数再执行，其实前面的执行都不用关心，它也是相当于在全局作用域中执行了一个普通函数，所以它的this指向window，打印出南玖
• 执行person1.foo3().call(person2)这里就是把foo3返回的普通函数的this绑定到person2上，所以打印出jiu
• 执行person1.foo4()()，先执行person1.foo4()返回了一个箭头函数，再执行这个箭头函数，由于箭头函数的this始终指向它的上层作用域，所以打印出nan
• 执行person1.foo4.call(person2)()，与上面类似只不过使用call把上层作用域的this改成了person2，所以打印出jiu
• 执行person1.foo4().call(person2)，这里是先执行了person1.foo4()，返回了箭头函数，再试图通过call改变改变该箭头函数的this指向，上面我们说到箭头函数的this始终指向它的上层作用域，所以打印出nan

2022年了你还不了解箭头函数与普通函数的区别吗？ - 掘金