JavaScript 中的 this !

ipilipala 2016-11-29

展開(kāi)全文

tip

在 js 中，this 這個(gè)上下文總是變化莫測(cè)，很多時(shí)候出現(xiàn) bug 總是一頭霧水，其實(shí)，只要分清楚不同的情況下如何執(zhí)行就 ok 了。

全局執(zhí)行

首先，我們?cè)谌汁h(huán)境中看看它的 this 是什麼：

first. 瀏覽器：

console.log(this);

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

可以看到打印出了 window 對(duì)象；

second. node：

console.log(this);

// global

可以看到打印出了 global 對(duì)象；

總結(jié)：在全局作用域中它的 this 執(zhí)行當(dāng)前的全局對(duì)象（瀏覽器端是 Window，node 中是 global）。

函數(shù)中執(zhí)行

純粹的函數(shù)調(diào)用

這是最普通的函數(shù)使用方法了：

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

test();

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

我們可以看到，一個(gè)函數(shù)被直接調(diào)用的時(shí)候，屬於全局調(diào)用，這時(shí)候它的 this 指向全局對(duì)象；

嚴(yán)格模式『use strict';

如果在嚴(yán)格模式的情況下執(zhí)行純粹的函數(shù)調(diào)用，那麼這裡的的 this 並不會(huì)指向全局，而是 undefined，這樣的做法是為了消除 js 中一些不嚴(yán)謹(jǐn)?shù)男袨椋?/p>

'use strict';
function test() {
  console.log(this);
};

test();

// undefined

當(dāng)然，把它放在一個(gè)立即執(zhí)行函數(shù)中會(huì)更好，避免了污染全局：

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

// undefined

作為對(duì)象的方法調(diào)用

當(dāng)一個(gè)函數(shù)被當(dāng)作一個(gè)對(duì)象的方法調(diào)用的時(shí)候：

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

obj.foo();

// 'qiutc'

這時(shí)候，this 指向當(dāng)前的這個(gè)對(duì)象；

當(dāng)然，我們還可以這麼做：

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

obj.foo();

// 'qiutc'

同樣不變，因?yàn)樵?js 中一切都是對(duì)象，函數(shù)也是一個(gè)對(duì)象，對(duì)於 test ，它只是一個(gè)函數(shù)名，函數(shù)的引用，它指向這個(gè)函數(shù)，當(dāng) foo = test，foo 同樣也指向了這個(gè)函數(shù)。

如果把對(duì)象的方法賦值給一個(gè)變量，然後直接調(diào)用這個(gè)變量呢：

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

var test = obj.foo;
test();

// Window

可以看到，這時(shí)候 this 執(zhí)行了全局，當(dāng)我們把 test = obj.foo ，test 直接指向了一個(gè)函數(shù)的引用，這時(shí)候，其實(shí)和 obj 這個(gè)對(duì)象沒(méi)有關(guān)係了，所以，它是被當(dāng)作一個(gè)普通函數(shù)來(lái)直接調(diào)用，因此，this 指向全局對(duì)象。

一些坑

我們經(jīng)常在回調(diào)函數(shù)裡面會(huì)遇到一些坑：

var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);   //Object {name: "qiutc"...}
    setTimeout(this.foo, 1000);   // window 對(duì)象
  }
}

obj.foo2();

執(zhí)行這段代碼我們會(huì)發(fā)現(xiàn)兩次打印出來(lái)的 this 是不一樣的：

關(guān)於setTimeout的this指向：https://www./article/6356947525374513523

第一次是 foo2 中直接打印 this，這裡指向 obj 這個(gè)對(duì)象，我們毋庸置疑；

