和其他高級(jí)語(yǔ)言一樣javascript中也有new關(guān)鍵字，我們以前認(rèn)知的new是用來(lái)創(chuàng)建一個(gè)類的實(shí)例對(duì)象，但在js中萬(wàn)物皆是對(duì)象，為何還要new關(guān)鍵字呢，其實(shí)js中new關(guān)鍵字不是用來(lái)創(chuàng)建一個(gè)類的實(shí)例對(duì)象，而是用于繼承。 接下來(lái)，本文將帶你一起來(lái)探索JS中new的奧秘...

function Animal(name){
  this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
  console.log("I'm " + this.name);
};
var cat = new Animal("cat");

console.log(
  cat.name, //cat
  cat.height //undefined
);
cat.say(); //I'm cat

console.log(
  Animal.name, //Animal
  Animal.color //back
);
Animal.say(); //Animal.say is not a function

如果你能理解上面輸出的結(jié)果，說(shuō)明你已非常了解js中new和this的運(yùn)行機(jī)制，請(qǐng)忽略本文!

我們將通過(guò)解析這個(gè)例子來(lái)加深你對(duì)js中new和繼承的理解! 【如果你對(duì)js的this還不了解，請(qǐng)先閱讀：JS作用域和this關(guān)鍵字】

一、代碼解讀

  1-3行創(chuàng)建了一個(gè)函數(shù)Animal,并在其this上定義了屬性:name,name的值是函數(shù)被執(zhí)行時(shí)的形參。

  第4行在Animal對(duì)象（Animal本身是一個(gè)函數(shù)對(duì)象）上定義了一個(gè)靜態(tài)屬性:color,并賦值“black”

  5-7行在Animal函數(shù)的原型對(duì)象prototype上定義了一個(gè)say()方法，say方法輸出了this的name值。

  第8行通過(guò)new關(guān)鍵字創(chuàng)建了一個(gè)新對(duì)象cat

  10-14行cat對(duì)象嘗試訪問(wèn)name和color屬性，并調(diào)用say方法。

  16-20行Animal對(duì)象嘗試訪問(wèn)name和color屬性，并調(diào)用say方法。

二、重點(diǎn)解析

  第8行代碼是關(guān)鍵：

var cat = new Animal("cat");

 JS引擎在執(zhí)行這句代碼時(shí)，做了很多工作，用偽代碼模擬其工作流程如下：

 var obj = {};
 obj.__proto__ = Animal.prototype;
 var result = Animal.call(obj,"cat");
 return typeof result === 'obj'? result : obj;

（1）創(chuàng)建一個(gè)空對(duì)象obj;

（2）把obj的__proto__ 指向Animal的原型對(duì)象prototype，此時(shí)便建立了obj對(duì)象的原型鏈：obj->Animal.prototype->Object.prototype->null

      【如果你不了解JS原型鏈，請(qǐng)先閱讀：JS原型和原型鏈】

（3）在obj對(duì)象的執(zhí)行空間調(diào)用Animal函數(shù)并傳遞參數(shù)“cat”。 相當(dāng)于var result = obj.Animal("cat")。

       當(dāng)這句執(zhí)行完之后，obj便產(chǎn)生了屬性name并賦值為"cat"?！娟P(guān)于JS中call的用法請(qǐng)閱讀：JS的call和apply】

（4）考察第3步返回的返回值，如果無(wú)返回值或者返回一個(gè)非對(duì)象值，則將obj返回作為新對(duì)象；否則會(huì)將返回值作為新對(duì)象返回。

了解了new的運(yùn)行機(jī)制后，我們知道cat其實(shí)就是過(guò)程（4）的返回值，因此我們對(duì)cat對(duì)象的認(rèn)知就多了一些：

cat的原型鏈?zhǔn)牵簅bj->Animal.prototype->Object.prototype->null

cat上新增了一個(gè)屬性：name

分析完了cat的產(chǎn)生過(guò)程，我們?cè)倏纯摧敵鼋Y(jié)果：

cat.name -> 在過(guò)程（3）中，obj對(duì)象就產(chǎn)生了name屬性。因此cat.name就是這里的obj.name

cat.color -> cat會(huì)先查找自身的color，沒(méi)有找到便會(huì)沿著原型鏈查找，在上述例子中，我們僅在Animal對(duì)象上定義了color,并沒(méi)有在其原型鏈上定義，因此找不到。

cat.say -> cat會(huì)先查找自身的say方法，沒(méi)有找到便會(huì)沿著原型鏈查找，在上述例子中，我們?cè)贏nimal的prototype上定義了say,因此在原型鏈上找到了say方法。

另外，在say方法中還訪問(wèn)this.name，這里的this指的是其調(diào)用者obj,因此輸出的是obj.name的值。

對(duì)于Animal來(lái)說(shuō)，它本身也是一個(gè)對(duì)象，因此，它在訪問(wèn)屬性和方法時(shí)也遵守上述查找規(guī)則，所以：

Animal.color -> "black"

Animal.name -> "Animal" , Animal先查找自身的name,找到了name,注意：但這個(gè)name不是我們定義的name,而是函數(shù)對(duì)象內(nèi)置的屬性。

一般情況下，函數(shù)對(duì)象在產(chǎn)生時(shí)會(huì)內(nèi)置name屬性并將函數(shù)名作為賦值（僅函數(shù)對(duì)象）。

Animal.say -> Animal在自身沒(méi)有找到say方法，也會(huì)沿著其原型鏈查找，話說(shuō)Animal的原型鏈?zhǔn)鞘裁茨兀?/p>

 從調(diào)試結(jié)果看：Animal的原型鏈?zhǔn)沁@樣的：

 Animal->Function.prototype->Object.prototype->null

 因此Animal的原型鏈上沒(méi)有定義say方法！

 總結(jié)一下，javascript的new關(guān)鍵字主要的作用是繼承，上面例子中，cat對(duì)象在產(chǎn)生時(shí)便繼承了Animal中定義的方法和屬性，因此cat不是Animal的實(shí)例而是其子類（不嚴(yán)謹(jǐn)?shù)恼f(shuō)法）?？赡苡腥诉€會(huì)想：cat既然是new出來(lái)的，那cat和Animal應(yīng)該是同類型的。我認(rèn)為既然是父類和子類的關(guān)系，那就不可能是同類型，不信，你看：

javascript 使用new關(guān)鍵字的區(qū)別

第一種方式使用new關(guān)鍵字以原型的方式將user對(duì)象暴露到window對(duì)象中

//one
var user = function(){
  this.name="";
  this.id="";
};
user.add = function(){
  console.log("add");
};
user.delete = function(){
  console.log("delete");
};
user.prototype = user;
window.user = new user();

第二種方式不使用new關(guān)鍵字直接將user對(duì)象暴露到window對(duì)象中

//two
var user = {
  name:"",
  id:""
};
user.add = function(){
  console.log("add");
};
user.delete = function(){
  console.log("delete");
};
window.user = user;

使用

<button onclick="user.add()">增加</button>
<button onclick="user.delete()">刪除</button>

最新評(píng)論