快捷導(dǎo)航

Javascript this 關(guān)鍵字詳解

更新時(shí)間：2014年10月22日 11:45:04 投稿：hebedich

Javascript是一種很靈活的語(yǔ)言, 而This關(guān)鍵字又是靈活中的靈活, 但是因?yàn)樗撵`活, 也注定了它的難用.以前我用this的時(shí)候, 都會(huì)覺(jué)得不踏實(shí), 老是擔(dān)心它不知道怎么地就會(huì)指到另外的什么地方.其實(shí), 這都是因?yàn)? 我們對(duì)它的不了解.

一、this指向構(gòu)造函數(shù)實(shí)例化對(duì)象

在上篇文章中，我們提到了使用new和不使用new調(diào)用構(gòu)造函數(shù)的區(qū)別，如下例：

復(fù)制代碼代碼如下:

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

var benjamin = new Benjamin("zuojj", "male");

//Outputs: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

var ben = Benjamin("zhangsan", "female");

//Outputs: undefined

console.log(ben);

當(dāng)構(gòu)造函數(shù)當(dāng)做普通函數(shù)被調(diào)用時(shí)，并沒(méi)有返回值，同時(shí)this指向全局對(duì)象。那么我們?nèi)绾蝸?lái)避免因?yàn)槿鄙賜ew關(guān)鍵字，而產(chǎn)生的問(wèn)題呢？

復(fù)制代碼代碼如下:

function Benjamin(username, sex) {

 //Check whether "this" is a "Benjamin" object

 if(this instanceof Benjamin) {

     this.username = username;

     this.sex = sex;

 }else {

  return new Benjamin(username, sex);

 }

}

var benjamin = new Benjamin("zuojj", "male");

//Outputs: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

var ben = Benjamin("zhangsan", "female");

//Outputs: Benjamin {username: "zhangsan", sex: "female"} 

console.log(ben);

在上例中，我們首先檢查this是否是Benjammin的實(shí)例，如果不是，使用new自動(dòng)調(diào)用構(gòu)造函數(shù)，并實(shí)例化，這意味著，我們不再需要擔(dān)心，遺漏new關(guān)鍵字實(shí)例化構(gòu)造函數(shù)。當(dāng)然這樣我們可能會(huì)養(yǎng)成一個(gè)壞的習(xí)慣，如果避免這種現(xiàn)象呢？我們可以?huà)伋鲆粋€(gè)錯(cuò)誤，像下面這樣：

復(fù)制代碼代碼如下:

function Benjamin(username, sex) {

 //Check whether "this" is a "Benjamin" object

 if(this instanceof Benjamin) {

     this.username = username;

     this.sex = sex;

 }else {

  // If not, throw error.

        throw new Error("`Benjamin` invoked without `new`");

 }

}

二、this指向調(diào)用該函數(shù)的對(duì)象

看下面的例子:

復(fù)制代碼代碼如下:

var x = 10;

var obj = {

 x: 10,

 output: function() {

  //Outputs: true

  console.log(this === obj);

  return this.x;

 },

 innerobj: {

  x: 30,

  output: function() {

   //Outputs: true

   console.log(this === obj.innerobj);

   return this.x;

  }

 }

};

//Outputs: 10

console.log(obj.output());

//Outputs: 30

console.log(obj.innerobj.output());

三、this指向全局對(duì)象

在上面討論構(gòu)造函數(shù)的時(shí)候我們也討論到不適用new的時(shí)候，this會(huì)指向全局對(duì)象，下面我們來(lái)看看兩種常見(jiàn)的容易犯錯(cuò)的實(shí)例：

復(fù)制代碼代碼如下:

var x = 100;

var obj = {

 x: 10,

 output: function() {

  (function() {

   //Outputs: true

   console.log(this === window);

   //Outputs: Inner: 100

   console.log("Inner:" + this.x);

  })();

  return this.x;

 }

};

//Outputs: 10

console.log(obj.output());

在使用閉包的時(shí)候，作用域發(fā)生變化，this指向window(瀏覽器中)。

復(fù)制代碼代碼如下:

var x = 100;

var obj = {

 x: 10,

 output: function() {

  return this.x;

 }

};

var output = obj.output;

//Outputs: 10

console.log(obj.output());

//Outputs: 100

console.log(output());

var obj2 = {

 x: 30,

 output: obj.output

}

//Outputs: 30

console.log(obj2.output());

此時(shí)this始終指向函數(shù)調(diào)用時(shí)的對(duì)象。

四、this指向apply/call()方法指派的對(duì)象

復(fù)制代碼代碼如下:

var x = 100;

var obj = {

 x: 10,

 output: function() {

  return this.x;

 }

};

//Outputs: 10

console.log(obj.output());

var obj2 = {

 x: 40,

 output: obj.output

}

//Outputs: 40

console.log(obj.output.call(obj2));

//Outputs: 10

console.log(obj2.output.apply(obj));

五、callback函數(shù)內(nèi)的this指向調(diào)用該callback的函數(shù)的this所指向的對(duì)象

復(fù)制代碼代碼如下:

//<input type="text" value="3" id="txt_username">

$("#username").on("click", function() {

 console.log(this.value);

});

六、Function.prototype.bind中的this

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
實(shí)例一：

復(fù)制代碼代碼如下:

function person() {

 return this.name;

}

//Function.prototype.bind

var per = person.bind({

 name: "zuojj"

});

console.log(per);

var obj = {

 name: "Ben",

 person: person,

 per: per

};

//Outputs: Ben, zuojj

console.log(obj.person(), obj.per());

實(shí)例二：

復(fù)制代碼代碼如下:

this.x = 9; 

var module = {

  x: 81,

  getX: function() { return this.x; }

};

//Outputs: 81

console.log(module.getX()); 

var getX = module.getX;

//Outputs: 9, because in this case, "this" refers to the global object

console.log(getX); 

// create a new function with 'this' bound to module

var boundGetX = getX.bind(module);

//Outputs: 81

console.log(boundGetX());