但是在 setTimeout 中執(zhí)行的 this.foo，卻指向了全局對(duì)象，這裡不是把它當(dāng)作函數(shù)的方法使用嗎？這一點(diǎn)經(jīng)常讓很多初學(xué)者疑惑；
其實(shí)，setTimeout 也只是一個(gè)函數(shù)而已，函數(shù)必然有可能需要參數(shù)，我們把 this.foo 當(dāng)作一個(gè)參數(shù)傳給 setTimeout 這個(gè)函數(shù)，就像它需要一個(gè) fun 參數(shù)，在傳入?yún)?shù)的時(shí)候，其實(shí)做了個(gè)這樣的操作 fun = this.foo，看到?jīng)]有，這裡我們直接把 fun 指向 this.foo 的引用；執(zhí)行的時(shí)候其實(shí)是執(zhí)行了 fun() 所以已經(jīng)和 obj 無(wú)關(guān)了，它是被當(dāng)作普通函數(shù)直接調(diào)用的，因此 this 指向全局對(duì)象。

這個(gè)問(wèn)題是很多異步回調(diào)函數(shù)中普遍會(huì)碰到的；

解決

為瞭解決這個(gè)問(wèn)題，我們可以利用閉包的特性來(lái)處理：

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

      console.log(_this);  // Object {name: "qiutc"}
    }, 1000);
  }
}

obj.foo2();

可以看到直接用 this 仍然是 Window；因?yàn)?foo2 中的 this 是指向 obj，我們可以先用一個(gè)變量 _this 來(lái)儲(chǔ)存，然後在回調(diào)函數(shù)中使用 _this，就可以指向當(dāng)前的這個(gè)對(duì)象了；

setTimeout 的另一個(gè)坑

之前啊說(shuō)過(guò)，如果直接執(zhí)行回調(diào)函數(shù)而沒(méi)有綁定作用域，那麼它的 this 是指向全局對(duì)象(window)，在嚴(yán)格模式下會(huì)指向 undefined，然而在 setTimeout 中的回調(diào)函數(shù)在嚴(yán)格模式下卻表現(xiàn)出不同：

'use strict';

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

setTimeout(foo, 1);

// window

按理說(shuō)我們加了嚴(yán)格模式，foo 調(diào)用也沒(méi)有指定 this，應(yīng)該是出來(lái) undefined，但是這裡仍然出現(xiàn)了全局對(duì)象，難道是嚴(yán)格模式失效了嗎？

並不，即使在嚴(yán)格模式下，setTimeout 方法在調(diào)用傳入函數(shù)的時(shí)候，如果這個(gè)函數(shù)沒(méi)有指定了的 this，那麼它會(huì)做一個(gè)隱式的操作—-自動(dòng)地注入全局上下文，等同於調(diào)用 foo.apply(window) 而非 foo()；

當(dāng)然，如果我們?cè)趥魅牒瘮?shù)的時(shí)候已經(jīng)指定 this，那麼就不會(huì)被注入全局對(duì)象，比如： setTimeout(foo.bind(obj), 1);；

http:///questions/21957030/why-is-window-still-defined-in-this-strict-mode-code

作為一個(gè)構(gòu)造函數(shù)使用

在 js 中，為了實(shí)現(xiàn)類，我們需要定義一些構(gòu)造函數(shù)，在調(diào)用一個(gè)構(gòu)造函數(shù)的時(shí)候需要加上 new 這個(gè)關(guān)鍵字：

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

var p = new Person('qiutc');

// Person {name: "qiutc"}

我們可以看到當(dāng)作構(gòu)造函數(shù)調(diào)用時(shí)，this 指向了這個(gè)構(gòu)造函數(shù)調(diào)用時(shí)候?qū)嵗鰜?lái)的對(duì)象；

當(dāng)然，構(gòu)造函數(shù)其實(shí)也是一個(gè)函數(shù)，如果我們把它當(dāng)作一個(gè)普通函數(shù)執(zhí)行，這個(gè) this 仍然執(zhí)行全局：

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

var p = Person('qiutc');

// Window

其區(qū)別在於，如何調(diào)用函數(shù)（new）。

箭頭函數(shù)

在 ES6 的新規(guī)範(fàn)中，加入了箭頭函數(shù)，它和普通函數(shù)最不一樣的一點(diǎn)就是 this 的指向了，還記得在上文中（作為對(duì)象的方法調(diào)用-一些坑-解決）我們使用閉包來(lái)解決 this 的指向問(wèn)題嗎，如果用上了箭頭函數(shù)就可以更完美的解決了：

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

