摘要：經(jīng)濟(jì)基礎(chǔ)決定上層建筑。以下暫不考慮嚴(yán)格模式。在全局執(zhí)行下，無(wú)論是否在嚴(yán)格模式下，指向全局對(duì)象。在其他函數(shù)內(nèi)部的箭頭函數(shù)，這些箭頭函數(shù)的保留。當(dāng)一個(gè)用于在的事件監(jiān)聽中，指向這個(gè)元素。

經(jīng)濟(jì)基礎(chǔ)決定上層建筑。

學(xué)習(xí)，記錄，備忘。

感謝參考過(guò)的所有資料的作者。

嗯，能看源碼的就不要看文檔，能看英文文檔的就不要看中文文檔，能自己上手驗(yàn)證的就不要僅僅參考。請(qǐng)保持質(zhì)疑。深有所感。

A function"s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.
In most cases, the value of this is determined by how a function is called. It can"t be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind method to set the value of a function"s this regardless of how it"s called, and ES2015 introduced arrow functions which don"t provide their own this binding (it retains the this value of the enclosing lexical context).

js 的嚴(yán)格模式和非嚴(yán)格模式有所不同。至于有什么不同，可能寫個(gè) demo 比聽別人解釋更直接。

大多數(shù)情況，this 的值取決于 function 是怎么被調(diào)用的。在執(zhí)行期間，是不能通過(guò)賦值來(lái)設(shè)置 this 的值的，并且每次 function 的調(diào)用，this 的值也是可能不同的。

可能較為難理解的就是 this 所對(duì)應(yīng)的 context 了。
以下暫不考慮嚴(yán)格模式。

在全局執(zhí)行 context 下，無(wú)論是否在嚴(yán)格模式下，this 指向全局對(duì)象。

// 瀏覽器中，全局對(duì)象指 window
console.log(this === window) // true
  
// 全局調(diào)用 alert
// 相當(dāng)于：window.alert(this)
alert(this) // [Object Window]

Inside a function, the value of this depends on how the function is called.

在函數(shù)內(nèi)，this 取決于這個(gè)函數(shù)是如何被調(diào)用的。取決于調(diào)用這個(gè)函數(shù)的對(duì)象。

Simple call

function sayName() {
  console.log(this.name)
}

var name = "~ window ~"

var apple = {
  name: "apple"
}

var banana = {
  name: "banana"
}

// 全局調(diào)用，相當(dāng)于：window.getThis()，this 指向 window
sayName() // ~ window ~

// call 改變 this 指向，this 指向 apple
sayName.call(apple) // apple

// apply 改變 this 指向，this 指向 banana
sayName.apply(banana) // banana

// 注意：
// 在使用 call/apply 來(lái)改變 this 的指向的時(shí)候，
// 如果第一個(gè)參數(shù)數(shù)據(jù)類型不是 object 時(shí)，如：7 或者 "test"，內(nèi)部會(huì)嘗試將該值用其相關(guān)的構(gòu)造函數(shù)轉(zhuǎn)為對(duì)象，
// 即：7 => new Number(7), "test" => new String("test")

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

var str_1 = "test"
getThis.apply(str_1) // 原諒愚笨，這個(gè)結(jié)果不知如何描述，可測(cè)。

The bind method

ECMAScript 5 introduced Function.prototype.bind. Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

調(diào)用 f.bind(someObject) 會(huì)創(chuàng)建一個(gè)新 function ，這個(gè)新 function 擁有函數(shù) f 相同的主體和作用域。但是 this 的存在只出現(xiàn)在原始函數(shù)(f)中，在新 function 中 ，this 就被永久的綁定在 bind 的第一個(gè)參數(shù)(someObject)上，無(wú)論這個(gè)新 function 是怎么被調(diào)用。

function sayName() {
  console.log(this.name);
}
  
var apple = {
  name: "apple"
}

var banana = {
  name: "banana"
}

// bind 返回一個(gè)新函數(shù)，且新函數(shù) this 已經(jīng)綁定 apple
var appleName = sayName.bind(apple)
appleName() // apple

// 由于 appleName 已經(jīng)永久綁定 apple，即使再次綁定 banana，this 依然指向 apple
var bananaName_1 = appleName.bind(banana)
bananaName_1() // apple

// 但是重新對(duì)原始函數(shù)進(jìn)行 bind 綁定，會(huì)再次返回一個(gè)新函數(shù)，新函數(shù) this 永久綁定 banana
var bananaName_2 = sayName.bind(banana)
bananaName_2() // banana
// interesting...

Arrow functions

In arrow functions, this retains the value of the enclosing lexical context"s this. In global code, it will be set to the global object.
In arrow functions, this is set to what it was when it was created (in the following example, the global object). The same applies to arrow functions created inside other functions: their this remains that of the enclosing lexical context.

箭頭函數(shù)中的 this 保留 the enclosing lexical context 中 this 的值。全局環(huán)境中箭頭函數(shù) this 指向全局變量。
箭頭函數(shù)中的 this 指向定義這個(gè)箭頭函數(shù)時(shí)所在對(duì)象（下面的例子中，this 指向全局對(duì)象）。在其他函數(shù)內(nèi)部的箭頭函數(shù)，這些箭頭函數(shù)的 this 保留 the enclosing lexical context 。

var getThis = (() => this)
console.log(getThis() === window)

// Create obj with a method bar that returns a function that
// returns its this. The returned function is created as 
// an arrow function, so its this is permanently bound to the
// this of its enclosing function. The value of bar can be set
// in the call, which in turn sets the value of the 
// returned function.
var obj = {bar: function() {
  var x = (() => this);
  return x;
}
};

