this指向总结

多数情况下，this 指向调用它所在方法的那个对象。即谁调的函数，this 就归谁。
当调用方法没有明确对象时，this 就指向全局对象。在浏览器中，指向 window；在 Node 中，指向 Global。（严格模式下，指向 undefined）

一、普通函数中this

（1）总是代表着它的直接调用者，如obj.fn，fn里的最外层this就是指向obj
（2）默认情况下，没有直接调用者，this指向window
（3）严格模式下（设置了’use strict’），this为undefined
（4）当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象

注释：

1. call 方法第一个参数是this的指向，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。如：getColor.call(obj, ‘yellow’, ‘blue’, ‘red’)

2. apply 方法接受两个参数，第一个参数是this的指向，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。如：getColor.apply(obj, [‘yellow’, ‘blue’, ‘red’])

3. bind 方法和 call 方法很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。低版本浏览器没有该方法，需要自己手动实现

4. 以上 call，apply，bind 方法是ES5新增。

二、ES6箭头函数中this

（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window
（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

一些实例

（1）hello是全局函数，没有直接调用它的对象，也没有使用严格模式，this指向window

function hello() { 
   console.log(this);  // window 
}  
hello();

（2）hello是全局函数，没有直接调用它的对象，但指定了严格模式（‘use strict’），this指向undefined

function hello() { 
   'use strict';
   console.log(this);  // undefined
}  
hello();

（3）hello直接调用者是obj，第一个this指向obj，setTimeout里匿名函数没有直接调用者，this指向window

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(function () {
      console.log(this);    // window
    });
   }    
}
obj.hello();

（4）hello直接调用者是obj，第一个this指向obj，setTimeout箭头函数，this指向最近的函数的this指向，即也是obj

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(() => {
      console.log(this);    // obj
    });
   }    
}
obj.hello();

（5）diameter是普通函数，里面的this指向直接调用它的对象obj。perimeter是箭头函数，this应该指向上下文函数this的指向，这里上下文没有函数对象，就默认为window，而window里面没有radius这个属性，就返回为NaN。

const obj = {
  radius: 10,  
  diameter() {    
      return this.radius * 2
  },  
  perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter())    // 20
console.log(obj.perimeter())    // NaN

例1.

// 声明位置
var me = {
  name: 'xiuyan',
  hello: function() {
    console.log(`你好，我是${this.name}`)
  }
}

var you = {
  name: 'xiaoming',
  hello: me.hello
}

// 调用位置
me.hello() // xiuyan
you.hello() // xiaoming

例2.

// 声明位置
var me = {
  name: 'xiuyan',
  hello: function() {
    console.log(`你好，我是${this.name}`)
  }
}

var name = 'BigBear'
var hello = me.hello 

// 调用位置
me.hello() // 你好，我是xiuyan
hello() // 你好， 我是BigBear

因为 name 和 hello 都挂在在全局对象 window 上，所以 hello () 其实等价于 window.hello ()，此时 hello 方法内部的 this 自然指向 window，于是 this.name 就等价于 window.name。
例3.

// 声明位置
var me = {
  name: 'xiuyan',
  hello: function() {
    console.log(`你好，我是${this.name}`)
  }
}

var you = {
  name: 'xiaoming',
  hello: function() {
    var targetFunc = me.hello
    targetFunc()
  }
}

var name = 'BigBear'

// 调用位置
you.hello()// 你好， 我是BigBear

虽然 targetFunc 是在 you 对象的 hello 方法里声明的，但是在调用它的时候，没有指明任何一个对象作为它前缀， 所以 you 对象的 this 并不会自动传入 targetFunc 里，js 引擎仍然会认为 targetFunc 是一个挂载在 window 上的方法，进而把 this 指向 window 对象。

在下面两种特殊情境下，this 会 100% 指向 window：

• 立即执行函数（IIFE）

var name = 'BigBear'

var me = {
  name: 'xiuyan',
  // 声明位置
  sayHello: function() {
    console.log(`你好，我是${this.name}`)
  },
  hello: function() {
    (function(cb) {
      // 调用位置
      cb()
    })(this.sayHello)
  }
}
me.hello() // 你好， 我是BigBear

立即执行函数作为一个匿名函数，在被调用的时候，往往就是直接调用，而不会（也无法）通过属性访问器（ 即 xx.xxx） 这样的形式来给它指定一个所在对象，所以它的 this 就是默认的全局对象 window。

• setTimeout 中传入的函数，setInterval 中传入的函数

var name = 'BigBear'

var me = {
  name: 'xiuyan',
  hello: function() {
    setTimeout(function() {
      console.log(`你好，我是${this.name}`)
    })
  }
}
me.hello() // 你好，我是BigBear

延时效果（setTimeout）和定时效果（setInterval）都是在全局作用域下实现的，传入的函数，都会首先交付到全局对象手上。因此，函数中 this 的值，会自动指向 window。

严格模式下this指向

• 普通函数

'use strict'

function showThis() {
  console.log(this)
}

showThis() // undefined

• 全局代码中的 this

'use strict'

console.log(this) // 直接在全局代码里尝试去拿 this

像这样处于全局代码中的 this， 不管它是否处于严格模式下，它的 this 都指向 Window

'use strict'

var name = 'BigBear'

var me = {
  name: 'xiuyan',
  hello: function() {
    // 全局作用域下实现的延时函数
    setTimeout(function() {
      console.log(`你好，我是${this.name}`)
    })
  }
}

me.hello() // 你好，我是BigBear

箭头函数

var name = 'BigBear'
var me = {
  name: 'xiuyan',
  // 声明位置
  hello: () => {
      console.log(this.name)
  }
}
me.hello() // BigBear

综合

var a = 1
var obj = {
  a: 2,
  func2: () => {
    console.log(this.a)
  },
  
  func3: function() {
    console.log(this.a)
  }
}

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

// func2
var func2 = obj.func2
// func3
var func3 = obj.func3

func1()//1
func2()//1
func3()//1
obj.func2()//1
obj.func3()//2