摘要：應(yīng)該算是前期比較容易混淆的一個(gè)關(guān)鍵字了，在這里，我就打算按照我的理解來說一下首先呢，的值是跟運(yùn)行時(shí)被調(diào)用的位置相關(guān)的，而不是詞法作用域。來一個(gè)例子在瀏覽器中執(zhí)行，會(huì)發(fā)現(xiàn)，如果作為一個(gè)函數(shù)多帶帶調(diào)用，那么指向的就是全局對象。

this應(yīng)該算是前期比較容易混淆的一個(gè)關(guān)鍵字了，在這里，我就打算按照我的理解來說一下

首先呢，this的值是跟運(yùn)行時(shí)被調(diào)用的位置相關(guān)的，而不是詞法作用域。

也就是說，他的綁定的值很可能是動(dòng)態(tài)的，不同的調(diào)用位置，很可能值就不一樣，比如說：

function foo() {
  console.log(this.a);
}
var a = 2;
var obj = {
  a: 3,
  foo,
}
foo();   //2
obj.foo();   //3
var c = obj.foo;
c();   //2

然后你會(huì)驚訝的發(fā)現(xiàn)，foo()通過不同的形式調(diào)用，他最終的值是不一樣的，咱們這一節(jié)主要就來講一講他們里面的這些綁定的規(guī)則

默認(rèn)綁定

獨(dú)立的函數(shù)調(diào)用，它的作用域是作用在全局的，這種綁定規(guī)則最常見并且是優(yōu)先級(jí)最低的一種綁定規(guī)則。來一個(gè)例子

function foo() {
  console.log(this.a);   //2
  console.log(this === window);  //true
}
var a = 2;
foo();

在瀏覽器中執(zhí)行，會(huì)發(fā)現(xiàn)，如果foo()作為一個(gè)函數(shù)多帶帶調(diào)用，那么this指向的就是全局對象windows。

但是呢，也有一種例外，如果函數(shù)使用的嚴(yán)格模式的話，那么全局對象講無法使用默認(rèn)綁定，this將會(huì)綁定到undefined，還是剛才的例子：

function foo() {
  "use strict"
  console.log(this.a);
  console.log(this === window);
}
var a = 2;
foo();  //Uncaught TypeError: Cannot read property "a" of undefined

可以看到，foo直接拋出一個(gè)error，說this是undefined，取不到a，如果用到嚴(yán)格模式的時(shí)候，可以稍微注意下這個(gè)區(qū)別

咱們剛剛的例子，說的是函數(shù)內(nèi)用嚴(yán)格模式的話，講無法使用默認(rèn)綁定，那么如果是在函數(shù)調(diào)用位置用嚴(yán)格模式，會(huì)受影響嗎

function foo() {
  console.log(this.a);      //2
  console.log(this === window);   //true
}
var a = 2;
(function () {
  "use strict"
  foo();
})();

很明顯，可以看出，是不受影響的，還有一個(gè)問題，如果把var定義變成let會(huì)怎么樣呢

function foo() {
  console.log(this.a);      //undefined
  console.log(this === window);   //true
}
let a = 2;
(function () {
  "use strict"
  foo();
})();

也就是說，let定義并不會(huì)加到全局變量中，這個(gè)和var的區(qū)別需要稍微留意一下

隱式綁定

這一條規(guī)則考慮的是是否有上下文對象，舉個(gè)例子

function foo() {
  console.log(this.a);  //2
  console.log(this === obj); // true
}
var obj = {
  a: 2,
  foo,
}
obj.foo();

在這種情況下，foo會(huì)使用obj的上下文對象來引用函數(shù)，此時(shí)的this指向的就是obj。

那么如果是嵌套對象這種的，會(huì)怎么處理呢？

function foo() {
  console.log(this.a);   // 1
  console.log(this === obj) //  true
  console.log(this === obj1) // fale
}
var obj = {
  a: 1,
  foo,
};
var obj1 = {
  a: 2,
  obj,
}
obj1.obj.foo();

可以看到，實(shí)際上此時(shí)foo中的this指向了離他最近的對象obj，也就是說，對象屬性引用鏈的最后一層會(huì)影響它的調(diào)用位置

