摘要：在等面向?qū)ο蟮恼Z言中，關(guān)鍵字的含義是明確且具體的，即指代當(dāng)前對(duì)象。一般在編譯期確定下來，或稱為編譯期綁定。無論是用還是這種方式，都取決于傳入該函數(shù)的對(duì)象。使用方法綁定使用在創(chuàng)建時(shí)綁定指針。如果是行內(nèi)的事件監(jiān)聽者，指針會(huì)被設(shè)置為其所在的元素

在 Java 等面向?qū)ο蟮恼Z言中，this 關(guān)鍵字的含義是明確且具體的，即指代當(dāng)前對(duì)象。一般在編譯期確定下來，或稱為編譯期綁定。而在 JavaScript 中，this 是動(dòng)態(tài)綁定，或稱為運(yùn)行期綁定的，這就導(dǎo)致 JavaScript 中的 this 關(guān)鍵字有能力具備多重含義，變得有點(diǎn)隨意。而在ES6中又引入了Arrow Function以及Class，它們對(duì)于this指針也帶來了一定的影響。

在任何函數(shù)之外的全局環(huán)境中，不管在不在strict模式中，this指針往往指向一個(gè)全局變量。

console.log(this.document === document); // true

// In web browsers, the window object is also the global object:
console.log(this === window); // true

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

在某個(gè)函數(shù)中，this的值取決于該函數(shù)的調(diào)用者。無論是用hello("world”)還是call這種方式，都取決于傳入該函數(shù)的對(duì)象。不過，在ES5的嚴(yán)格或者不嚴(yán)格模式下，同樣的調(diào)用方式會(huì)有不同的結(jié)果。

function hello(thing) {  
  console.log("Hello " + thing);
}

// this:
hello("world")

// desugars to:
hello.call(window, "world");  

而如果是strict模式下：

// this:
hello("world")

// desugars to:
hello.call(undefined, "world");  

另一種常用的調(diào)用函數(shù)的方法就是在object中調(diào)用：

function hello(thing) {  
  console.log(this + " says hello " + thing);
}

person = { name: "Brendan Eich" }  
person.hello = hello;

person.hello("world") // still desugars to person.hello.call(person, "world") [object Object] says hello world

hello("world") // "[object DOMWindow]world"  

很多時(shí)候，需要為某個(gè)函數(shù)指定一個(gè)固定的this對(duì)象，最簡(jiǎn)單的方式即是使用閉包來獲取一個(gè)不變的this對(duì)象。

var person = {  
  name: "Brendan Eich",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

var boundHello = function(thing) { return person.hello.call(person, thing); }

boundHello("world");  

不過，這種方式仍然存在著一定的問題，ES5為Function對(duì)象引入了一個(gè)新的bind方法來解決這個(gè)問題：

var boundHello = person.hello.bind(person);  
boundHello("world") // "Brendan Eich says hello world"  

這種方式在設(shè)置回調(diào)函數(shù)中的this指針的時(shí)候會(huì)起到很大的作用，特別是在React中，為了保證指針的穩(wěn)定性，往往需要為內(nèi)置方法設(shè)置bind。

var person = {  
  name: "Alex Russell",
  hello: function() { console.log(this.name + " says hello world"); }
}

$("#some-div").click(person.hello.bind(person));

// when the div is clicked, "Alex Russell says hello world" is printed

在 JavaScript 中函數(shù)也是對(duì)象，對(duì)象則有方法，apply 和 call 就是函數(shù)對(duì)象的方法。這兩個(gè)方法異常強(qiáng)大，他們?cè)试S切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對(duì)象。很多 JavaScript 中的技巧以及類庫都用到了該方法。讓我們看一個(gè)具體的例子：

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    } 
 } 

 var p1 = new Point(0, 0); 
 var p2 = {x: 0, y: 0}; 
 p1.moveTo(1, 1); 
 p1.moveTo.apply(p2, [10, 10]);

在這樣一個(gè)回調(diào)函數(shù)中，回調(diào)函數(shù)的this指針是由調(diào)用者決定的，完整的forEach聲明如下：array.forEach(callback[, thisArg])，這個(gè)傳入的thisArg即是回調(diào)的調(diào)用者。

