05JavaScript核心：this——基本指向原则解析

1.this 指向谁？

2.特殊情境下的this指向

3.”危险“的严格模式

4.箭头函数中this指向

5.一道总结题

1.this 指向谁？

1. 通俗点，谁调用的函数，this就归谁。
2. 当调用方法没有明确对象时，this就指向全局对象。在浏览器中指向window，在Node中指向Global。严格模式下没有指明对象this执行undefined。

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

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

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

1. hello被me对象调用，this就指向了me。
2. hello没有明确被对象调用，this就指向了全局环境window。

// 声明位置
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对象声明的，但是调用的时候没有指明对象，所以其this指向window对象。

2.特殊情境下的this指向

三种特殊情境下this会100%指向window：

• 立即执行函数（IIFE）
• setTimeout 中传入的函数
• setInterval 中传入的函数

var name = 'BigBear'

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

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

3."危险”的严格模式

在严格模式下，this将保持它被指定的那个值，如果没有指定对象，this就是undefined。

'use strict'

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

showThis() // undefined

4.箭头函数中this指向

箭头函数中this比较特别，它和严格模式、非严格模式都没关系，它只认“词法作用域”，即其this与如何调用它无关，只由书写它的位置决定。

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

// 调用位置
me.hello() // BigBear

箭头函数的 this 会在书写阶段（即声明位置）就绑定到它的父作用域的this上，无论后续我们如何调用它，都无法再为它指定目标对象——因为箭头函数的this指向是静态的。

5.一道总结题

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()
func2()
func3()
obj.func2()
obj.func3()

输出： 1 1 1 1 2