Javascript this 關鍵字詳解

2019-11-20 14:00:14

字體：大中小

來源：轉載

供稿：網友

一、this指向構造函數實例化對象

在上篇文章中，我們提到了使用new和不使用new調用構造函數的區別，如下例：

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

當構造函數當做普通函數被調用時，并沒有返回值，同時this指向全局對象。那么我們如何來避免因為缺少new關鍵字，而產生的問題呢？

復制代碼代碼如下:

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自動調用構造函數，并實例化，這意味著，我們不再需要擔心，遺漏new關鍵字實例化構造函數。當然這樣我們可能會養成一個壞的習慣，如果避免這種現象呢？我們可以拋出一個錯誤，像下面這樣：

復制代碼代碼如下:

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指向調用該函數的對象

看下面的例子:

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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始終指向函數調用時的對象。

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

復制代碼代碼如下:

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函數亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

Javascript this 關鍵字 詳解

Javascript this 關鍵字詳解