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

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

Javascript是一種很靈活的語言, 而This關(guān)鍵字又是靈活中的靈活, 但是因為它的靈活, 也注定了它的難用.以前我用this的時候, 都會覺得不踏實, 老是擔心它不知道怎么地就會指到另外的什么地方.其實, 這都是因為, 我們對它的不了解.

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

在上篇文章中，我們提到了使用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);

當構(gòu)造函數(shù)當做普通函數(shù)被調(diào)用時，并沒有返回值，同時this指向全局對象。那么我們?nèi)绾蝸肀苊庖驗槿鄙賜ew關(guān)鍵字，而產(chǎ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的實例，如果不是，使用new自動調(diào)用構(gòu)造函數(shù)，并實例化，這意味著，我們不再需要擔心，遺漏new關(guān)鍵字實例化構(gòu)造函數(shù)。當然這樣我們可能會養(yǎng)成一個壞的習(xí)慣，如果避免這種現(xiàn)象呢？我們可以拋出一個錯誤，像下面這樣：

復(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ù)的對象

看下面的例子:

復(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指向全局對象

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

復(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());

在使用閉包的時候，作用域發(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());

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

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

復(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所指向的對象

復(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.
實例一：

復(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());

實例二：

復(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());