obj.foo2();

可以看到，在 setTimeout 執(zhí)行的函數(shù)中，本應(yīng)該打印出在 Window，但是在這裡 this 卻指向了 obj，原因就在於，給 setTimeout 傳入的函數(shù)（參數(shù)）是一個(gè)箭頭函數(shù)：

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

根據(jù)例子我們理解一下這句話：
在 obj.foo2() 執(zhí)行的時(shí)候，當(dāng)前的 this 指向 obj；在執(zhí)行 setTimeout 時(shí)候，我們先是定義了一個(gè)匿名的箭頭函數(shù)，關(guān)鍵點(diǎn)就在這，箭頭函數(shù)內(nèi)的 this 執(zhí)行定義時(shí)所在的對(duì)象，就是指向定義這個(gè)箭頭函數(shù)時(shí)作用域內(nèi)的 this，也就是 obj.foo2 中的 this，即 obj；所以在執(zhí)行箭頭函數(shù)的時(shí)候，它的 this -> obj.foo2 中的 this -> obj；

簡(jiǎn)單來(lái)說(shuō)，箭頭函數(shù)中的 this 只和定義它時(shí)候的作用域的 this 有關(guān)，而與在哪裡以及如何調(diào)用它無(wú)關(guān)，同時(shí)它的 this 指向是不可改變的。

call, apply, bind

在 js 中，函數(shù)也是對(duì)象，同樣也有一些方法，這裡我們介紹三個(gè)方法，他們可以更改函數(shù)中的 this 指向：

call

fun.call(thisArg[, arg1[, arg2[, ...]]])

它會(huì)立即執(zhí)行函數(shù)，第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，後面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)；

apply
```
fun.apply(thisArg[, [arg1, arg2, ...]])
```

它會(huì)立即執(zhí)行函數(shù)，第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，第二個(gè)參數(shù)是一個(gè)數(shù)組，是傳給執(zhí)行函數(shù)的參數(shù)（與 call 的區(qū)別）；

bind

var foo = fun.bind(thisArg[, arg1[, arg2[, ...]]]);

它不會(huì)執(zhí)行函數(shù)，而是返回一個(gè)新的函數(shù)，這個(gè)新的函數(shù)被指定了 this 的上下文，後面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)；

這三個(gè)函數(shù)其實(shí)大同小異，總的目的就是去指定一個(gè)函數(shù)的上下文（this），我們以 call 函數(shù)為例；

為一個(gè)普通函數(shù)指定 this

var obj = {
  name: 'qiutc'
};

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

foo.call(obj);

// Object {name: "qiutc"}

可以看到，在執(zhí)行 foo.call(obj) 的時(shí)候，函數(shù)內(nèi)的 this 指向了 obj 這個(gè)對(duì)象，成功；

為對(duì)象中的方法指定一個(gè) this

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

var obj2 = {
  name: 'tcqiu222222'
};

obj.foo.call(obj2);

// Object {name: "tcqiu222222"}

可以看到，執(zhí)行函數(shù)的時(shí)候這裡的 this 指向了 obj2，成功；

為構(gòu)造函數(shù)指定 this

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

var obj = {
  name: 'qiutc2222222'
};

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

// Uncaught TypeError: Person.call is not a constructor(…)

這裡報(bào)了個(gè)錯(cuò)，原因是我們?nèi)?new 了 Person.call 函數(shù)，而非 Person ，這裡的函數(shù)不是一個(gè)構(gòu)造函數(shù)；

換成 bind 試試：

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

var obj = {
  name: 'qiutc2222222'
};

var Person2 = Person.bind(obj);

var p = new Person2('qiutc');

// Person {name: "qiutc"}

console.log(obj);

// Object {name: "qiutc2222222"}

