javascript this詳細(xì)介紹

this的值是在運(yùn)行時(shí)確定的

　　JS中的this究竟代表什么，這是在程序運(yùn)行時(shí)根據(jù)上下文環(huán)境確定，可以分為以下幾種情況。

　　1. 全局作用域中的this

　　在全局作用域中，this指向window對(duì)象。

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　console.log（this）；//指向window對(duì)象

　　this.x = 5//在全局作用域內(nèi)創(chuàng)建一個(gè)x

　　//與this.x = 5的等價(jià)情況：

　　//var x = 5;

　　//x = 5;

　　在全局作用域中執(zhí)行var x=5，其實(shí)是為window對(duì)象創(chuàng)建一個(gè)屬性x，并令其等于5。

　　若定義變量時(shí)不加var，JS會(huì)認(rèn)為該變量為全局變量，會(huì)將其當(dāng)作window對(duì)象的屬性。

　　2. 函數(shù)中的this

　　JS中函數(shù)有兩種，直接調(diào)用的函數(shù)稱(chēng)為普通函數(shù)，通過(guò)new創(chuàng)建對(duì)象的函數(shù)稱(chēng)為構(gòu)造函數(shù)。

　　2.1 構(gòu)造函數(shù)中的this

　　構(gòu)造函數(shù)的this指向它所創(chuàng)建的對(duì)象，如：

　　?

　　1

　　2

　　3

　　4

　　function Person（name）{

　　this.name = name;//this指向該函數(shù)創(chuàng)建的對(duì)象person

　　}

　　var person = new Person（"chaimm"）；

　　2.2 普通函數(shù)中的this

　　普通函數(shù)的this指向window對(duì)象。

　　若上述例子，直接執(zhí)行Perosn函數(shù)，則其中this代表window對(duì)象，因此該函數(shù)執(zhí)行后會(huì)創(chuàng)建一個(gè)全局的name。

　　?

　　1

　　2

　　3

　　4

　　function Person（name）{

　　this.name = name;//this指向window

　　}

　　Person（"chai"）；//當(dāng)作普通函數(shù)執(zhí)行，this指向window對(duì)象

　　3. 對(duì)象中的this

　　對(duì)象中的this指向當(dāng)前對(duì)象，如：

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　var person = {

　　name : "chaimm",

　　getName : function（）{

　　 return  this.name;

　　}

　　}

　　上述代碼中this指向函數(shù)getName所屬的對(duì)象。

　　但是，如果一個(gè)對(duì)象的函數(shù)中又嵌套了一個(gè)函數(shù)，這個(gè)函數(shù)的this指向的卻是window，而并不是其外層的對(duì)象。

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　var person = {

　　name : "chaimm",

　　setName : function（name）{

　?。╢unction（name）{

　　this.name = name; //此時(shí)this并不代表person對(duì)象，而是代表window對(duì)象

　　}）（name）；

　　}

　　}

　　上述示例中，person對(duì)象中有一個(gè)getName函數(shù)，而getName函數(shù)內(nèi)部又有一個(gè)函數(shù)，這個(gè)函數(shù)內(nèi)部的this指向window對(duì)象，而非person對(duì)象，這是JS的一個(gè)bug！一般作如下處理，規(guī)避這個(gè)bug：

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　var person = {

　　name : "chaimm",

　　setName : function（name）{

　　var thar = this;//將this賦給that

　?。╢unction（name）{

　　that.name = name;//此時(shí)that指向person對(duì)象

　　}）（name）；

　　}

　　}

　　我們?cè)趐erson對(duì)象的第一層函數(shù)中，將this賦給局部變量that，然后在第二層函數(shù)中使用that，此時(shí)that指向person對(duì)象，可對(duì)person的屬性進(jìn)行操作。

　　注意：若將一個(gè)對(duì)象中的函數(shù)賦給一個(gè)變量后，再通過(guò)該變量調(diào)用這個(gè)函數(shù)，此時(shí)該函數(shù)中的this指向window，而非該對(duì)象，如下所示：

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　var person = {

　　name : "chaimm",

　　getName : function（）{

　　return this.name;

　　}

　　}

　　//將getName函數(shù)賦給一個(gè)新的變量

　　var newGetName = person.getName;

　　//通過(guò)新的變量調(diào)用這個(gè)函數(shù)，這個(gè)函數(shù)中的this將指向window

　　newGetName（）；//若全局作用域中沒(méi)有name，則將返回undefined

　　4. 用 call 和apply函數(shù)給this開(kāi)掛

　　這兩個(gè)函數(shù)都能手動(dòng)指定被調(diào)用函數(shù)內(nèi)部的this指向哪個(gè)對(duì)象。

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　//定義一個(gè)構(gòu)造函數(shù)

　　var Person = function（name）{

　　this.name = "";

　　this.setName = function（name）{

　　this.name = name;

　　}

　　}

　　//創(chuàng)建兩個(gè)對(duì)象

　　var personA = new Person（"A"）；

　　var personB = new Person（"B"）；

　　//使用personA的setName函數(shù)去修改personB的name屬性

　　personA.setName.apply（personB,["C"]；

　　apply用法

　　對(duì)象A.函數(shù)名。apply（對(duì)象B, 參數(shù)列表）；

　　當(dāng)對(duì)象B作為apply的第一個(gè)參數(shù)傳給apply時(shí)，對(duì)象A的函數(shù)中this就指向了對(duì)象B，此時(shí)對(duì)象A的該函數(shù)對(duì)this的操作將會(huì)作用在對(duì)象B上，由此實(shí)現(xiàn)了用對(duì)象A去調(diào)用對(duì)象B的函數(shù)。

http://shenzhen.offcn.com/