這篇文章主要介紹了JavaScript中的實例對象與原型對象,針對constructor屬性和prototype屬性展開來講,需要的朋友可以參考下

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

function Person(){ 

 } 

var person = new Person(); 

Person.prototype = { 

 constructor : Person, 

 name : 'zxs', 

 age : 24, 

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

 } 

person.sayName(); 

在這段代碼中會報錯，sayName() is not defined。根據(jù)javascript高級程序設(shè)計第二版的解釋，是因為重寫的原型切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。但是我們調(diào)整一下上面語句的順序。如下：

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)色的語句是否有效 

注意上面兩段代碼等號中間的語句。按第二段的順序?qū)懘a，將會輸出 ”zxs“，這個結(jié)果說明在第一種情況下報錯并不能說明是因為切斷了構(gòu)造函數(shù)與原想之間的聯(lián)系引起的。

Person.prototype = ｛｝ 

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

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

javascript是解釋性的語言，語句都是順序執(zhí)行的，在第一段代碼中，當(dāng)我們使用 new 關(guān)鍵字創(chuàng)建新對象的時候，Person.prototype = {} 并沒有執(zhí)行，也就是說在當(dāng)前的執(zhí)行環(huán)境中找不到其中定義的方法和屬性，而構(gòu)造函數(shù)中沒有該方法，所以出錯。就像一個變量，給他賦值的時候程序沒有執(zhí)行將不能使用。在第二段中環(huán)境中已經(jīng)存在該調(diào)用的方法，構(gòu)造函數(shù)的原型對象已經(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)建對象都能被訪問，如果同時存在對象字面量和這種方法定義原型對象，將使用后定義的作為最終值。并且對原型對象使用對象字面量定義之后，該定義必須出現(xiàn)在創(chuàng)建對象的語句之前才能被訪問到。

實例不能訪問到原型對象中的屬性和方法，不僅僅是因為重寫原型對象切斷了構(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();  

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

在使用 new 操作符以后構(gòu)造函數(shù)的原型對象中的屬性和方法已經(jīng)添加到 person對象中。因為以上方法為函數(shù)原型添加新屬性和方法不具有動態(tài)性，所以person不能訪問到新添加的屬性和方法。

重寫原型對象之后，就如同如下代碼：

var o = { 

  name : 'zxs'

  } 

var obj = o; 

o = {} 

console.log(o.name);  

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

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