摘要：對(duì)象方法中的當(dāng)以對(duì)象里的方法的方式調(diào)用函數(shù)時(shí)，它們的是調(diào)用該函數(shù)的對(duì)象。注意，在何處或者如何定義調(diào)用函數(shù)完全不會(huì)影響到的行為。在這次執(zhí)行期間，函數(shù)中的將指向。

原文鏈接

與其他語(yǔ)言相比，函數(shù)的this關(guān)鍵字在JavaScript中的行為略有不同。并且它在嚴(yán)格模式和非嚴(yán)格模式之間也有一些區(qū)別。

在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了this的值。this不能在執(zhí)行期間被賦值，在每次函數(shù)被調(diào)用時(shí)this的值也可能會(huì)不同。ES5引入了bind方法來(lái)設(shè)置函數(shù)的this值，而不用考慮函數(shù)如何被調(diào)用的。

var name = "caibaojian.com"; 
var person = {
  name: "kang",
  pro: {
    name: "Michael",
    getName: function() {
      return this.name;
    }
  }
};
console.log(person.pro.getName()); // Michael
var pepole = person.pro.getName;
console.log(pepole()); // caibaojian.com

var name = "caibaojian.com";
var person = {
  name: "kang",
  pro: {
    name: "Michael",
    getName: function() {
      console.log(this);
      return this.name;
    }
  }
};
console.log(person.pro.getName()); // Object { name: "...", getName: () }, Michael
var pepole = person.pro.getName;
console.log(pepole()); // Window, caibaojian.com

"use strict";
var name = "caibaojian.com"; 
var person = {
  name: "kang",
  pro: {
    name: "Michael",
    getName: function() {
      console.log(this);
      return this.name;
    }
  }
};
console.log(person.pro.getName()); // Object { name: "...", getName: () }, Michael
var pepole = person.pro.getName;
console.log(pepole()); // undefined

var name = "caibaojian.com",
    person = {
      name : "kang",
      getName : function(){
  　    return function(){
    　    return this.name;
  　    };
      }
    };

console.log(person.getName()()); // caibaojian.com

在全局運(yùn)行上下文中（在任何函數(shù)體外部），this指代全局對(duì)象，無(wú)論是否在嚴(yán)格模式下。在瀏覽器中，全局對(duì)象為window對(duì)象。

console.log(this.document === document); // true
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37

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

在非嚴(yán)格模式下，this的值不會(huì)在函數(shù)執(zhí)行時(shí)被設(shè)置，此時(shí)的this的值會(huì)默認(rèn)設(shè)置為全局對(duì)象。

function foo(){
  return this;
}

foo() === window; // true

在嚴(yán)格模式下，this將保持他進(jìn)入執(zhí)行環(huán)境時(shí)的值，所以下面的this將會(huì)默認(rèn)為undefined

function foo(){
  "use strict"; // 嚴(yán)格模式
  return this;
}

foo() === undefined; // true

在嚴(yán)格模式下，如果this未被執(zhí)行的上下文環(huán)境定義，那么它將會(huì)默認(rèn)為undefined。

當(dāng)以對(duì)象里的方法的方式調(diào)用函數(shù)時(shí)，它們的this是調(diào)用該函數(shù)的對(duì)象。

下面的例子中，當(dāng)obj.f()被調(diào)用時(shí)，函數(shù)內(nèi)的this將綁定到obj對(duì)象。

var obj = {
  prop: 37,
  foo: function() {
    return this.prop;
  }
};

console.log(obj.foo()); // 37

注意，在何處或者如何定義調(diào)用函數(shù)完全不會(huì)影響到this的行為。

在上一個(gè)例子中，我們?cè)诙xobj的時(shí)候?yàn)槠涑蓡Tfoo定義了一個(gè)匿名函數(shù)。但是，我們也可以首先定義函數(shù)然后再將其附屬到obj.foo。這樣做this的取值也和上面一致：

var obj = { prop: 37 };

function independent() {
  return this.prop;
}

obj.foo = independent;

console.log(obj.foo()); // 37

這說(shuō)明this的值只與函數(shù)foo作為obj的成員被調(diào)用有關(guān)系。

類似的，this的綁定只受最靠近的成員引用的影響。

在下面的這個(gè)例子中，我們把一個(gè)方法g當(dāng)作對(duì)象obj.b的函數(shù)調(diào)用。在這次執(zhí)行期間，函數(shù)中的this將指向obj.b。事實(shí)上，這與對(duì)象本身的成員沒(méi)有多大關(guān)系，最靠近的引用才是最重要的。

var obj = { prop: 37 };

function independent() {
  return this.prop;
}

obj.b = {
  g: independent,
  prop: 42
};

console.log(obj.b.g()); // 42

相同的概念在定義在原型鏈中的方法也是一致的。如果該方法存在于一個(gè)對(duì)象的原型鏈上，那么this指向的是調(diào)用這個(gè)方法的對(duì)象，表現(xiàn)得好像是這個(gè)方法就存在于這個(gè)對(duì)象上一樣。

