設(shè)計(jì)模式——原型模式

wapeyang 發(fā)布于2019-08-20 10:25 / 924人閱讀

摘要：原型模式示例描述用原型實(shí)例指向創(chuàng)建對(duì)象的類使用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性及方法當(dāng)然是基于原型鏈實(shí)現(xiàn)對(duì)象之間的繼承這種繼承是基于一種對(duì)屬性或者方法的共享而不是對(duì)屬性和方法的復(fù)制案例假設(shè)頁面中有很多焦點(diǎn)圖具有不同的切換效果有上下切換左

原型模式 示例描述

用原型實(shí)例指向創(chuàng)建對(duì)象的類, 使用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性及方法. 當(dāng)然javascript是基于原型鏈實(shí)現(xiàn)對(duì)象之間的繼承,
這種繼承是基于一種對(duì)屬性或者方法的共享, 而不是對(duì)屬性和方法的復(fù)制.

案例

假設(shè)頁面中有很多焦點(diǎn)圖, 具有不同的切換效果, 有上下切換, 左右切換, 漸隱漸現(xiàn).

實(shí)現(xiàn)

// 圖片輪播類
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr;            // 輪播圖片數(shù)組
    this.container = container;            // 輪播圖片容器
};

LoopImages.prototype = {
    createImage: function() {            // 創(chuàng)建輪播圖片

    },
    changeImage: function() {            // 切換下一張圖片

    }
};

// 上下滑動(dòng)切換類
var SlideLoopImg = function(imgArr, container) {
    // 構(gòu)造函數(shù)繼承
    LoopImages.call(this, imgArr, container);
};

SlideLoopImg.prototype = new LoopImages();
// 重寫繼承的切換下一張圖片
SlideLoopImg.prototype.changeImage = function() {};

GPU云服務(wù)器云服務(wù)器原型模式原型設(shè)計(jì) 代碼設(shè)計(jì)模式工廠模式設(shè)計(jì)模式觀察者模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80139.html

相關(guān)文章

理解JavaScript的核心知識(shí)點(diǎn)：原型

摘要：首先，需要來理清一些基礎(chǔ)的計(jì)算機(jī)編程概念編程哲學(xué)與設(shè)計(jì)模式計(jì)算機(jī)編程理念源自于對(duì)現(xiàn)實(shí)抽象的哲學(xué)思考，面向?qū)ο缶幊淌瞧湟环N思維方式，與它并駕齊驅(qū)的是另外兩種思路過程式和函數(shù)式編程。 JavaScript 中的原型機(jī)制一直以來都被眾多開發(fā)者（包括本人）低估甚至忽視了，這是因?yàn)榻^大多數(shù)人沒有想要深刻理解這個(gè)機(jī)制的內(nèi)涵，以及越來越多的開發(fā)者缺乏計(jì)算機(jī)編程相關(guān)的基礎(chǔ)知識(shí)。對(duì)于這樣的開發(fā)者來說 J...

iKcamp 2019-08-23 18:34 評(píng)論0 收藏0
JS函數(shù)的工廠模式、構(gòu)造函數(shù)模式、原型模式的區(qū)別

摘要：于是就有了構(gòu)造函數(shù)和原型模式混合模式組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建自定義類型最常見的方式，就是組合模式。創(chuàng)建對(duì)象 JS有六種數(shù)據(jù)數(shù)據(jù)類型，其中五種屬于基本數(shù)據(jù)類型：Null、Boolean、undefined、String、Number。而其它值都是對(duì)象。數(shù)組是對(duì)象，函數(shù)是對(duì)象，正則表達(dá)式是對(duì)象。對(duì)象也是對(duì)象。來看一下對(duì)象的定義：無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象、或...

william 2019-08-26 11:49 評(píng)論0 收藏0
理解js對(duì)象

摘要：將構(gòu)造函數(shù)的作用域賦值給新對(duì)象因此指向了新對(duì)象執(zhí)行構(gòu)造函數(shù)的代碼為這個(gè)新對(duì)象添加屬性返回對(duì)象最初是用來標(biāo)識(shí)對(duì)象類型的。但提到檢測(cè)對(duì)象類型，還是使用將構(gòu)造函數(shù)當(dāng)作函數(shù)構(gòu)造函數(shù)與其他函數(shù)唯一區(qū)別。創(chuàng)建對(duì)象雖然Object構(gòu)造函數(shù)與對(duì)象字面量都能創(chuàng)建單個(gè)對(duì)象，但這些方式都有明顯的缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，會(huì)產(chǎn)生大量重復(fù)代碼。 var obj = {}; //對(duì)象字面量 va...

zhouzhou 2019-08-21 16:56 評(píng)論0 收藏0
JS 原型模式

摘要：你可以使用像下面這樣的代碼為上面的例子來實(shí)現(xiàn)車輛模具是福特總結(jié)原型模式在里的使用簡(jiǎn)直是無處不在，其它很多模式有很多也是基于的，這里大家要注意的依然是淺拷貝和深拷貝的問題，免得出現(xiàn)引用問題。 1. 簡(jiǎn)介原型模式(Prototype pattern)，用原型實(shí)例指向創(chuàng)建對(duì)象的類，使用于創(chuàng)建新的對(duì)象的類的共享原型的屬性與方法。 2. 實(shí)現(xiàn) 對(duì)于原型模式，我們可以利用JavaScript特有...

Coding01 2019-08-22 11:17 評(píng)論0 收藏0
讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之封裝類

摘要：創(chuàng)建構(gòu)造函數(shù)后，其原型對(duì)象默認(rèn)只會(huì)取得屬性至于其他的方法都是從繼承來的。上圖展示了構(gòu)造函數(shù)的原型對(duì)象和現(xiàn)有的兩個(gè)實(shí)例之間的關(guān)系。所有原生的引用類型都在其構(gòu)造函數(shù)的原型上定義了方法。第6章我一共寫了3篇總結(jié)，下面是相關(guān)鏈接：讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之理解對(duì)象讀《javaScript高級(jí)程序設(shè)計(jì)－第6章》之繼承工廠模式所謂的工廠模式就是，把創(chuàng)建具體對(duì)象的過程抽象...

seal_de 2019-08-21 17:15 評(píng)論0 收藏0
JavaScript面向?qū)ο蟮某绦?em>設(shè)計(jì)

摘要：目錄導(dǎo)語理解對(duì)象和面向?qū)ο蟮某绦蛟O(shè)計(jì)創(chuàng)建對(duì)象的方式的繼承機(jī)制原型對(duì)象原型鏈與原型對(duì)象相關(guān)的方法小結(jié)導(dǎo)語前面的系列文章，基本把的核心知識(shí)點(diǎn)的基本語法標(biāo)準(zhǔn)庫等章節(jié)講解完本章開始進(jìn)入核心知識(shí)點(diǎn)的高級(jí)部分面向?qū)ο蟮某绦蛟O(shè)計(jì)，這一部分的內(nèi)容將會(huì)對(duì)對(duì)象目錄導(dǎo)語 1.理解對(duì)象和面向?qū)ο蟮某绦蛟O(shè)計(jì) 2.創(chuàng)建對(duì)象的方式 3.JavaScript的繼承機(jī)制 3.1 原型對(duì)象 3.2 原型鏈 3.3 與...

gitmilk 2019-08-20 13:30 評(píng)論0 收藏0