var o={
   v:"hello",
   p:["a1","a2"],
   f:function f(){
      this.p.forEach(function (item){
           console.log(this.v+" "+item);
      });
   }
}

o.f();
//undefined a1
//undefined a2

Arrow Function是ES6新增的特性，很類似于Java或者C#中的Lambda表達(dá)式。Arrow函數(shù)中的this指針在創(chuàng)建時(shí)就被綁定到了閉合的作用域內(nèi)，不會(huì)收到new、bind、call以及apply這些方法的影響。

var o = {
  traditionalFunc: function () {
    // Normal function, bound as expected
    console.log("traditionalFunc this === o?", this === o);
  },
  arrowFunc: () => {
    // Arrow function, bound to scope where it"s created
    console.log("arrowFunc this === o?", this === o);
    console.log("arrowFunc this === window?", this === window);
  }
};

o.traditionalFunc();
// traditionalFunc this === o? true

o.arrowFunc();
// arrowFunc this === o? false
// arrowFunc this === window? true

上述代碼中的arrowFunc隸屬于o對(duì)象，但是在window的作用域中被創(chuàng)建，因此，最終arrow函數(shù)中的this指針的值等于window對(duì)象。ES5中的對(duì)于this的控制已然非常復(fù)雜，特別是在處理異步代碼中如何傳入合適的this對(duì)象也是一件麻煩事，如下文所示:

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
    callback(param);
  }, 1);
};

// With a traditional function if we don"t control 
// the context then can we lose control of `this`.
var o = {
  doSomething: function () {
    // Here we pass `o` into the async function, 
    // expecting it back as `param`
    asyncFunction(o, function (param) {
      // We made a mistake of thinking `this` is 
      // the instance of `o`.
      console.log("param === this?", param === this);
    });
  }
};

o.doSomething(); // param === this? false

為了綁定上述代碼中的this指針，一般來說有三個(gè)辦法：

為this指針創(chuàng)建一個(gè)固定的引用。

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
    callback(param);
  }, 1);
};

// Define a reference to `this` outside of the callback, 
// but within the callback"s lexical scope
var o = {
  doSomething: function () {
    var self = this;
    // Here we pass `o` into the async function, 
    // expecting it back as `param`
    asyncFunction(o, function (param) {
      console.log("param === this?", param === self);
    });
  }
};

o.doSomething(); // param === this? true

使用bind方法綁定this

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
    callback(param);
  }, 1);
};

// Here we control the context of the callback using
// `bind` ensuring `this` is correct
var o = {
  doSomething: function () {
    // Here we pass `o` into the async function, 
    // expecting it back as `param`
    asyncFunction(o, function (param) {
      console.log("param === this?", param === this);
    }.bind(this));
  }
};

o.doSomething(); // param === this? true

使用Arrow Function在創(chuàng)建時(shí)綁定this指針。

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
    callback(param);
  }, 1);
};

var o = {
  doSomething: function () {
    // Here we pass `o` into the async function, 
    // expecting it back as `param`. 
    //
    // Because this arrow function is created within  
    // the scope of `doSomething` it is bound to this 
    // lexical scope.
    asyncFunction(o, (param) => {
      console.log("param === this?", param === this);
    });
  }
};

o.doSomething(); // param === this? true

當(dāng)某個(gè)函數(shù)作為事件監(jiān)聽器時(shí)，它的this值往往被設(shè)置為它的調(diào)用者。

// When called as a listener, turns the related element blue
function bluify(e){
  // Always true
  console.log(this === e.currentTarget); 
  // true when currentTarget and target are the same object
  console.log(this === e.target);
  this.style.backgroundColor = "#A5D9F3";
}

// Get a list of every element in the document
var elements = document.getElementsByTagName("*");

// Add bluify as a click listener so when the
// element is clicked on, it turns blue
for(var i=0 ; i
如果是行內(nèi)的事件監(jiān)聽者，this指針會(huì)被設(shè)置為其所在的DOM元素：

  Show this