還有一種情況。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 3,
  foo,
}
var a = 2;
var f = obj.foo;
f(); // 2

這種情況下，雖然f是obj.foo的引用，但是最后依然用的是默認(rèn)綁定，而不是隱式綁定，所以說呢，咱們可以這么理解，雖然他是對象中函數(shù)的引用，但是在執(zhí)行的時(shí)候，調(diào)用的方式確是函數(shù)調(diào)用的方式，不是對象.屬性()的方式，這塊在使用的時(shí)候需要注意一下

顯式綁定

很簡單，顯式綁定就是手動(dòng)直接改變其this指向的一種方式，這個(gè)主要是用幾種api來實(shí)現(xiàn)的

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
foo.call(obj);
foo.apply(obj);
var f = foo.bind(obj);
f();

這個(gè)就是顯式綁定的常見的三種形式

這三種形式的話，call和apply差不多，就不展開了，詳情看文檔就行，咱們仔細(xì)看一下bind函數(shù)，來在看一個(gè)例子

function foo(num1, num2) {
  console.log(num1 + num2);  //5
  console.log(this === obj);    // true
}
var obj = {
  a: 1,
};
var f = foo.bind(obj, 2);
f(3);

這個(gè)可以看出，bind的用法和call以及apply還是有一些差別的。

注意，如果顯式綁定傳入的是null或者是undefined的話，將會(huì)使用默認(rèn)綁定規(guī)則，舉個(gè)例子

function foo() {
  console.log( this.a );
}
var a = 2;
foo.call( null ); // 2

new綁定

這個(gè)主要是new 函數(shù)()的綁定形式的，這個(gè)的this指向的是函數(shù)構(gòu)造出的那個(gè)對象，new的時(shí)候，它的執(zhí)行過程可以大概執(zhí)行以下幾步

創(chuàng)建一個(gè)全新的對象

這個(gè)新對象會(huì)被執(zhí)行prototype連接

新對象綁定到函數(shù)調(diào)用的this

如果函數(shù)沒有返回其他對象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對象

注意最后一句話，如果函數(shù)沒有返回對象，那么就會(huì)返回函數(shù)調(diào)用的新對象，如果返回了一個(gè)對象呢，那么結(jié)果就是直接返回這個(gè)對象

var abc = {
  a: 10
}
function foo() {
  return abc;
}
foo.prototype = {
  b: 20
};
var a = new foo();
console.log(a === abc);   // true
console.log(a.b);         // undefined
function bar() {
  this.a = 10;
}
bar.prototype = {
  b: 20
};
var b = new bar();
console.log(b.a);   //  10
console.log(b.b);   // 20

以上四種常見的this綁定方式已經(jīng)介紹的差不多了，那么問題來了，誰的優(yōu)先級(jí)更高呢

很明顯，默認(rèn)綁定的優(yōu)先級(jí)最低，就不展開說了

顯式綁定與隱式綁定哪個(gè)優(yōu)先級(jí)高呢，舉個(gè)例子

function foo() {
  console.log( this. a );
}
var obj1 = {
  a: 2,
  foo: foo
};
var obj2 = {
  a: 3,
  foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

很明顯，顯式綁定優(yōu)先級(jí)要高于隱式綁定

那么new綁定和顯式綁定誰更高呢，來再看個(gè)例子

function foo(something) {
  this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

很明顯，new的優(yōu)先級(jí)會(huì)更高

所以，這樣的話，優(yōu)先級(jí)排序就出來了，分別為

new綁定 　>　顯式綁定?。尽‰[式綁定?。尽∧J(rèn)綁定

以上就是大家常用到的幾種，不過es6出現(xiàn)了一種箭頭函數(shù)，箭頭函數(shù)理論上不能應(yīng)用上面四種的任意一種，它的this是根據(jù)代碼的詞法作用域來走的，比如說

function foo() {
  return (a) => {
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2

結(jié)果已經(jīng)很明顯了，

好了，以上內(nèi)容就講完了，通過我的一些講解，是不是有一點(diǎn)理解了呢，如果有任何的不同意見，歡迎討論哦

參考書籍《你不知道的Javascript》上卷

轉(zhuǎn)載自：http://www.lht.ren/article/4