如何在JavaScript中使用原型對象和構(gòu)造函數(shù)

今天就跟大家聊聊有關(guān)如何在JavaScript中使用原型對象和構(gòu)造函數(shù)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

構(gòu)造函數(shù)和實例對象

構(gòu)造函數(shù)是類的外在表現(xiàn)，構(gòu)造函數(shù)的名字通常用作類名。

其實構(gòu)造函數(shù)也就是一個函數(shù)，只不過它于普通的函數(shù)又有點不同：

• 沒有顯示的創(chuàng)建對象；

• 直接將屬性和方法賦給this；

• 沒有return語句；

構(gòu)造函數(shù)是用來構(gòu)造新對象的。之前的筆記中有提到過，可以是用new關(guān)鍵詞來調(diào)用構(gòu)造函數(shù)，以創(chuàng)建特定類型的新對象。如，創(chuàng)建一個Object類型的對象實例：

var o=new Object();

為了區(qū)別構(gòu)造函數(shù)和普通函數(shù)，通常規(guī)定構(gòu)造函數(shù)的命名首字母大寫，而普通函數(shù)的命名首字母小寫。當(dāng)然，這不是必須的，卻是一個很好的習(xí)慣。

通過用構(gòu)造函數(shù)創(chuàng)建并初始化的屬性是實例屬性。所謂的實例屬性就是指，通過該構(gòu)造函數(shù)創(chuàng)建的每個對象，都將擁有一份實例屬性的單獨拷貝。這些屬性都是通過實例來訪問的，值根據(jù)每個實例所定義的為準，若實例中沒有定義，則為構(gòu)造函數(shù)初始化時的默認值。來看一個例子：

function Person(name,age){
  this.name=name;
  this.age=age;
  this.friends=["Tom","Boo"];
}
var p1=new Person("Lily",20);
var p2=new Person("Sam",30);
alert(p1.name); //Lily
alert(p2.name); //Sam
p1.friends.push("Susan");
alert(p1.friends); //Tom,Boo,Susan
alert(p2.friends); //Tom,Boo

上面的例子定義了一個Person構(gòu)造函數(shù)，并初始化了name、age和friends三個屬性。接著創(chuàng)建了兩個實例對象，分別為p1和p2。觀察這個例子，每個屬性都是為各自所擁有的，并不會相互影響。這就是因為每個實例對象都擁有一份屬性的副本。

每個實例對象都有一個屬性指向它的構(gòu)造函數(shù)，這屬性就是constructor：

function Person(name,age){
  this.name=name;
  this.age=age;
}
var p1=new Person("Lily",20);
var p2=new Person("Sam",30);
alert(p1.constructor==Person); //true
alert(p2.constructor==Person); //true

構(gòu)造函數(shù)有一個prototype屬性，指向原型對象。

原型對象和實例對象

在javascript中，每個對象都有一個與之相關(guān)聯(lián)的對象，那就是它的原型對象。類的所有實例對象都從它的原型對象上繼承屬性。

原型對象是類的唯一標識：當(dāng)且僅當(dāng)兩個對象繼承自同一個原型對象時，它們才是屬于同一個類的實例。

前面有提到，構(gòu)造函數(shù)擁有一個prototype屬性，指向原型。換句話來說，一個對象的原型就是它的構(gòu)造函數(shù)的prototype屬性的值。當(dāng)一個函數(shù)被定義的時候，它會自動創(chuàng)建和初始化prototype值，它是一個對象，這時這個對象只有一個屬性，那就是constructor，它指回和原型相關(guān)聯(lián)的那個構(gòu)造函數(shù)?？磦€例子：

function Person(name,age){
  this.name=name;
  this.age=age;
}
alert(Person.prototype); //[object Object]
alert(Person.prototype.constructor==Person); //true

