JavaScript中的this一直是面試中的熱點問題，同時也是JavaScript中的一個難點問題，在JavaScript中this的指向十分靈活，使用場景也很多，所以對于this的熟練掌握是我們前端工程師的一個基本技能之一。今天我們來通過7個實例來講解this在一些場景中的指向問題，大家也可以先看代碼，自己先思考答案，再看自己的答案是否是正確的。

有一種民間流傳的說法：“誰調用它，this就指向誰”，這句話其實并不全面，我們還要根據實際情況進行逐個分析。

我想一篇文章里放太多的題目實例也不好，像做考試題似的，所以我會分多篇文章去發布this指向的內容。

全局環境中的this

基礎版本

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

function fn2 () {
  'use strict'
  console.log(this)
}

fn1() //?
fn2() //?

這種情況還算簡單，因為函數在全局環境中被調用，在非嚴格模式下this指向window，在嚴格模式下指向undefined。所以這道題的答案是window和undefined。

升級版本

const obj = {
  abc: 10,
  fn: function() {
    console.log(this)
    console.log(this.abc)
  }
}

let fn1 = obj.fn
fn1() // ?

這里的this仍然指向window，因為fn函數雖然是作為對象的一個方法，但是在賦值給fn1之后，fn1仍然是在全局環境中執行的，所以這道題的答案是window和undefined。

如果是這樣呢？

const obj = {
  a: 10,
  fn: function() {
    console.log(this)
    console.log(this.a)
  }
}

obj.fn() // ?

這就是我們常規的使用方式了，this指向的是調用它的對象，也就是obj對象，所以會輸出下面的內容

{a: 10, fn: ?}
10

這里要記住，如果函數式被上一級對象調用那么this就指向上一級這個對象，否則就指向全局環境。

對象調用中的this

基礎版本

根據上面所講，再遇到這樣的題目時，就要融會貫通。

const user = {
  name: 'shuai',
  fn: function() {
    return this
  }
}

console.log(user.fn() === user) // ?

函數被user對象所調用，所以this指向為user對象，所以這道題答案為true。

復雜調用版本

const user = {
  name: 'shuai',
  friend: {
    name: 'guan',
    fn: function() {
        return this.name
    }
  }
}

console.log(user.friend.fn()) // ?

摸清套路之后，再復雜的調用關系也不怕，根據上面所說“函數式被上一級對象調用那么this就指向上一級這個對象”，所以這道題的答案是輸出guan。

更高階版本

const u1 = {
  name: 'u1',
  fn: function() {
    return this.name
  }
}

const u2 = {
  name: 'u2',
  fn: function() {
    return u1.fn()
  }
}

const u3 = {
  name: 'u3',
  fn: function() {
    let fn = u1.fn
    return fn()
  }
}

console.log(u1.fn()) // ?
console.log(u2.fn()) // ?
console.log(u3.fn()) // ?

• 首先來說第一個u1.fn()，這個比較簡單，和上面一樣，答案為輸出u1。

• 第二個相對來講也還可以，因為u1.fn()返回的就是u1，所以u2.fn()返回的也就是u1。

• 第三個u3.fn()相對就很難了，因為它把u1.fn賦值給了fn，然后直接調用的fn函數。所以這里的this指向是window，所以答案是輸出undefined。

所以這個公式一定要背下來，不然就會發懵。

這里要記住，如果函數式被上一級對象調用那么this就指向上一級這個對象，否則就指向全局環境。

變種版本

const u1 = {
  name: 'u1',
  fn: function() {
    return this.name
  }
}

const u2 = {
  name: 'u2',
  fn: u1.fn
}

console.log(u2.fn()) // ?

這道題，首先是把u1.fn賦值給u2.fn，然后調用了u2.fn()，因為調用fn的是u2對象，所以this指向的就是u2對象，所以輸出的將是u2。

今天規律總結

• 在函數中，嚴格模式this會被綁定到undefined上，非嚴格模式會被綁定到window全局對象
• 通過上下文對象調用函數時，函數內的this會被綁定到該對象上

歡迎我的公眾號【小帥的編程筆記】，讓我們在前端的路上越走越遠