淺談JS中的構造函數、原型對象(prototype)、實例中的屬性/方法之間的關系

kevin 發布于2019-08-23 12:56 / 2055人閱讀

摘要：同時給該構造函數自動添加一個屬性，該屬性為指針，指向原型對象。總結構造函數中的屬性和方法僅為聲明和定義，一旦實例化工作完成后。實例對象自身的屬性和方法與構造函數將不在存在關聯關系。

構造函數：函數中的一種，通過關鍵字new可以創建其實例。為了便于區分，通常首字母大寫；
原型對象：一種特殊的對象，構造函數創建時即自動生成；與構造函數形成一一對應，如同人和影子般的關系；
實例：通過構造函數實例出來的對象；

　　在定義構造函數時，在其內部(“{“和”}”)進行定義屬性和方法。當我們通過關鍵字new，對構造函數進行實例化的時候。實例會對構造函數的這些屬性進行拷貝出一份副本，然后將其歸屬為當前實例。不同實例間的屬性和方法是完全獨立的，如下例子：

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
           alert(this.name);
    };
}

var HL = new Person("hailing",18);
var JJ = new Person("jiajia",20);

HL.sayName(); // hailing
JJ.sayName(); // jiajia

HL.name = "HAILING";

HL.sayName(); // HAILING
JJ.sayName(); // jiajia

　　我們通過創建了new對Person進行實例化兩個對象“HL”、“JJ”，當我們在修改“HL”的名字時，“JJ”的名字不會隨之而改變。

　　程序執行時，會自動生成一個原型對象(prototype)與之相關聯。同時給該構造函數自動添加一個屬性：prototype，該屬性為指針，指向原型對象。同時，也給該原型對象添加一個屬性：constructor，該屬性也為指針，指向與其對應的構造函數。此時，原型對象中只會包含些默認的方法和屬性。

　　實例化完成后，所有實例均會與原型對象形成多對一的隱性關聯關系。所有實例會共享原型對象的屬性和方法，當然也包括constructor。當原型對象被添加一個屬性或者方法后，均會被所有實例共享，即可以通過任意一個實例進行訪問。如果原型對象的屬性或方法與實例的屬性或方法名稱一致，則實例自身的屬性或方法優先級高于原型對象上的:

Person.prototype.sex = "girl";
Person.prototype.saySex = function (){
   alert(this.sex);
};
alert(HL.saySex === JJ.saySex); // true
alert(HL.saySex === Person.prototype.saySex); // true

Person.prototype.stature = 165;
alert(HL.stature); // 165
alert(JJ.stature); // 165

HL.stature = 160;
alert(HL.stature); // 160
alert(JJ.stature); // 165

delete HL.stature;
Person.prototype.stature = 170;
alert(HL.stature); // 170
alert(JJ.stature); // 170

　　例子中，給原型對象增加了sex屬性和saySex方法，此時通過實例對象“HL”和“JJ”訪問并且進行比較，同時也和原型對象自身的saySex進行比較，結果為ture；而后又給原型對象增加了stature屬性，此時“HL”和“JJ”中均無此屬性，故訪問了原型對象中的stature屬性。當我們多帶帶給“HL”增加了stature屬性后，“HL”不在訪問原型對象，而是訪問“HL”自身的該屬性。當我們通過關鍵字“delete”刪除“HL”自身的屬性后，再次訪問時，又回重新訪問原型對象上的屬性。

總結： 構造函數中的屬性和方法僅為聲明和定義，一旦實例化工作完成后。實例對象自身的屬性和方法與構造函數將不在存在關聯關系。原型對象與實例對象形成“備胎”關系，當通過對象訪問屬性或方法時，程序會優先搜索對象本身的屬性或方法，不存在才會訪問原型對象的方法或者屬性。

　　因此，當多個實例需要使用同一個屬性或方法時，我們應該將該方法放于原型對象上，從而避免相同屬性或方法多次獨立存在于多個對象導致內存浪費。

云服務器 GPU云服務器 js包裝對象中的屬性 ava類中的構造函數 js中的對象 js中的字符串方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99104.html

js面向對象淺談（二）

摘要：我們通過這個構造函數為原型對象添加其他方法和屬性。這個屬性存在與實例與構造函數的原型對象上直接，而不存在于實例與構造函數之間。李小花班花張全蛋張全蛋李小花李小花我們在遍歷對象的的屬性的時候，經常需要判斷屬性是否來自于對象的原型還是屬性。引言上面說了創建對象有字面量方式和工廠模式還有構造函數模式，結果發現他們都各自有缺點，所以下面再給大家介紹幾種創建對象的方式，爭取能找到一種無痛的模...

Yuanf 2019-08-20 17:20 評論0 收藏0
淺談javascript的原型及原型鏈

摘要：在中，主要有兩種創建對象的方法分別是對象字面量以及調用構造函數對象字面量調用構造函數其實上述兩種創建對象的方法，本質上是一樣的，都是引擎調用對象的構造函數來新建出一個對象。原型與原型鏈是javascript里面最最核心的內容，如果不能理解它們之間的存在關系的話，那么我們是不能理解這門語言的。在JS中，主要有兩種創建對象的方法, 分別是對象字面量以及調用構造函數 //對象字面量 va...

includecmath 2019-08-20 14:17 評論0 收藏0
淺談 JavaScript 原型鏈

摘要：數組的構造函數是原型鏈的指向與其他除以外的構造函數相同，的也指向頂級原型對象，每一個數組都是的實例，都指向。實例對象查找構造函數原型對象的方法一般會把對象共有的屬性和方法都放在構造函數的原型對象上。 showImg(https://segmentfault.com/img/remote/1460000018998704?w=900&h=506); 閱讀原文概述在 JavaScr...

explorer_ddf 2019-08-23 12:18 評論0 收藏0
淺談JavaScript原型與原型鏈

摘要：在講原型之前，先簡單介紹一下幾個概念構造函數例如上述代碼創建的函數就被稱為構造函數。同一個構造函數實例化得到的多個對象具有相同的原型對象，所以經常使用原型對象來實現繼承。實例對象通過操作構造函數所創建的對象是實例對象。對于很多前端開發者而言，JavaScript的原型實在是很讓人頭疼，所以我這邊就整理了一下自己對應原型的一點理解，分享給大家，供交流使用原型說起原型，那就不得不說p...

Zoom 2019-08-20 19:06 評論0 收藏0