前言

ES6箭头函数在开发中运用不好可能会给自己埋坑，没事在缕缕这个老生长谈的箭头函数。

正文

this指向区别

  • 普通函数

this指向函数的直接调用者

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 10
function fn(){
  console.log(this.a)
}
fn() //10 指向window

---------------------

var a = 10
function fn(){
  console.log(this.a)
}
fn.call({a:20}) //20 改变this指向当前obj
  • 箭头函数

this指向其定义时的环境，并且任何方法都改变不了this指向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fn(){
  this.n = 1;
  this.b = 9;
  setInterval( ()=>{
    this.n++
  },1000 );
  setInterval(function(){
    this.b+1
  },1000)
}

var test = new fn();

setTimeout(()=> console.log(test.n),3000) // 3
setTimeout(()=> console.log(test.b),3000) // 9

fn函数内部有两个定时器，分别用箭头函数和普通函数。箭头函数的this绑定在定义时的作用域（即fn函数），普通函数的this指向了运行时所在的作用域（即window对象）

  • 不适用场景
1
2
3
4
5
6
7
8
var obj = {
    a:1,
    b:()=>{
        console.log(this.a)
    }
}
obj.b()
// undefined

箭头函数使this绑定在了全局对象上,因此会打印undefined。这是因为对象不构成单独的作用域，导致箭头函数定义时的作用域就是全局作用域。

写在最后

箭头函数的注意点
1，箭头函数体内的this指向是不会改变的，在定义时所在的对象。
2，不能当做构造函数，不能使用new命令。
3，不能使用arguments对象，该对象在函数体内不存在。