面试官：箭头函数和普通函数的区别？箭头函数的this指向哪里？

前端老道

发布于 2022-12-01 10:01:45

5520

发布于 2022-12-01 10:01:45

文章被收录于专栏：Vue开发社区

一、箭头函数更直观、简洁

箭头函数为匿名函数

let a = () => {}

有一个参数可省略（），多个的话不能省略（），用，号分开

let a = m => {}
let b = (m, n) => {}

有返回值的话，可省略 {}

 let a = () => 1 
 // console.log(a()) 值为1

二、为匿名函数，不能作为构造函数，不能用new操作符

let a = () => 1

let b = new a()

Uncaught TypeError: a is not a constructor
    at <anonymous>:3:9

三、没有自己的this, 其this值为所在上下文的this值

let people = {
  name: 'xiaoming',
  fn: () => {
    console.log(this.name) // 没有返回值
    console.log(this, '箭头函数的 this 的执行环境') // window

  },
  fn2: function () {
    console.log(this.name) // xiaoming
    console.log(this, '普通函数 this 的执行环境') // 当前对象 test
  }
}
people.fn()
people.fn2()

结果：

四、箭头函数没有prototype

let a = () => 1
let b = function () {
  return 1
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

五、箭头函数参数不能用arguments，值是有外围非箭头函数所决定的

// 报错
let a = (m) => {
  console.log(arguments)
}
a(1,2,3)  // arguments is not defined

// 值是有外围非箭头函数所决定的
function fn(){
  let f = ()=> {
    console.log(arguments)
  }
  f();
}
fn(1,2,3) // [1,2,3]

// 普通函数的 arguments
let b = function () {
  console.log(...arguments)
}
b(1,2,3)  // 1,2,3