JavaScript原型對象

Lorry_Lu 發布于2019-08-21 10:39 / 839人閱讀

摘要：在默認情況下，所有原型對象都會自動獲得一個構造函數屬性，這個屬性包含一個指向屬性所在函數的指針。不過，要明確的真正重要的一點就是，這個連接存在于實例與構造函數的原型對象之間，而不是存在于實例與構造函數之間。

本篇文章主要講JavaScript對象中的原型模式：

1、理解原型對象

無論什么時候，只要創建了一個新函數，就會根據一組特定的規則為該函數創建一個prototype屬性，這個屬性指向函數的原型對象。在默認情況下，所有原型對象都會自動獲得一個constructor（構造函數）屬性，這個屬性包含一個指向prototype屬性所在函數的指針。
創建了自定義的構造函數之后，其原型對象默認只會取得constructor屬性，至于其他方法，則都是從object繼承而來的。當調用構造函數創建一個新實例后，該實例的內部將包含一個指針（內部屬性），指向構造函數的源性對象。ECMA-262第5版中管這個指針叫[[prototype]]。雖然在腳本中沒有標準的方式訪問[[prototype]]，但FireFox、Safari和chrome在每個對象上都支持一個屬性：proto；而在其他實現中，這個屬性對腳本則是完全不可見的。不過，要明確的真正重要的一點就是，這個連接存在于實例與構造函數的原型對象之間，而不是存在于實例與構造函數之間。

如下一段代碼：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    person1.sayName();  //"Jessiva"

    var person2=new Person();
    person2.sayName();   //"Jessiva"

    alert(person1.sayName==person2.sayName); //true

下圖展示了這段代碼的各個對象之間關系：

雖然在所有的實現中都無法訪問到[[prototype]]，但可以通過isPrototypeOf()方法來確定對象之間是否存在這種關系。從本質上講，如果[[prototype]]指向調用isPrototypeOf()方法的對象（Person.prototype）,那么這個方法就返回true，如下所示：

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

在ECMAScript5增加了一個新方法，叫object.getPrototypeOf(),在所有支持的實現中，這個方法返回[[prototype]]的值。例如：

alert(Object.getPrototypeOf(person1)==Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);  //"Jessica"

使用Object.getPrototypeOf()可以方便的取得一個對象的原型，而這在利用原型實現繼承（稍后會有文章更新）的情況下是非常重要的。

雖然可以通過對象實例訪問保存在原型中的值，但卻不恩能夠通過對象實例重寫原型中的值，如果我們再實例中添加了一個屬性，而該屬性與實例原型中的一個屬性同名，那我們就在實例中創建該屬性，該屬性將會屏蔽原型中的那個屬性。來看下面的例子：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    var person2=new Person();
    
    person1.name="Greg";
    alert(person1.name); //"Greg"--來自實例
    alert(person2.name); //"Jessica"--來自原型

使用delete操作符則可以完全刪除實例屬性，從而讓我們能夠重新訪問原型中的屬性。

使用hasOwnProperty()方法則可以檢測一個屬性是存在于實例中還是存在于原型中。這個方法（繼承于Object）只在給定屬性存在于對象實例中，才會返回true。

云服務器 GPU云服務器 javascript原型 javascript對象 javascript 面向對象 javascript對象方法

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

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

理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
JavaScript基礎之創建對象、原型、原型對象、原型鏈

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數。同理數組通過調用函數通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。對象的創建在JavaScript中創建一個對象有三種方式?？梢酝ㄟ^對象直接量、關鍵字new和Object.create()函數來創建對象。 1. 對象直接量創建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

wangbjun 2019-08-22 15:16 評論0 收藏0
深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
(JavaScript)原型與原型對象

摘要：值得注意的是原型對象也擁有一個屬性指向其函數。以上的原因就造成了很少有使用純的原型模式創建對象，而其他混合使用原型模式的創建對象模式就不在這里展開說了。第一次記錄自己學習的腳步，我選擇了JavaScript中自認為比較熟悉的一小部分來說，誠摯的希望能夠得到各位前輩的批評與指正。而對于看到我這篇筆記希望從這篇筆記中收獲知識的讀者，我希望你們可以參考權威，擁有自己的真知灼見而不聽我一家之...

Muninn 2019-08-26 11:49 評論0 收藏0