JavaScript學習總結——原型

Winer 發布于2019-08-19 18:05 / 3297人閱讀

摘要：構造函數，實例對象和原型對象的關系實例對象就是通過構造函數創造的，默認擁有一個屬性指向其構造函數。

什么是原型

首先，原型是一個對象。而且所有的對象都有一個原型（有一種例外：當把對象的原型設為null時），并且任何對象都可以成為一個原型。

當我們定義一個對象時 var a = new Object(); 默認的原型在原型鏈的頂端。

原型有什么好處

原型最大的好處體現在它的共享的特性。所有原型對象的實例對象共享它所包含的屬性和方法。所以我們常用利用原型來創建對象，也就是 原型模式。

原型模式

原型模式 是一種用來創建多個實例對象的方法，我們常常把它和 構造函數結合起來用來創建特定類型的對象。

我們創建的每一個函數都有一個 prototype 屬性，這個屬性是一個指針，指向一個對象。這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。這個對象就是實際上通過調用構造函數而創建的 實例對象 的原型對象。看代碼：

// 構造函數
function Person(){};

Person.prototype.name = "darko";
Person.prototype.age = 21;
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
person1.sayName();  // "darko"

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

我們將所有的屬性和sayName()方法添加到了構造函數Person的prototype屬性中，構造函數成了空函數。但是即便如此，我們也可以通過調用構造函數來創建新對象，而且新對象還會具有相同的屬性和方法。

構造函數，實例對象和原型對象的關系

實例對象就是通過構造函數創造的，默認擁有一個constructor屬性指向其構造函數。

原型對象就是構造函數的屬性prototype指向的那個對象，同時也是基于構造函數生成的實例對象的原型對象。在默認情況下，所有的原型對象都會自動獲得一個constructor屬性，這個屬性是一個指針，指向其構造函數。

實例對象可以訪問原型對象上的屬性和方法。在實例對象的內部有一個屬性（內部屬性）[[Prototype]]指向其原型對象。有一種非標準方法__proto__訪問[[Prototype]]。

在上面的例子中person1和person2就是實例對象，構造函數為Person，原型對象為Person.prototype。

來，看個栗子（還是上面那段代碼）:

alert(person1.constructor === Person);  // true

alert(Person.prototype.constructor === Person);  // true

alerta(person1.__proto__ === Person.prototype); // true

來看個圖你就什么都懂了：

理解prototype，getPrototypeOf和 proto 之間的不同

prototype是函數的一個默認屬性，只有函數對象才有

Object.getPrototypeOf()方法用來返回實例對象內部屬性[[prototype]]的值。這是ES5中定義的用來獲取原型對象的標準方法。

__proto__屬性是獲取原型對象的非標準方法（IE不支持）
看個栗子（還是上面那段代碼）:

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

alert(person1.__proto__ === Person.prototype);    // true
alert(person1.__proto__.name);  // "darko"

原型模式下的對象

每次查找對象的每個屬性，都是一次搜索。搜索從實例對象本身開始，如果在實例對象中找到，停止查找，返回值。如果沒有則繼續搜索實例對象指向的原型對象。

若實例對象中屬性和其指向的原型對象的屬性重名，實例對象中的屬性屏蔽原型對象中的那個屬性。
舉個栗子：

function Person(){};

Person.prototype.name = "darko";
Person.prototype.age = 21;
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
var person2 = new Person();

person1.name = "leon";
person1.sayName();   // "leon"，來自實例
person2.sayName()   // "darko"，來自原型

delete person1.name;
person1.sayName();  // "darko"，來自原型

可以利用hasOwnProperty()方法判斷一個屬性是位于實例中，還是原型中。只有在屬性來自實例中時，才會返回true。通常和in操作符配合使用。

// 接上
alert("name" in person1);   // true
alert(person1.hasOwnProperty("name"));  // false

原生對象的原型

所有的原生引用類型都在其原構造函數的原型上定義了方法，例如，Array.prototype.sort()方法，正是由于原型的共享特性，我們定義的數組才可以使用sort()方法等一系列的方法。
舉個栗子：

var num = [1, 5, 3, 7, 9];
num.sort(); // 1,3,5,7,9
alert(num.constructor === Array);   // true
alert(num.__proto__ === Array.prototype);    // true
alert(num.__proto__.__proto__ === Object.prototype);    //true

數組對象num本身就是構造器Array的實例對象，而Array的prototype屬性指向的對象上定義了sort()方法，所以新定義了num對象經過搜索找到了sort()方法，并調用了方法。

原型的動態性

由于在原型中查找值的過程是一次搜索，所以對原型對象的任何修改都能立即從實例上反應出來。
舉個栗子：

function Person(){};
var firend = new Person();
// 修改原型
Person.prototype.sayHi = function(){
    alert("Hi");
}

firend.sayHi(); // "Hi"

但是若將原型重寫，來看看有什么不同：

function Person(){};
Person.prototype.name = "darko";
var firend = new Person();
// 重寫了原型對象
Person.prototype = {
    constructor: Person,  // 注意：重寫原型對象，所以此時的constructor屬性變成了新對象的構造函數，默認為Object構造函數，應該將其設置回適當的值
    sayHi: function(){
        alert("Hi");
    }
}

alert(friend.name); // "darko"
firend.sayHi(); // error

這說明，重寫原型對象切斷了現有原型和任何之前已經存在的實例對象之間的聯系，它們引用的仍是最初的原型。

如果你覺得我寫的還可以，點一下推薦吧。

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

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

ES6學習總結（三）

摘要：不同于其他面向對象語言，以前的中中沒有類的概念，主要是通過原型的方式來實現繼承，中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一不同于其他面向對象語言，ES6以前的JavaScript中中沒有class類的概念，主要是通過原型的方式來實現繼承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 評論0 收藏0
JavaScript學習總結（五）原型和原型鏈詳解

摘要：原型對象內部也有一個指針屬性指向構造函數實例可以訪問原型對象上定義的屬性和方法。在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題私有變量和函數在函數內部定義的變量和函數，如果不對外提供接口，外部是無法訪問到的，也就是該函數的私有的變量和函數。 function ...

EscapedDog 2019-08-21 12:28 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JavaScript學習總結（二）數組和對象部分

摘要：屬性是一個值或一組值以數組或對象的形式，是對象的成員。可以使用內置構造函數和創建包裝對象。因此下面的代碼將會使人很迷惑結果結果，此數組長度為應該盡量避免使用數組構造函數創建新數組。給數組對象添加返回數組中最大元素值的方法。對象部分 Object類型 Object 是一個無序的集合，可以存放任意類型對象，所有其他對象都繼承自這個對象。創建Object類型有兩種，一種是使用new運算符，...

Lsnsh 2019-08-21 12:27 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0