打印出來(lái)的是 Person 實(shí)例化出來(lái)的對(duì)象，而和 obj 沒(méi)有關(guān)係，而 obj 也沒(méi)有發(fā)生變化，說(shuō)明，我們給 Person 指定 this 上下文並沒(méi)有生效；

因此可以得出：使用 bind 給一個(gè)構(gòu)造函數(shù)指定 this，在 new 這個(gè)構(gòu)造函數(shù)的時(shí)候，bind 函數(shù)所指定的 this 並不會(huì)生效；

當(dāng)然 bind 不僅可以指定 this ，還能傳入?yún)?shù)，我們來(lái)試試這個(gè)操作：

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

var obj = {
  name: 'qiutc2222222'
};

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

var p = new Person2('qiutc');

// Person {name: "qiutc111111"}

可以看到，雖然指定 this 不起作用，但是傳入?yún)?shù)還是起作用了；

為箭頭函數(shù)指定 this

我們來(lái)定義一個(gè)全局下的箭頭函數(shù)，因此這個(gè)箭頭函數(shù)中的 this 必然會(huì)指向全局對(duì)象，如果用 call 方法改變 this 呢：

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

afoo(1);

// 1
// Window

var obj = {
  name: 'qiutc'
};

afoo.call(obj, 2);

// 2
// Window

可以看到，這裡的 call 指向 this 的操作並沒(méi)有成功，所以可以得出：箭頭函數(shù)中的 this 在定義它的時(shí)候已經(jīng)決定了（執(zhí)行定義它的作用域中的 this），與如何調(diào)用以及在哪裡調(diào)用它無(wú)關(guān)，包括 (call, apply, bind) 等操作都無(wú)法改變它的 this。

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

Function.prototype.call

格式:fx.call( thisArg [，arg1，arg2，… ] );

call的傳參個(gè)數(shù)不限,第一個(gè)數(shù)表示調(diào)用函數(shù)(fx)函數(shù)體內(nèi)this的指向.從第二個(gè)參數(shù)開(kāi)始依次按序傳入函數(shù).

var age = 40;
var xiaoMing = {
	age:30
};
var xiaoLi = {
	age: 20
};
var getAge = function(){
    console.log(this.age);
};
 getAge.call( xiaoMing );  //30 表示函數(shù)this指向xiaoMing
getAge.call(xiaoLi);  //20  表示函數(shù)this指向xiaoLi
getAge.call(undefined);//40  getAge.call(undefined)==getAge.call(null)
getAge.call(null);//40
getAge(); //40

如果我們傳入fx.call()的第一個(gè)參數(shù)數(shù)為null,那麼表示函數(shù)fx體內(nèi)this指向宿主對(duì)象,在瀏覽器是Window對(duì)象,這也解釋了getAge.call(undefined);//40。

在此基礎(chǔ)我們可以理解為 getAge()相當(dāng)於getAge.call(null/undefined),擴(kuò)展到所有函數(shù),
fx()==fx.call(null) == fx.call(undefined)

值得注意的是嚴(yán)格模式下有點(diǎn)區(qū)別: this指向null

var getAge = function(){
'use strict'
console.log(this.age);
};
getAge(null);//報(bào)錯(cuò) age未定義

再來(lái)理解this的使用

this的常用場(chǎng)景:

this位於一個(gè)對(duì)象的方法內(nèi),此時(shí)this指向該對(duì)象

var name = 'window';

var Student = {
	name : 'kobe',
	getName: function () {
		console.log(this == Student); //true
		console.log(this.name);  //kobe
	}
}

Student.getName();

var name = 'window';
var Student = {
	name : 'kobe',
	getName: function () {
                var name=100;
		console.log(this == Student); //true
		console.log(this.name);  //kobe
	}
}
Student.getName();   //getName取得是Student 的name

this位於一個(gè)普通的函數(shù)內(nèi),表示this指向全局對(duì)象,(瀏覽器是window)

var name = 'window';

var getName = function () {
	var name = 'kobe';  //迷惑性而已
	return this.name;
}

console.log(  getName() ); //window