// Call bar as a method of obj, setting its this to obj
// Assign a reference to the returned function to fn
var fn = obj.bar();

// Call fn without setting this, would normally default
// to the global object or undefined in strict mode
console.log(fn() === obj); // true

// But caution if you reference the method of obj without calling it
var fn2 = obj.bar;
// Then calling the arrow function this is equals to window because it follows the this from bar.
console.log(fn2()() == window); // true
// 此例子覺得 MDN 上講解的很到位了

Note: if this arg is passed to call, bind, or apply on invocation of an arrow function it will be ignored. You can still prepend arguments to the call, but the first argument (thisArg) should be set to null.

注意：箭頭函數(shù)的 call/apply/bind 的第一個(gè)綁定參數(shù)會(huì)被忽略。依然可以用這些方法傳遞后面的參數(shù)，但是第一個(gè)參數(shù)應(yīng)設(shè)置為 null 。

var sayName = (() => this.name)

var apple = {
  name: "apple"
} 

var banana = {
  name: "banana"
}

// this 依然指向全局對(duì)象 window
console.log(sayName.call(apple))  // ""
console.log(sayName.bind(banana)()) // ""

As an object method

When a function is called as a method of an object, its this is set to the object the method is called on.

當(dāng)一個(gè)函數(shù)作為一個(gè)對(duì)象的方法被調(diào)用時(shí)，這個(gè)函數(shù)的 this 指向調(diào)用該方法的對(duì)象。

var apple = {
  name: "apple",
  category: "fruit",
  sayName: function (){
      console.log(this.name)
  }
}

function getCategory() {
  console.log(this.category) 
}

apple.getCategory = getCategory

apple.getCategory() // fruit
apple.sayName() // apple

Similarly, the this binding is only affected by the most immediate member reference.

this 的指向只與最直接調(diào)用函數(shù)的對(duì)象有關(guān).

var apple = {
  name: "apple",
  category: "fruit",
  sayName: function (){
      console.log(this.name)
  }
}

function madeIn() {
  console.log(this.name)
}

apple.produce = {
   name: "China",
   madeIn: madeIn
}

// this 指向最直接調(diào)用自己的對(duì)象 apple.produce
apple.produce.madeIn()

The same notion holds true for methods defined somewhere on the object"s prototype chain. If the method is on an object"s prototype chain, this refers to the object the method was called on, as if the method were on the object.

對(duì)象原型鏈上的方法也是如此（即: this 指向調(diào)用該方法的對(duì)象）。如果這個(gè)方法在對(duì)象的原型鏈上，當(dāng)這個(gè)對(duì)象調(diào)用方法時(shí)，this 指向這個(gè)對(duì)象。正如對(duì)象的方法一樣。

var base_methods = {
  sayName: function() {
    console.log(this.name)
  },
  getCategory: function() {
    console.log(this.category)
  }
}

var apple = Object.create(base_methods)
apple.name = "apple"
apple.category = "fruit"

apple.sayName() // apple
apple.getCategory() // fruit
// interesting...

Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its this bound to the object from which the property is being set or gotten.

getter/setter 中的函數(shù)調(diào)用也是如此（即: this 指向調(diào)用該方法的對(duì)象）。用作 getter/setter 的函數(shù)，this 指向用這個(gè)函數(shù)定義 get/set 屬性的那個(gè)對(duì)象 。

var apple = {
  name: "apple"
}

function sayName() {
  console.log(this.name)
}

Object.defineProperty(apple, "sayName", {
  get: sayName, enumerable: true, configurable: true
})

apple.sayName // apple
// 目前對(duì) getter/setter 的執(zhí)行暫未深入了解

As a constructor

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.
While the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn"t an object, then the this object is returned).

當(dāng)一個(gè) function 作為一個(gè) constructor 的時(shí)候，在用 new 關(guān)鍵字實(shí)例化一個(gè)新對(duì)象之后，funtion 的 this 指向這個(gè)新對(duì)象。
需要額外注意的是，constructor 在沒有 return 的時(shí)候，默認(rèn)返回一個(gè) this 引用的對(duì)象，也可以指定 return 一個(gè)其他對(duì)象（如果 return 的不是一個(gè)對(duì)象，那么返回的是 this 引用的對(duì)象）
constructor 如何執(zhí)行不做贅述。

function Person() {
  this.nature = "Person"
}

function Teacher() {
  this.nature = "Teacher"
  return {
    name: "Jane"
  }
}

function Student() {
  this.nature = "Student"
  return "Summer"
}

var a = new Person()
console.log(a.nature) // Person

var b = new Teacher()
console.log(b.nature) // undefined
console.log(b.name) // Jane

var c = new Student()
console.log(c.nature) // Student

As a DOM event handler
當(dāng)一個(gè) function 用于在 DOM 的事件監(jiān)聽中， this 指向這個(gè) DOM 元素。

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

var demo = document.getElementById("demo") // html 需要自己寫

demo.addEventListener("click", getThis, false) // this 指向 id="demo" 的 DOM 元素
demo.addEventListener("mouseover", function() {
  console.log(this) // this 指向 id="demo" 的 DOM 元素
}, false)

In an inline event handler

// 在 HTML 的 DOM 的內(nèi)聯(lián)中監(jiān)聽事件
// 以下的 this 指向正在監(jiān)聽的 DOM 本身，即：這個(gè) button 元素

  Show this


// 然而下面的寫法，在內(nèi)聯(lián)事件內(nèi)部函數(shù)體中的 this 指全局對(duì)象 window

  Show inner this

MDN

Javascript 的 this 用法

徹底理解js中this的指向，不必硬背。

你不懂JS：this與對(duì)象原型 第二章：this豁然開朗！

好記性不如爛筆頭。