Adair

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

  • 箭头函数作为匿名函数，不能作为构造函数，不能使用 new
// 箭头函数不能作为构造函数 不能使用 new 操作符
const arrow1 = () => {}
// const n1 = new arrow1() // TypeError: arrow1 is not a constructor
1
2
3
  • 箭头函数不能绑定 arguments ，使用 ...
// 箭头函数不能绑定参数 arguments 使用 扩展运算符 ...
const arrow2 = (...args) => {
  // console.log(arguments); // ReferenceError: arguments is not defined
  console.log(args); // [1, 2, 3]
}
arrow2(1,2,3)
1
2
3
4
5
6
7
  • 箭头函数会捕捉上下文的 this 值，作为自己的 this，本身不会创建 this，使用时没有定义this绑定
// 箭头函数会捕捉上下文的 this 值，作为自己的 this，本身不会创建 this
const o1 = {
  name: 'hello',
  fn1: () => {
    console.log(this); // window
    console.log(this.name); // 空
  },
  fn2: function() {
    console.log(this.name); // hello
  }
}

o1.fn1()
o1.fn2()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • call apply bind 无法改变箭头函数中 this 指向
// call apply bind 无法改变箭头函数中 this 指向 
age = 10
const arrow3 = () => {
  console.log(this); // window 
  console.log(this.age); // 10
}
// 这里操作没有效果
arrow3.call({ age: 12 })
arrow3.apply({ age: 12 })
arrow3.bind({ age: 12 })()

// 普通函数
function fn1() {
  console.log(this.age); // 12
}
// 普通函数有效
fn1.call({ age: 12 })
fn1.apply({ age: 12 })
fn1.bind({ age: 12 })()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 箭头函数没有原型属性
// 箭头函数没有原型属性
console.log(arrow4.prototype); // undefined
console.log(fn1.prototype); // {constructor: ƒ}
1
2
3
  • 箭头函数不能换行

← 节流 防抖 →