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

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

1. 全局作用域中的this

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

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ù)稱為普通函數(shù)，通過new創(chuàng)建對(duì)象的函數(shù)稱為構(gòu)造函數(shù)。

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

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

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。

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ì)象，如：

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

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

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

var person = {
  name : "chaimm",
  setName : function(name){
    (function(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：

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//將this賦給that
    (function(name){
      that.name = name;//此時(shí)that指向person對(duì)象
    })(name);
  }
}

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

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

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//將getName函數(shù)賦給一個(gè)新的變量
var newGetName = person.getName;
//通過新的變量調(diào)用這個(gè)函數(shù)，這個(gè)函數(shù)中的this將指向window
newGetName();//若全局作用域中沒有name，則將返回undefined

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

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

//定義一個(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ù)。

以上就是對(duì)javascript this的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論