【this指向】之三：函数和箭头函数中的this

1.严格模式&非严格模式

(function fa() {
  console.log(this) // window对象
})();
(() => {
  console.log(this) // window对象
})();

'use strict';
(function fa() {
  console.log(this) // undefined
})();
(() => {
  console.log(this) // window对象
})();

由此可见，严格模式下，箭头函数中的this都是指向window对象，普通函数中的this在严格模式下是undefined。

2.改变this指向的方法：apply/call/bind

详细了解这三个方法的使用，可以自行学习。后续我也会补充相关内容的链接。

2.1 普通函数：

var a = 'global A';
var obj = {
  a: 'obj A'
}

function func () {
  console.log(this.a)
}

func();           // global A
func.call(obj);   // obj A --- 改变了this指向obj
func.apply(obj);  // obj A --- 改变了this指向obj
func.bind(obj)(); // obj A

2.2 箭头函数

var a = 'global A';
var obj = {
  a: 'obj A'
}

var func = () => {
  console.log(this.a)
}

func();           // global A
func.call(obj);   // global A
func.apply(obj);  // global A
func.bind(obj)(); // global A

由此可见：箭头函数中的this指向不会被改变。

• 我们再来看看定义对象中的函数：

var a = 'global A';
var obj = {
  a: 'obj A',
  func: () => {
    console.log(this.a) // global A, 
  }
}
obj.func()

这里的this仍指向window,并非指向调用对象。

那么我们再看下面代码：

var a = 'global A';
var obj = {
  a: 'obj A'
}
obj.func = function () {
  console.log('func>>>', this.a) // func>>> obj A
  var f0 = () => {
	console.log('f0>>>', this.a) // f0>>> obj A
  }
  f0();
  // 测试普通函数中的箭头函数中的this
  function f1 () {
    console.log('f1>>>', this.a) // f1>>> global A
    var f2 = () => {
	  console.log('f2>>>', this.a) // f2>>> global A
	}
	f2();
  }
  f1();
}
obj.func()

var a = 'global A';
var obj = {
  a: 'obj A'
}
obj.func1 = () => {
  console.log(this.a) // global A
  return () => {
    console.log(this.a) // global A
  }
}
obj.func1()()

所以箭头函数的this指向是最近的外层非箭头函数作用域的this指向