這篇文章主要介紹了JavaScript中的實(shí)例對(duì)象與原型對(duì)象,針對(duì)constructor屬性和prototype屬性展開(kāi)來(lái)講,需要的朋友可以參考下

首先聲明：javascript中每個(gè)對(duì)象都有一個(gè)constructor屬性和一個(gè)prototype屬性。constructor指向?qū)ο蟮臉?gòu)造函數(shù)，prototype指向使用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象。

function Person(){ 

 } 

var person = new Person(); 

Person.prototype = { 

 constructor : Person, 

 name : 'zxs', 

 age : 24, 

 sayName : function(){alert(this.name)} 

 } 

person.sayName(); 

在這段代碼中會(huì)報(bào)錯(cuò)，sayName() is not defined。根據(jù)javascript高級(jí)程序設(shè)計(jì)第二版的解釋?zhuān)且驗(yàn)橹貙?xiě)的原型切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。但是我們調(diào)整一下上面語(yǔ)句的順序。如下：

function Person(){ 

 } 

//var person = new Person(); 

Person.prototype = { 

 constructor : Person, 

 name : 'zxs', 

 age : 24, 

 sayName : function(){alert(this.name)} 

} 

/*===========================================================*/

var person = new Person(); 

/*===========================================================*/

 person.sayName(); // zxs 

alert(person.constructor) //function Object() { [native code]} or function Person() {} 取決與藍(lán)色的語(yǔ)句是否有效 

注意上面兩段代碼等號(hào)中間的語(yǔ)句。按第二段的順序?qū)懘a，將會(huì)輸出 ”zxs“，這個(gè)結(jié)果說(shuō)明在第一種情況下報(bào)錯(cuò)并不能說(shuō)明是因?yàn)榍袛嗔藰?gòu)造函數(shù)與原想之間的聯(lián)系引起的。

Person.prototype = ｛｝ 

本來(lái)就是一種定義對(duì)象的方法，而且在javascript中每個(gè)對(duì)象的constructor屬性都默認(rèn)的指向Object構(gòu)造函數(shù)，這也就不難說(shuō)明重寫(xiě)原型對(duì)象確實(shí)切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系，但并不能說(shuō)明這種聯(lián)系被切斷之后 person就不能訪問(wèn)到sayName()函數(shù)。

現(xiàn)在有這樣的假設(shè)：函數(shù)的prototype屬性所指向的原型對(duì)象，與我們顯示新建的原型對(duì)象并不是完全等同的。當(dāng)我們調(diào)用函數(shù)的時(shí)候會(huì)創(chuàng)建一個(gè)原型對(duì)象，此時(shí)會(huì)首先查找當(dāng)前環(huán)境中是否存在其原型對(duì)象，如果程序中不存在，就創(chuàng)建一個(gè)，如果環(huán)境中存在，側(cè)查找他們的屬性和方法，最后根據(jù)查找的結(jié)果返回一個(gè)原型對(duì)象，這個(gè)對(duì)象中的屬性和方法總是優(yōu)先使用默認(rèn)原型中的屬性和方法，也就是構(gòu)造函數(shù)中定義的屬性和方法。當(dāng)當(dāng)調(diào)用的方法或?qū)傩圆淮嬖谟谀J(rèn)的原型中時(shí)，才使用定義在Person.prototype = {} 的屬性和方法。

javascript是解釋性的語(yǔ)言，語(yǔ)句都是順序執(zhí)行的，在第一段代碼中，當(dāng)我們使用 new 關(guān)鍵字創(chuàng)建新對(duì)象的時(shí)候，Person.prototype = {} 并沒(méi)有執(zhí)行，也就是說(shuō)在當(dāng)前的執(zhí)行環(huán)境中找不到其中定義的方法和屬性，而構(gòu)造函數(shù)中沒(méi)有該方法，所以出錯(cuò)。就像一個(gè)變量，給他賦值的時(shí)候程序沒(méi)有執(zhí)行將不能使用。在第二段中環(huán)境中已經(jīng)存在該調(diào)用的方法，構(gòu)造函數(shù)的原型對(duì)象已經(jīng)創(chuàng)建完畢，所以可以得到結(jié)果。

再看下面的一段程序：

////////////////////////////////////////////////////////////////////////// 

function Person(){} 

/*===========================================================*/

 var person = new Person(); 

Person.prototype.name = 'song'; 

/*===========================================================*/

//Person.prototype.sayName = function(){alert(this.name)}; 

Person.prototype = { 

constructor : Person, 

name : 'zxs', 

age : 24, 

sayName : function(){alert(this.name)} 

} 

person.sayName(); // error 

////////////////////////////////////////////////////////////////////////// 

function Person(){  } 

/*var person = new Person();*/

Person.prototype.name = 'song';  

/*Person.prototype.sayName = function(){alert(this.name)};*/

Person.prototype = {   

constructor : Person, 

  name : 'zxs', 

  age : 24, 

  sayName : function(){alert(this.name)} 

} 

/*===========================================================*/

var person = new Person(); 

/*===========================================================*/

person.sayName(); // zxs 

從這里可以看出使用 Person.prototype.name = '',的方式不論在什么地方創(chuàng)建對(duì)象都能被訪問(wèn)，如果同時(shí)存在對(duì)象字面量和這種方法定義原型對(duì)象，將使用后定義的作為最終值。并且對(duì)原型對(duì)象使用對(duì)象字面量定義之后，該定義必須出現(xiàn)在創(chuàng)建對(duì)象的語(yǔ)句之前才能被訪問(wèn)到。

實(shí)例不能訪問(wèn)到原型對(duì)象中的屬性和方法，不僅僅是因?yàn)橹貙?xiě)原型對(duì)象切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。

function Person(){  

  }  

var person = new Person();  

Person.prototype = {  

  //constructor : Person,  

  name : 'zxs',  

  age : 24,  

  sayName : function(){alert(this.name)}  

  }  

person.sayName();  

以上代碼在實(shí)例化對(duì)象時(shí)構(gòu)造函數(shù)的原型為空，它沒(méi)有任何除默認(rèn)屬性以外的屬性。重寫(xiě)構(gòu)造函數(shù)的原型確實(shí)切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。

在使用 new 操作符以后構(gòu)造函數(shù)的原型對(duì)象中的屬性和方法已經(jīng)添加到 person對(duì)象中。因?yàn)橐陨戏椒楹瘮?shù)原型添加新屬性和方法不具有動(dòng)態(tài)性，所以person不能訪問(wèn)到新添加的屬性和方法。

重寫(xiě)原型對(duì)象之后，就如同如下代碼：

var o = { 

  name : 'zxs'

  } 

var obj = o; 

o = {} 

console.log(o.name);  

此時(shí)輸出的值是undefined，因?yàn)?，?duì)象是一個(gè)引用類(lèi)型，“=”是賦值操作符，并且其運(yùn)算順序是從右往左。o={}就是說(shuō)o的指向已經(jīng)改變，是一個(gè)空對(duì)象。

Person.prototype.mothed = function() {}與Person.prototype={mothed:function(){}}的區(qū)別就如同 arr = []和arr.push()一樣，前者都是修改自身，后者是完全改變自身。