Javascript 中的 this 簡單總結

在全局中執行

🤔 this在全局中是什麼。

首先，瀏覽器中：

console.log(this);
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

可見，在瀏覽器中 this指向window

其次，在node中：

console.log(this);
//global

在node中，this指向global

總結：在全局做用域中它的 this 執行當前的全局對象（瀏覽器端是 Window，node 中是 global）。

在函數中執行

純粹的函數調用

 

function test() {
  console.log(this);
};
 
test();
 
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

 

嚴格模式 ‘use strict’

「use strict」

function foo(){
    console.log(this);
}

foo();
//undefined

以上還能夠放在自執行函數中會更好些，避免污染全局

(functuon(){
    "use strict"
    console.log(this);
})();

//undefined

做爲對象的方法調用

 

 

var obj = {
  name: 'lmy',
  foo: function() {
    console.log(this.name);
  }
}
 
obj.foo();
 
// 'lmy'

 

這時候，this 指向當前的這個對象；

咱們還能夠這麼作：

function test() {
  console.log(this.name);
}
var obj = {
  name: 'lmy',
  foo: test
}
 
obj.foo();
 
// 'lmy'

若是把對象的方法直接複製給一個全局的變量，請看

var obj = {
  name: 'lmy',
  foo: function() {
    console.log(this);
  }
}
 
var test = obj.foo;
test();
 
// Window

能夠看到，this指向window，此時test指向obj.foo函數的引用，此時與obj對象無關，test是全局變量，所以，test()做爲普通函數來調用，所以this指向window。

還有一些坑

var obj = {
  name: 'lmy',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    setTimeout(this.foo, 1000);
  }
}
 
obj.foo2();

執行這段代碼咱們會發現兩次打印出來的 this 是不同的：

第一次是 foo2 中直接打印 this，這裏指向 obj 這個對象，咱們毋庸置疑；

可是在 setTimeout 中執行的 this.foo ，卻指向了全局對象，這裏不是把它看成函數的方法使用嗎？這一點常常讓不少初學者疑惑； 
其實，setTimeout 也只是一個函數而已，函數必然有可能須要參數，咱們把 this.foo 看成一個參數傳給 setTimeout 這個函數，就像它須要一個 fun 參數，在傳入參數的時候，其實作了個這樣的操做 fun = this.foo，看到沒有，這裏咱們直接把 fun 指向 this.foo 的引用；執行的時候實際上是執行了 fun() 因此已經和 obj 無關了，它是被看成普通函數直接調用的，所以 this 指向全局對象。

這個問題是不少異步回調函數中廣泛會碰到的；

解決

爲了解決這個問題，咱們能夠利用 存儲變量的方式（閉包？）來處理：

var obj = {
  name: 'lmy',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    var _this = this;
    setTimeout(function() {
      console.log(this);  // Window
 
      console.log(_this);  // Object {name: "lmy"}
    }, 1000);
  }
}
 
obj.foo2();

能夠看到直接用 this 仍然是 Window；由於 foo2 中的 this 是指向 obj，咱們能夠先用一個變量 _this 來儲存，而後在回調函數中使用 _this，就能夠指向當前的這個對象了；

setTimeout 的另外一個坑

若是直接執行回調函數而沒有綁定做用域，那麼它的 this 是指向全局對象(window)，在嚴格模式下會指向 undefined，然而在 setTimeout 中的回調函數在嚴格模式下卻表現出不一樣

'use strict';
 
function foo() {
  console.log(this);
}
 
setTimeout(foo, 1);
 
// window

如上代碼顯示，setTimeout 方法在調用傳入函數的時候，若是這個函數沒有指定了的 this，那麼它會作一個隱式的操做—-自動地注入全局上下文，等同於調用 foo.apply(window) 而非 foo()；

固然，若是咱們在傳入函數的時候已經指定 this，那麼就不會被注入全局對象，好比： setTimeout(foo.bind(obj), 1);

做爲一個構造函數使用

在調用一個構造函數的時候須要加上 new 這個關鍵字：

function Person(name) {
this.name = name;
console.log(this);
}

var p = new Person('lmy');
//Person {name: "lmy"}

咱們能夠看到看成構造函數調用時，this 指向了這個構造函數調用時候實例化出來的對象(說的多嚴謹。。。)；

固然，構造函數其實也是一個函數，若是咱們把它看成一個普通函數執行，這個 this 仍然執行全局：

function Person(name) {
this.name = name;
console.log(this);
}

var p = Person('lmy');
//Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo

 

箭頭函數

在 ES6 的新規範中，加入了箭頭函數，它和普通函數最不同的一點就是 this 的指向了，而且能夠用箭頭函數解決上面剛遇到的this指向問題：

var obj = {
  name: 'lmy',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    setTimeout(() => {
      console.log(this);  // Object {name: "lmy"}
    }, 1000);
  }
}
 
