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

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

1. 箭头函数为匿名函数

代码语言：javascript复制

let a = () => {}

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

let a = () => 1

let b = new a()

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

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

代码语言：javascript复制

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

// 报错
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

六、箭头函数不能当做Generator函数,不能使用yield关键字

• 箭头函数的this指向为其上下文的this，一级一级往上找，直到找到 window

当然箭头函数与普通函数的区别还有很多，小编总结的也不是很齐全，有想法的，请各位看官大大多多交流指正~~

arguments generator prototype window

0 人点赞