Javascript基礎之-this

this應該算是前期比較容易混淆的一個關鍵字了，在這裡，我就打算按照我的了解來說一下

首先呢，this的值是跟運作時被調用的位置相關的，而不是詞法作用域。

也就是說，他的綁定的值很可能是動态的，不同的調用位置，很可能值就不一樣，比如說：

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
           

然後你會驚訝的發現，foo()通過不同的形式調用，他最終的值是不一樣的，咱們這一節主要就來講一講他們裡面的這些綁定的規則

預設綁定

獨立的函數調用，它的作用域是作用在全局的，這種綁定規則最常見并且是優先級最低的一種綁定規則。來一個例子

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

在浏覽器中執行，會發現，如果foo()作為一個函數單獨調用，那麼this指向的就是全局對象windows。

但是呢，也有一種例外，如果函數使用的嚴格模式的話，那麼全局對象講無法使用預設綁定，this将會綁定到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直接抛出一個error，說this是undefined，取不到a，如果用到嚴格模式的時候，可以稍微注意下這個差別

咱們剛剛的例子，說的是函數内用嚴格模式的話，講無法使用預設綁定，那麼如果是在函數調用位置用嚴格模式，會受影響嗎

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

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

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

也就是說，let定義并不會加到全局變量中，這個和var的差別需要稍微留意一下

隐式綁定

這一條規則考慮的是是否有上下文對象，舉個例子

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

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

那麼如果是嵌套對象這種的，會怎麼處理呢？

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();
           

可以看到，實際上此時foo中的this指向了離他最近的對象obj，也就是說，對象屬性引用鍊的最後一層會影響它的調用位置

還有一種情況。

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

這種情況下，雖然f是obj.foo的引用，但是最後依然用的是預設綁定，而不是隐式綁定，是以說呢，咱們可以這麼了解，雖然他是對象中函數的引用，但是在執行的時候，調用的方式确是函數調用的方式，不是對象.屬性()的方式，這塊在使用的時候需要注意一下

顯式綁定

很簡單，顯式綁定就是手動直接改變其this指向的一種方式，這個主要是用幾種api來實作的

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

這個就是顯式綁定的常見的三種形式

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

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);
           

這個可以看出，bind的用法和call以及apply還是有一些差别的。

注意，如果顯式綁定傳入的是null或者是undefined的話，将會使用預設綁定規則，舉個例子

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

new綁定

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

建立一個全新的對象

這個新對象會被執行prototype連接配接

新對象綁定到函數調用的this

如果函數沒有傳回其他對象，那麼new表達式中的函數調用會自動傳回這個新對象

注意最後一句話，如果函數沒有傳回對象，那麼就會傳回函數調用的新對象，如果傳回了一個對象呢，那麼結果就是直接傳回這個對象

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綁定方式已經介紹的差不多了，那麼問題來了，誰的優先級更高呢

很明顯，預設綁定的優先級最低，就不展開說了

顯式綁定與隐式綁定哪個優先級高呢，舉個例子

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
           

很明顯，顯式綁定優先級要高于隐式綁定

那麼new綁定和顯式綁定誰更高呢，來再看個例子

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的優先級會更高

是以，這樣的話，優先級排序就出來了，分别為

new綁定 　>　顯式綁定　＞　隐式綁定　＞　預設綁定

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

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
           

結果已經很明顯了，

好了，以上内容就講完了，通過我的一些講解，是不是有一點了解了呢，如果有任何的不同意見，歡迎讨論哦

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

轉載自：

http://www.lht.ren/article/4/