var obj = {
  f : function(){ 
    return this.a + this.b; 
  }
};
var p = Object.create(obj);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

在這個(gè)例子中，對(duì)象p沒(méi)有屬于它自己的f屬性，它的f屬性繼承自它的原型。但是這對(duì)于最終在obj中找到f屬性的查找過(guò)程來(lái)說(shuō)沒(méi)有關(guān)系；查找過(guò)程首先從p.f的引用開(kāi)始，所以函數(shù)中的this指向p。也就是說(shuō)，因?yàn)?b>f是作為p的方法調(diào)用的，所以它的this指向了p。這是JavaScript的原型繼承中的一個(gè)有趣的特性。

相同的概念也適用時(shí)的函數(shù)作為一個(gè)getter或者setter調(diào)用。作為getter或setter函數(shù)都會(huì)綁定this到從設(shè)置屬性或得到屬性的那個(gè)對(duì)象。

function modulus(){
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var obj = {
  re: 1,
  im: -1,
  get phase(){
    return Math.atan2(this.im, this.re);
  }
};

Object.defineProperty(obj, "modulus", {
  get: modulus,
  enumerable: true,
  configurable: true
});

console.log(obj.phase, obj.modulus); // -0.785 1.414

當(dāng)一個(gè)函數(shù)被作為一個(gè)構(gòu)造函數(shù)來(lái)使用（使用new關(guān)鍵字），它的this與即將被創(chuàng)建的新對(duì)象綁定。

注意：當(dāng)構(gòu)造器返回的默認(rèn)值是一個(gè)this引用的對(duì)象時(shí)，可以手動(dòng)設(shè)置返回其他的對(duì)象，如果返回值不是一個(gè)對(duì)象，返回this。

function Fn(){
  this.a = 37;
}

var obj = new Fn();
console.log(obj.a); // 37

function Foo(){
  this.a = 37;
  return { a: 38 };
}

obj = new Foo();
console.log(obj.a); // 38

當(dāng)一個(gè)函數(shù)的函數(shù)體中使用了this關(guān)鍵字時(shí)，通過(guò)所有函數(shù)都從Function對(duì)象的原型中繼承的call()方法和apply()方法調(diào)用時(shí)，它的值可以綁定到一個(gè)指定的對(duì)象上。

function add(c, d){
  return console.log(this.a + this.b + c + d);
}

var obj = {
  a: 1,
  b: 3
};

add.call(obj, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(obj, [10, 20]); // 1 + 3 + 10 + 20 = 34

使用call和apply函數(shù)的時(shí)候要注意，如果傳遞的this值不是一個(gè)對(duì)象，JavaScript將會(huì)嘗試使用內(nèi)部 ToObject操作將其轉(zhuǎn)換為對(duì)象。因此，如果傳遞的值是一個(gè)原始值比如7或foo，那么就會(huì)使用相關(guān)構(gòu)造函數(shù)將它轉(zhuǎn)換為對(duì)象，所以原始值7通過(guò)new Number(7)被轉(zhuǎn)換為對(duì)象，而字符串foo使用new String("foo")轉(zhuǎn)化為對(duì)象，例如：

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]

ECMAScript 5引入了Function.prototype.bind。調(diào)用fn.bind(someObject)會(huì)創(chuàng)建一個(gè)與fn具有相同函數(shù)體和作用域的函數(shù)，但是在這個(gè)新函數(shù)中，this將永久地被綁定到了bind的第一個(gè)參數(shù)，無(wú)論這個(gè)函數(shù)是如何被調(diào)用的。

function fn(){
  return this.a;
}

var g = fn.bind({ a: "azerty" });
console.log(g()); // "azerty"

var obj = {
  a: 37,
  foo: fn,
  go: g
};
console.log(obj.foo(), obj.go()); // 37, "azerty"

當(dāng)函數(shù)被用作事件處理函數(shù)時(shí)，它的this指向觸發(fā)事件的元素（一些瀏覽器在動(dòng)態(tài)添加監(jiān)聽(tīng)器時(shí)不遵守這個(gè)約定，除非使用addEventListener）。

// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName("*");

for(var i = 0; i < elements.length; i++){
  // 當(dāng)元素被點(diǎn)擊時(shí)，就會(huì)變成藍(lán)色
  elements[i].addEventListener("click", function (e) {
    e.stopPropagation();
    console.log(this);
    console.log(e.currentTarget);
    console.log(e.target);
    // 上面3個(gè)值是一樣的
    this.style.backgroundColor = "#A5D9F3";
  });
}

當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí)，它的this指向監(jiān)聽(tīng)器所在的DOM元素：

? Show this

上面的alert會(huì)顯示button。注意只有外層代碼中的this是這樣設(shè)置的：

  Show inner this

在這種情況下，沒(méi)有設(shè)置內(nèi)部函數(shù)的this，所以它指向global/window對(duì)象（即非嚴(yán)格模式下調(diào)用的函數(shù)未設(shè)置this時(shí)指向的默認(rèn)對(duì)象）。