this使用在構(gòu)造函數(shù)(構(gòu)造器)裡面,表示this指向的是那個(gè)返回的對(duì)象.

var name = 'window';
//構(gòu)造器
var Student = function () {
	this.name = 'student';
}

var s1 = new Student();
console.log(s1.name);  //student

注意: 如果構(gòu)造器返回的也是一個(gè)Object的對(duì)象(其他類型this指向不變遵循之前那個(gè)規(guī)律),這時(shí)候this指的是返回的這個(gè)Objec.

var name = 'window';
//構(gòu)造器
var Student = function () {
	this.name = 'student';
	return {
		name: 'boyStudent'
	}
}

var s1 = new Student();
console.log(s1.name);  //boyStudent

this指向失效問(wèn)題

var name = 'window';

var Student = {
	name : 'kobe',
	getName: function () {		
		console.log(this.name);  
	}
}

Student.getName(); // kobe
var s1 = Student.getName;
s1(); //window

原因: 此時(shí)s1是一個(gè)函數(shù)

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

對(duì)一個(gè)基本的函數(shù),前面提過(guò)this在基本函數(shù)中指的是window.

在開(kāi)發(fā)中我們經(jīng)常使用的this緩存法 ,緩存當(dāng)前作用域下this到另外一個(gè)環(huán)境域下使用

最後理解apply的用法 Function.prototype.apply

格式: fx.apply(thisArg [，argArray] ); // 參數(shù)數(shù)組，argArray

apply與call的作用是一樣的,只是傳參方式不同,
apply接受兩個(gè)參數(shù),第一個(gè)也是fx函數(shù)體內(nèi)this的指向,用法與call第一個(gè)參數(shù)一致.第二個(gè)參數(shù)是數(shù)組或者類數(shù)組,apply就是把這個(gè)數(shù)組元素傳入函數(shù)fx.

var add = function (a ,b ,c) {
	console.log(a +b +c);
}

add.apply(null , [1,2,3]); // 6

再吃透這個(gè)題目就ok

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      return this.a;
    }
}
foo.bar()
//20
(foo.bar)()
//20
(foo.bar=foo.bar)()
//10
(foo.bar,foo.bar)()
//10

上題註解：

時(shí)刻牢記：作用域鏈查找遵循"就近原則"；

this誰(shuí)調(diào)用就指向誰(shuí)。

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;  //this 指向 foo  ：console.log( this == foo) //true
      return this.a;
    }
}


foo.bar()   
//20
// foo.bar()    // foo調(diào)用，this指向foo , 此時(shí)的 this 指的是foo，所以是20 


(foo.bar)()
//20
//第一步：
(function(){
   var a=30; 
   return this.a;
})()    //作用域鏈向上查找,this 指向外一層的對(duì)象foo



(foo.bar=foo.bar)()
//10
foo.bar=foo.bar,【睜大眼睛，是單等號(hào)賦值】就是普通的複製,一個(gè)匿名函數(shù)賦值給一個(gè)全局變量,你可以把右邊的foo.bar換成b,
即(b = foo.bar)(),博客裡面【this指向失效問(wèn)題】說(shuō)過(guò)普通的函數(shù)裡面的this指向window,自然this.a == 10





(foo.bar,foo.bar)()  //逗號(hào)表達(dá)式
//10
//(foo.bar,foo.bar)是一個(gè)小括號(hào)表達(dá)式,小括號(hào)表達(dá)式會(huì)依次創(chuàng)建兩個(gè)匿名函數(shù),並返回最後一個(gè)的匿名函數(shù)值,
(foo.bar,foo.bar) 得到的是這個(gè)函數(shù)
 function(){
     var a=30;
     console.log( this == foo); //如果不是很瞭解this的指向就加這個(gè)代碼進(jìn)行檢測(cè)
     return this.a;
   }
 ,這個(gè)是匿名函數(shù),匿名函數(shù)的this指的是widnow,那麼this.a = 10

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： ipilipala > 《Coding》

舉報(bào)/認(rèn)領(lǐng)