JavaScript設計模式-原型模式

canopus4u 發布于2019-08-23 12:12 / 3121人閱讀

摘要：原型模式就是將可復用的，可共享的耗時大的從父類中提出來，然后放在其原型中，然后通過組合繼承或者寄生組合式繼承將方法和屬性繼承下來，對于子類中那些需要重寫的方法進行重寫，這樣子類創建的對象既有子類的屬性和方法，也共享了父類的原型方法。

原型模式

原型模式：用原型實例指向創建對象的類，使用于創建新的對象的類共享原型對象的屬性以及方法。
父類總是要被子類繼承的，如果將屬性和方法都寫在父類的構造函數里會有一些問題，比如每次子類繼承都要創建一次父類，假如父類的構造函數中創建時存在很多耗時的邏輯，或者每次初始化都要做一些重復性的東西，這樣性能消耗還是蠻大的。為了提高性能，我們需要一種共享機制。原型模式就是將可復用的，可共享的、耗時大的從父類中提出來，然后放在其原型中，然后通過組合繼承或者寄生組合式繼承將方法和屬性繼承下來，對于子類中那些需要重寫的方法進行重寫，這樣子類創建的對象既有子類的屬性和方法，也共享了父類的原型方法。
以圖片輪播為例：

//圖片輪播
var LoopImages = function (imgArr,container) {
    this.imageArray = imgArr;//輪播圖片數組
    this.container = container;//輪播圖片容器
}
LoopImages.prototype = {
    //創建輪播圖片
    createImage : function () {
        console.log("LoopImages createImage function");
    },
    //切換下一張圖片
    changeImage:function () {
        console.log("LoopImages changeImage function");
    }
}
//上下滑動切換類
var SlideLooImg = function (imgArr,container) {
    //構造函數繼承圖片輪播類
    LoopImages.call(this,imgArr,container);
}
SlideLooImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
SlideLooImg.prototype.changeImage = function () {
    console.log("SlideLoopImg changeImg function");
}
//漸隱切換類
var FadeLoopImg = function (imgArr,container,arrow) {
    LoopImages.call(this,imgArr,container);
    //切換箭頭私有變量
    this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
    console.log("FadeLoogImg changeImage function");
}
//實例化一個漸隱切換圖片類
var fadeImg = new FadeLoopImg(["01.img","02.img","03.img"],"slide",["left.jpg","right.jpg"]);
//測試用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型對象是一個共享的對象，無論是父類的實例對象還是子類的繼承，都是對它的一個指向引用，所以原型對象才會被共享。在任何時候，都可以對基類或者子類進行方法的拓展，并且所有被實例化的對象或者類都能獲取這些方法。
如下：

//原型的拓展
LoopImages.prototype.getImageLength = function () {
    return this.imageArray.length;
}
FadeLoopImg.prototype.getContainer = function () {
    return this.container;
}
console.log(fadeImg.getImageLength());//3
console.log(fadeImg.getContainer());//slide

云服務器 GPU云服務器原型模式 javascript設計模式 javascript命令模式 javascript嚴格模式

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

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

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

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

iKcamp 2019-08-23 18:34 評論0 收藏0
JavaScript設計模式與開發實踐 | 01 - 面向對象的JavaScript

摘要：在中，并沒有對抽象類和接口的支持。例如，當對象需要對象的能力時，可以有選擇地把對象的構造器的原型指向對象，從而達到繼承的效果。本節內容為設計模式與開發實踐第一章筆記。動態類型語言編程語言按數據類型大體可以分為兩類：靜態類型語言與動態類型語言。靜態類型語言在編譯時已確定變量類型，動態類型語言的變量類型要到程序運行時，待變量被賦值后，才具有某種類型。而JavaScript是一門典型...

suxier 2019-08-21 10:44 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript對象的幾種創建方式

摘要：三種使用構造函數創建對象的方法和的作用都是在某個特殊對象的作用域中調用函數。這種方式還支持向構造函數傳遞參數。叫法上把函數叫做構造函數，其他無區別適用情境可以在特殊的情況下用來為對象創建構造函數。一、工廠模式工廠模式：使用字面量和object構造函數會有很多重復代碼，在此基礎上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 評論0 收藏0
(JavaScript)原型與原型對象

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

Muninn 2019-08-26 11:49 評論0 收藏0
JavaScript面向對象的程序設計

摘要：目錄導語理解對象和面向對象的程序設計創建對象的方式的繼承機制原型對象原型鏈與原型對象相關的方法小結導語前面的系列文章，基本把的核心知識點的基本語法標準庫等章節講解完本章開始進入核心知識點的高級部分面向對象的程序設計，這一部分的內容將會對對象目錄導語 1.理解對象和面向對象的程序設計 2.創建對象的方式 3.JavaScript的繼承機制 3.1 原型對象 3.2 原型鏈 3.3 與...

gitmilk 2019-08-20 13:30 評論0 收藏0
javascript設計模式與開發實踐（二）- 封裝和原型模式

摘要：對象會記住它的原型給對象提供了一個名為的隱藏屬性，某個對象的屬性默認會指向它的構造器的原型對象，即。我們通過代碼來驗證再來實際上，就是對象跟對象構造器的原型聯系起來的紐帶切記這句話，對未來理解原型鏈很有幫助。封裝封裝數據在許多語言的對象系統中，封裝數據是由語法解析來實現的，這些語言也許提供了 private、public、protected 等關鍵字來提供不同的訪問權限。例如：j...

luxixing 2019-08-22 15:05 評論0 收藏0