摘要：原文地址基礎(chǔ)心法歡迎。作為一個(gè)構(gòu)造函數(shù)被綁定到正在構(gòu)造的新對(duì)象。通過構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象其實(shí)執(zhí)行這樣幾個(gè)步驟創(chuàng)建新對(duì)象將指向這個(gè)對(duì)象給對(duì)象賦值屬性方法返回所以就是指向創(chuàng)建的這個(gè)對(duì)象上。

原文地址：JavaScript基礎(chǔ)心法——this

歡迎star。

如果有錯(cuò)誤的地方歡迎指正。

看看這個(gè)有著深不可測(cè)的魔力的this到底是個(gè)什么玩意兒 ~

在傳統(tǒng)面向?qū)ο蟮恼Z(yǔ)言中，比如Java，this關(guān)鍵字用來表示當(dāng)前對(duì)象本身，或當(dāng)前對(duì)象的一個(gè)實(shí)例，通過this關(guān)鍵字可以獲得當(dāng)前對(duì)象的屬性和調(diào)用方法。

在JavaScript中，this似乎表現(xiàn)地略有不同，這也是讓人“討厭”的地方~

ECMAScript規(guī)范中這樣寫：

this 關(guān)鍵字執(zhí)行為當(dāng)前執(zhí)行環(huán)境的 ThisBinding。

MDN上這樣寫：

In most cases, the value of this is determined by how a function is called.
在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了this的值。

可以這樣理解，在JavaScript中，this的指向是調(diào)用時(shí)決定的，而不是創(chuàng)建時(shí)決定的，這就會(huì)導(dǎo)致this的指向會(huì)讓人迷惑，簡(jiǎn)單來說，this具有運(yùn)行期綁定的特性。

參考資料：this - JavaScript | MDN

來看看不同的情況五花八門的this吧~

首先需要理解調(diào)用位置，調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置，而不是聲明的位置。

通過分析調(diào)用棧（到達(dá)當(dāng)前執(zhí)行位置所調(diào)用的所有函數(shù)）可以找到調(diào)用位置。

function baz(){
  console.log("baz");
  bar();
}
function bar(){
  console.log("bar");
  foo();
}
function foo(){
  console.log("foo");
}
baz();

當(dāng)我們調(diào)用baz()時(shí)，它會(huì)以此調(diào)用baz()→bar()→foo()。

對(duì)于foo()：調(diào)用位置是在bar()中。
對(duì)于bar()：調(diào)用位置是在baz()中。
而對(duì)于baz()：調(diào)用位置是全局作用域中。

可以看出，調(diào)用位置應(yīng)該是當(dāng)前正在執(zhí)行的函數(shù)的前一個(gè)調(diào)用中。

在全局執(zhí)行上下文中this都指代全局對(duì)象。

this等價(jià)于window對(duì)象

var === this. === winodw.

console.log(window === this); // true
var a = 1;
this.b = 2;
window.c = 3;
console.log(a + b + c); // 6

在瀏覽器里面this等價(jià)于window對(duì)象，如果你聲明一些全局變量，這些變量都會(huì)作為this的屬性。

在函數(shù)內(nèi)部，this的值取決于函數(shù)被調(diào)用的方式。

this指向全局變量。

function foo(){
  return this;
}
console.log(foo() === window); // true

this指向綁定的對(duì)象上。

var person = {
  name: "axuebin",
  age: 25
};
function say(job){
  console.log(this.name+":"+this.age+" "+job);
}
say.call(person,"FE"); // axuebin:25
say.apply(person,["FE"]); // axuebin:25

可以看到，定義了一個(gè)say函數(shù)是用來輸出name、age和job，其中本身沒有name和age屬性，我們將這個(gè)函數(shù)綁定到person這個(gè)對(duì)象上，輸出了本屬于person的屬性，說明此時(shí)this是指向?qū)ο?b>person的。

