摘要：原文鏈接參考深入理解原型和閉包完結王福朋博客園中的作用域詳解博客園

王福朋老師的 JavaScript原型和閉包系列 文章看了不下三遍了，最為一個初學者，每次看的時候都會有一種 "大徹大悟" 的感覺，而看完之后卻總是一臉懵逼。原型與閉包 可以說是 JavaScirpt 中理解起來最難的部分了，當然，我也只是了解到了一些皮毛，對于 JavaScript OOP 更是缺乏經驗。這里我想總結一下 Javascript 中的 this 關鍵字，王福朋老師的在文章里也花了大量的篇幅來講解 this 關鍵字的使用，可以說 this 關鍵字也是值得重視的。

我們都知道，每一個 "代碼段" 都會執行在某一個 上下文環境 當中，而在每一個代碼執行之前，都會做一項 "準備工作"，也就是生成相應的 上下文環境，所以每一個 上下文環境 都可能會不一樣。

上下文環境 是什么？我們可以去看王福朋老師的文章（鏈接在文末），講解的很清楚了，這里不贅述了。

"代碼段" 可以分為三種：

全局代碼

函數體

eval 代碼

與之對應的 上下文環境 就有：

全局上下文

函數上下文

（elav 就不討論了，不推薦使用）

當然，這和 this 又有什么關系呢？this 的值就是在為代碼段做 "準備工作" 時賦值的，可以說 this 就是 上下文環境 的一部分，而每一個不同的 上下文環境 可能會有不一樣的 this值。

每次在尋找一個問題的解決方案或總結一個問題的時候，我總會去嘗試將這個問題進行合適的分類，而從不同的方面去思考問題。

所以，這里我大膽的將 this 關鍵字的使用分為兩種情況：

全局上下文的 this

函數上下文的 this

（你也可以選擇其他的方式分類。當然，這也不重要了）

在全局執行上下文中（在任何函數體外部），this 都指向全局對象：

// 在瀏覽器中, 全局對象是 window
console.log(this === window) // true

var a = "Zavier Tang"
console.log(a) // "Zavier Tang"
console.log(window.a) // "Zavier Tang"
console.log(this.a) // "Zavier Tang"

this.b = 18
console.log(b) // 18
console.log(window.b) // 18
console.log(this.b) // 18

// 在 node 環境中，this 指向global
console.log(this === global) // true

在函數內部，this 的值取決與函數被調用的方式。

this 的值在函數定義的時候是確定不了的，只有函數調用的時候才能確定 this 的指向。實際上 this 的最終指向的是那個調用它的對象。（也不一定正確）

對于全局的方法調用，this 指向 window 對象(node下為 global )：

var foo = function () {
  return this
}
// 在瀏覽器中
foo() === window // true

// 在 node 中
foo() === global //true

但值得注意的是，以上代碼是在 非嚴格模式 下。然而，在 嚴格模式 下，this 的值將保持它進入執行上下文的值：

var foo = function () {
  "use strict"
  return this
}

f2() // undefined

即在嚴格模式下，如果 this 沒有被執行上下文定義，那它為 undefined。

在生成 上下文環境 時：

若方法被 window（或 global ）對象調用，即執行 window.foo()，那 this 將會被定義為 window（或 global ）；
若被普通對象調用，即執行 obj.foo()，那 this 將會被定義為 obj 對象；（在后面會討論）
但若未被對象調用，即直接執行 foo()，在非嚴格模式下，this 的值默認指向全局對象 window（或 global ），在嚴格模式下，this 將保持為 undefined。

通過 this 調用全局變量：

var a = "global this"

var foo = function () {
  console.log(this.a)
}
foo() // "global this"

var a = "global this"

var foo = function () {
  this.a = "rename global this" // 修改全局變量 a
  console.log(this.a)
}
foo() // "rename global this"

所以，對于全局的方法調用，this 指向的是全局對象 window （或global ），即調用方法的對象。（注意嚴格模式的不同）

當函數作為對象的方法調用時，它的 this 值是調用該函數的對象。也就是說，函數的 this 值是在函數被調用時確定的，在定義函數時確定不了（箭頭函數除外）。

var obj = {
  name: "Zavier Tang",
  foo: function () {
    console.log(this)
    console.log(this.name)
  }
}

obj.foo() // Object {name: "Zavier Tang", foo: function}    // "Zavier Tang"

//foo函數不是作為obj的方法調用
var fn = obj.foo // 這里foo函數并沒有執行
fn() // Window {...}  // undefined

this 的值同時也只受最靠近的成員引用的影響：

//接上面代碼
var o = {
  name: "Zavier Tang in object o",
  fn: fn,
  obj: obj
}
o.fn() // Object {name: "Zavier Tang in object o", fn: fn, obj: obj}  // "Zavier Tang in object o"
o.obj.foo() // Object {name: "Zavier Tang", foo: function}    // "Zavier Tang"