obj.foo2();

能夠看到，在 setTimeout 執行的函數中，本應該打印出在 Window，可是在這裏 this 卻指向了 obj，緣由就在於，給 setTimeout 傳入的函數（參數）是一個箭頭函數：

函數體內的this對象，就是定義時所在的對象，而不是執行時所在的對象。 
根據例子咱們理解一下這句話： 
在 obj.foo2() 執行的時候，當前的 this 指向 obj；在執行 setTimeout 時候，咱們先是定義了一個匿名的箭頭函數，關鍵點就在這，箭頭函數內的 this 執行定義時所在的對象，就是指向定義這個箭頭函數時做用域內的 this，也就是 obj.foo2 中的 this，即 obj；因此在執行箭頭函數的時候，它的 this -> obj.foo2 中的 this -> obj；

簡單來講， 箭頭函數中的 this 只和定義它時候的做用域的 this 有關，而與在哪裏以及如何調用它無關，同時它的 this 指向是不可改變的。

call, apply, bind

在 js 中，函數也是對象，一樣也有一些方法，這裏咱們介紹三個方法，他們能夠更改函數中的 this 指向：

• call 
  fun.call(thisArg[, arg1[, arg2[, …]]]) 
  它會當即執行函數，第一個參數是指定執行函數中 this 的上下文，後面的參數是執行函數須要傳入的參數；

• apply 
  fun.apply(thisArg[, [arg1, arg2, …]]) 
  它會當即執行函數，第一個參數是指定執行函數中 this 的上下文，第二個參數是一個數組，是傳給執行函數的參數（與 call 的區別）；

• bind 
  var foo = fun.bind(thisArg[, arg1[, arg2[, …]]]); 
  它不會執行函數，而是返回一個新的函數，這個新的函數被指定了 this 的上下文，後面的參數是執行函數須要傳入的參數；

這三個函數其實大同小異，總的目的就是去指定一個函數的上下文（this），咱們以 call 函數爲例；

爲一個普通函數指定 this

var obj = {
name: 'lmy'
};

function foo() {
console.log(this);
}

foo.call(obj);
// Object {name: "lmy"}

能夠看到，在執行 foo.call(obj) 的時候，函數內的 this 指向了 obj 這個對象，成功；

爲對象中的方法指定一個 this

var obj = {
name: 'lmy',
foo: function () {
console.log(this);
}
}

var obj2 = {
name: 'lpx'
};

obj.foo.call(obj2);
// Object {name: "lpx"}

能夠看到，執行函數的時候這裏的 this 指向了 obj2，成功；

爲構造函數指定 this

function Person(name) {
this.name = name;
console.log(this);
}

var obj = {
name: 'lmyy'
};

var p = new Person.call(obj, 'lmy');

//VM152:10 Uncaught TypeError: Person.call is not a constructor
//at <anonymous>:10:9

這裏報了個錯，緣由是咱們去 new 了 Person.call 函數，而非 Person ，這裏的函數不是一個構造函數；

換成 bind 試試：

function Person(name) {
this.name = name;
console.log(this);
}

var obj = {
name: 'lmy2'
};

var Person2 = Person.bind(obj);

var p = new Person2('lmy');

console.log(obj);

// Person {name: "lmy"}
// Object {name: "lmy2"}

打印出來的是 Person 實例化出來的對象，而和 obj 沒有關係，而 obj 也沒有發生變化，說明，咱們給 Person 指定 this 上下文並無生效；

所以能夠得出： 使用 bind 給一個構造函數指定 this，在 new 這個構造函數的時候，bind 函數所指定的 this 並不會生效；

固然 bind 不只能夠指定 this ，還能傳入參數，咱們來試試這個操做：

function Person(name) {
this.name = name;
console.log(this);
}

var obj = {
name: 'lmy2'
};

var Person2 = Person.bind(obj, 'lmyyyy');

var p = new Person2('lmy');
// Person {name: "lmyyyy"}

能夠看到，雖然給構造函數指定 this 不起做用，可是傳入參數仍是起做用了；

爲箭頭函數指定 this

咱們來定義一個全局下的箭頭函數，所以這個箭頭函數中的 this 必然會指向全局對象，若是用 call 方法改變 this 呢：

var afoo = (a) => {
console.log(a);
console.log(this);
}

afoo(1);
// 1
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

 

var obj = {
name: 'lmy'
};

afoo.call(obj, 2);
// 2
//  Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

能夠看到，這裏的 call 指向 this 的操做並無成功，因此能夠得出： 箭頭函數中的 this 在定義它的時候已經決定了（執行定義它的做用域中的 this），與如何調用以及在哪裏調用它無關，包括 (call, apply, bind) 等操做都沒法改變它的 this。

只要記住箭頭函數大法好，不變的 this。