如果傳入一個(gè)原始值（字符串、布爾或數(shù)字類型）來當(dāng)做this的綁定對(duì)象， 這個(gè)原始值會(huì)被轉(zhuǎn)換成它的對(duì)象形式（new String()），這通常被稱為“裝箱”。

call和apply從this的綁定角度上來說是一樣的，唯一不同的是它們的第二個(gè)參數(shù)。

this將永久地被綁定到了bind的第一個(gè)參數(shù)。

bind和call、apply有些相似。

var person = {
  name: "axuebin",
  age: 25
};
function say(){
  console.log(this.name+":"+this.age);
}
var f = say.bind(person);
console.log(f());

所有的箭頭函數(shù)都沒有自己的this，都指向外層。

關(guān)于箭頭函數(shù)的爭(zhēng)論一直都在，可以看看下面的幾個(gè)鏈接：

ES6 箭頭函數(shù)中的 this？你可能想多了（翻譯）

關(guān)于箭頭函數(shù)this的理解幾乎完全是錯(cuò)誤的 #150

MDN中對(duì)于箭頭函數(shù)這一部分是這樣描述的：

An arrow function does not create its own this, the this value of the enclosing execution context is used.
箭頭函數(shù)會(huì)捕獲其所在上下文的this值，作為自己的this值。

function Person(name){
  this.name = name;
  this.say = () => {
    var name = "xb";
    return this.name;
  }
}
var person = new Person("axuebin");
console.log(person.say()); // axuebin

箭頭函數(shù)常用語(yǔ)回調(diào)函數(shù)中，例如定時(shí)器中：

function foo() {  
  setTimeout(()=>{
    console.log(this.a);
  },100)
}
var obj = {
  a: 2
}
foo.call(obj);

附上MDN關(guān)于箭頭函數(shù)this的解釋：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不綁定_this

this指向調(diào)用函數(shù)的對(duì)象。

var person = {
  name: "axuebin",
  getName: function(){
    return this.name;
  }
}
console.log(person.getName()); // axuebin

這里有一個(gè)需要注意的地方。。。

var name = "xb";
var person = {
  name: "axuebin",
  getName: function(){
    return this.name;
  }
}
var getName = person.getName;
console.log(getName()); // xb

發(fā)現(xiàn)this又指向全局變量了，這是為什么呢？

還是那句話，this的指向得看函數(shù)調(diào)用時(shí)。

this被綁定到正在構(gòu)造的新對(duì)象。

通過構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象其實(shí)執(zhí)行這樣幾個(gè)步驟：

創(chuàng)建新對(duì)象

將this指向這個(gè)對(duì)象

給對(duì)象賦值（屬性、方法）

返回this

所以this就是指向創(chuàng)建的這個(gè)對(duì)象上。

function Person(name){
  this.name = name;
  this.age = 25;
  this.say = function(){
    console.log(this.name + ":" + this.age);
  }
}
var person = new Person("axuebin");
console.log(person.name); // axuebin
person.say(); // axuebin:25

this指向觸發(fā)事件的元素，也就是始事件處理程序所綁定到的DOM節(jié)點(diǎn)。

var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
  console.log(this);
  console.log(this === e.target); // true
})

this指向所在的DOM元素

Click Me

在許多情況下JQuery的this都指向DOM元素節(jié)點(diǎn)。

$(".btn").on("click",function(){
  console.log(this); 
});

如果要判斷一個(gè)函數(shù)的this綁定，就需要找到這個(gè)函數(shù)的直接調(diào)用位置。然后可以順序按照下面四條規(guī)則來判斷this的綁定對(duì)象：

由new調(diào)用：綁定到新創(chuàng)建的對(duì)象

由call或apply、bind調(diào)用：綁定到指定的對(duì)象

由上下文對(duì)象調(diào)用：綁定到上下文對(duì)象

默認(rèn)：全局對(duì)象

注意：箭頭函數(shù)不使用上面的綁定規(guī)則，根據(jù)外層作用域來決定this，繼承外層函數(shù)調(diào)用的this綁定。