舉例說明JavaScript中的執行個體對象與原型對象，javascript執行個體

舉例說明JavaScript中的執行個體對象與原型對象，javascript執行個體

首先聲明：javascript中每個對象都有一個constructor屬性和一個prototype屬性。constructor指向對象的建構函式，prototype指向使用建構函式建立的對象執行個體的原型對象。

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。根據javascript進階程式設計第二版的解釋，是因為重寫的原型切斷了建構函式與最初原型之間的聯絡。但是我們調整一下上面語句的順序。如下：

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() {} 取決與藍色的語句是否有效 

注意上面兩段代碼等號中間的語句。按第二段的順序寫代碼，將會輸出 ”zxs“，這個結果說明在第一種情況下報錯並不能說明是因為切斷了建構函式與原想之間的聯絡引起的。

Person.prototype = ｛｝ 

本來就是一種定義對象的方法，而且在javascript中每個對象的constructor屬性都預設的指向Object建構函式，這也就不難說明重寫原型對象確實切斷了建構函式與最初原型之間的聯絡，但並不能說明這種聯絡被切斷之後 person就不能訪問到sayName()函數。

現在有這樣的假設：函數的prototype屬性所指向的原型對象，與我們顯示建立的原型對象並不是完全等同的。當我們調用函數的時候會建立一個原型對象，此時會首先尋找當前環境中是否存在其原型對象，如果程式中不存在，就建立一個，如果環境中存在，側尋找他們的屬性和方法，最後根據尋找的結果返回一個原型對象，這個對象中的屬性和方法總是優先使用預設原型中的屬性和方法，也就是建構函式中定義的屬性和方法。噹噹調用的方法或屬性不存在於預設的原型中時，才使用定義在Person.prototype = {} 的屬性和方法。

javascript是解釋性的語言，語句都是順序執行的，在第一段代碼中，當我們使用 new 關鍵字建立新對象的時候，Person.prototype = {} 並沒有執行，也就是說在當前的執行環境中找不到其中定義的方法和屬性，而建構函式中沒有該方法，所以出錯。就像一個變數，給他賦值的時候程式沒有執行將不能使用。在第二段中環境中已經存在該調用的方法，建構函式的原型對象已經建立完畢，所以可以得到結果。

再看下面的一段程式：

//////////////////////////////////////////////////////////////////////////  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 = '',的方式不論在什麼地方建立對象都能被訪問，如果同時存在對象字面量和這種方法定義原型對象，將使用後定義的作為最終值。並且對原型對象使用對象字面量定義之後，該定義必須出現在建立對象的語句之前才能被訪問到。

執行個體不能訪問到原型對象中的屬性和方法，不僅僅是因為重寫原型對象切斷了建構函式與最初原型之間的聯絡。

function Person(){        }  var person = new Person();    Person.prototype = {    //constructor : Person,    name : 'zxs',    age : 24,    sayName : function(){alert(this.name)}    }      person.sayName();  

以上代碼在執行個體化對象時建構函式的原型為空白，它沒有任何除預設屬性以外的屬性。重寫建構函式的原型確實切斷了建構函式與最初原型之間的聯絡。

在使用 new 操作符以後建構函式的原型對象中的屬性和方法已經添加到 person對象中。因為以上方法為函數原型添加新屬性和方法不具有動態性，所以person不能訪問到新添加的屬性和方法。

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

var o = {   name : 'zxs'   }    var obj = o; o = {} console.log(o.name);  

此時輸出的值是undefined，因為，對象是一個參考型別，“=”是賦值操作符，並且其運算順序是從右往左。o={}就是說o的指向已經改變，是一個Null 物件。
Person.prototype.mothed = function() {}與Person.prototype={mothed:function(){}}的區別就如同 arr = []和arr.push()一樣，前者都是修改自身，後者是完全改變自身。

您可能感興趣的文章:

• javascript原型模式用法執行個體詳解
• javascript組合使用建構函式模式和原型模式執行個體
• JavaScript檢測執行個體屬性, 原型屬性
• javascript原型鏈繼承用法執行個體分析
• js對象繼承之原型鏈繼承執行個體
• js執行個體屬性和原型屬性樣本詳解