在原型鏈中，this 的值為當前對象：

var Foo = function () {
  this.name = "Zavier Tang"
  this.age = 20
}

Foo.prototype.getInfo = function () {
  console.log(this.name)
  console.log(this.age)
}

var tang = new Foo()
tang.getInfo() // "Zavier Tang"  // 20

雖然這里調用的是一個繼承方法，但 this 所指向的依然是 tang 對象。

參考：《Object-Oriented JavaScript》(Second Edition)

如果函數作為構造函數，那函數當中的 this 便是構造函數即將 new 出來的對象：

var Foo = function () {
  this.name = "Zavier Tang",
  this.age = 20,
  this.year = 1998,
  console.log(this)
}

var tang = new Foo()

console.log(tang.name) // "Zavier Tang"
console.log(tang.age) // 20
console.log(tang.year) // 1998

當 Foo 不作為構造函數調用時，this 的指向便是前面討論的，指向全局變量：

// 接上面代碼
Foo() // window {...}

當一個函數在其主體中使用 this 關鍵字時，可以通過使用函數繼承自Function.prototype 的 call 或 apply 方法將 this 值綁定到調用中的特定對象。即 this 的值就取傳入對象的值：

var obj1 = {
  name: "Zavier1"
}

var obj2 = {
  name: "Zavier2"
}

var foo = function () {
  console.log(this)
  console.log(this.name)
}
foo.apply(obj1) // Ojbect {name: "Zavier1"}   //"Zavier1"
foo.call(obj1) // Ojbect {name: "Zavier1"}   //"Zavier1"

foo.apply(obj2) // Ojbect {name: "Zavier2"}   //"Zavier2"
foo.call(obj2) // Ojbect {name: "Zavier2"}   //"Zavier2"

與 apply、call 不同，使用 bind 會創建一個與 foo 具有相同函數體和作用域的函數。但是，特別要注意的是，在這個新函數中，this 將永久地被綁定到了 bind 的第一個參數，無論之后如何調用。

var foo = function () {
  console.log(this.name)
}

var obj1 = {
  name: "Zavier1"
}
var obj2 = {
  name: "Zavier2"
}

var g = foo.bind(obj1)
g() // "Zavier1"

var h = g.bind(ojb2) // bind只生效一次！
h() // "Zavier1"

var o = {
  name: "Zavier Tang",
  f:f,
  g:g,
  h:h
}
o.f() // "Zavier Tang"
o.g() // "Zavier1"
o.h() // "Zavier1"

箭頭函數是 ES6 語法的新特性，在箭頭函數中，this 的值與創建箭頭函數的上下文的 this 一致。

在全局代碼中，this 的值為全局對象：

var foo = (() => this)
//在瀏覽器中
foo() === window // true
// 在node中
foo() === global // true

其實箭頭函數并沒有自己的 this。所以，調用 this 時便和調用普通變量一樣在作用域鏈中查找，獲取到的即是創建此箭頭函數的上下文中的 this。

當箭頭函數在創建其的上下文外部被調用時，箭頭函數便是一個閉包，this 的值同樣與原上下文環境中的 this 的值一致。由于箭頭函數本身是不存在 this，通過 call 、 apply 或 bind 修改 this 的指向是無法實現的。

作為對象的方法：

var foo = (() => this)

var obj = {
  foo: foo
}
// 作為對象的方法調用
obj.foo() === window // true

// 用apply來設置this
foo.apply(obj) === window // true
// 用bind來設置this
foo = foo.bind(obj)
foo() === window // true

箭頭函數 foo 的 this 被設置為創建時的上下文（在上面代碼中，也就是全局對象）的 this 值，而且無法通過其他調用方式設定 foo 的 this 值。

與普通函數對比，箭頭函數的 this 值是在函數創建創建確定的，而且無法通過調用方式重新設置 this 值。普通函數中的 this 值是在調用的時候確定的，可通過不同的調用方式設定 this 值。

this 關鍵字的值取決于其所處的位置(上下文環境)：

在全局環境中，this 的值指向全局對象( window 或 global )。

在函數內部，this 的取值取決于其所在函數的調用方式，也就是說 this 的值是在函數被調用的時候確定的，在創建函數時無法確定。當然，箭頭函數是個例外，箭頭函數本身不存在 this，而在箭頭函數中使用 this 獲取到的便是創建其的上下文中的 this。同時，使用函數的繼承方法 call 、 apply 和 bind 會修改 this 的指向。但值得注意的是，使用 bind 方法會使 this 的值永久的綁定到給定的對象，無法再通過調用 call 和 apply 方法修改 this 的值，箭頭函數調用 call 、 apply 或 bind 方法無法修改 this。

原文鏈接

參考：

深入理解javascript原型和閉包（完結） - 王福朋 - 博客園

this - JavaScript | MDN

javascript中的this作用域詳解 - coder_Jenny - 博客園