也可以通過原型來創(chuàng)建屬性和方法。通過原型創(chuàng)建的屬性和方法是被所有實例所共享的。即，在一個實例中修改了該屬性或方法的值，那么所有其他實例的屬性或方法值都會受到影響：

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.friends=["Tom","Sam"];
var p1=new Person("Lily",24);
var p2=new Person("Susan",20);
alert(p1.friends); //Tom,Sam
alert(p2.friends); //Tom,Sam
p1.friends.push("Bill");
alert(p1.friends); //Tom,Sam,Bill
alert(p2.friends); //Tom,Sam,Bill

由上面的例子可以看出，用原型定義的屬性是被所有實例共享的。為p1添加了一個朋友，導(dǎo)致p2也添加了這個朋友。

其實，很多情況下，這種現(xiàn)象并不是我們想看到的。那么什么時候應(yīng)該用構(gòu)造函數(shù)初始化屬性和方法，哪些時候又該由原型對象來定義呢？

通常建議在構(gòu)造函數(shù)內(nèi)定義一般成員，即它的值在每個實例中都將不同，尤其是對象或數(shù)組形式的值；而在原型對象中則定義一些所有實例所共享的屬性，即在所有實例中，它的值可以是相同的屬性。

當(dāng)用構(gòu)造函數(shù)創(chuàng)建一個實例時，實例的內(nèi)部也包含了一個指針，指向構(gòu)造函數(shù)的原型對象。一些瀏覽器中，支持一個屬性__proto__來表示這個內(nèi)部指針：

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
  alert(this.name);
}
var p1=new Person("Lily",24);
alert(p1.__proto__.sayName); //function (){alert(this.name);}
alert(p1.__proto__.constructor==Person); //true

在ECMAscript5中新增了一個方法，Object.getPrototypeOf()，可以返回前面提到的實例對象內(nèi)部的指向其原型的指針的值：

function Person(name,age){
 this.name=name;
 this.age=age;
}
var p1=new Person("Lily",24);
alert(Object.getPrototypeOf(p1)==Person.prototype); //true

isPrototypeOf()方法也可用于確定實例對象和其原型之間的這種關(guān)系：

function Person(name,age){
  this.name=name;
  this.age=age;
}
var p1=new Person("Lily",24);
alert(Person.prototype.isPrototypeOf(p1)); //true

原型語法

從前面介紹原型對象于實例對象及構(gòu)造函數(shù)的關(guān)系中，我們已經(jīng)知道，給原型對象添加屬性和方法只要像這樣定義即可：Person.prototype=name。

那么是否每定義一個Person的屬性，就要敲一遍Person.prototype呢？答案是否定的，我們也可以像用對象字面量創(chuàng)建對象那樣來創(chuàng)建原型對象：

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(p1.name); //Tom
alert(p1.age); //29

有一點要注意，這個方法相當(dāng)于重寫了整個原型對象，因此切斷了它與構(gòu)造函數(shù)的關(guān)系，此時Person.prototype.constructor不再指向Person：

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //false
alert(Person.prototype.constructor==Object); //true

因此，如果想要讓它重新指向Person，可以顯示的進行賦值：

function Person(){
}
Person.prototype={
 constructor:Person,
 name:"Tom",
 age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //true
alert(Person.prototype.constructor==Object); //false

總結(jié)

最后，我們拿一個例子，再來理理構(gòu)造函數(shù)、原型對象以及實例對象之間的關(guān)系：

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
  alert(this.name);
}
var p1=new Person("Tom",20);
alert(Person.prototype); //object
alert(Person.prototype.constructor==Person); //true
alert(p1.constructor==Person); //true
alert(p1.__proto__==Person.prototype); //true
alert(p1.__proto__.__proto__==Object.prototype); //true
alert(p1.__proto__.__proto__.constructor==Object); //true
alert(Person.constructor==Function); //true
alert(Object.prototype.constructor==Object);

JavaScript的特點

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行。

看完上述內(nèi)容，你們對如何在JavaScript中使用原型對象和構(gòu)造函數(shù)有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。