JS 原型模式

Coding01 發(fā)布于2019-08-22 11:17 / 969人閱讀

摘要：你可以使用像下面這樣的代碼為上面的例子來實現(xiàn)車輛模具是福特總結原型模式在里的使用簡直是無處不在，其它很多模式有很多也是基于的，這里大家要注意的依然是淺拷貝和深拷貝的問題，免得出現(xiàn)引用問題。

1. 簡介

原型模式(Prototype pattern)，用原型實例指向創(chuàng)建對象的類，使用于創(chuàng)建新的對象的類的共享原型的屬性與方法。

2. 實現(xiàn)

對于原型模式，我們可以利用JavaScript特有的原型繼承特性去創(chuàng)建對象的方式，也就是創(chuàng)建的一個對象作為另外一個對象的prototype屬性值。原型對象本身就是有效地利用了每個構造器創(chuàng)建的對象，例如，如果一個構造函數(shù)的原型包含了一個name屬性（見后面的例子），那通過這個構造函數(shù)創(chuàng)建的對象都會有這個屬性。

在現(xiàn)有的文獻里查看原型模式的定義，沒有針對JavaScript的，你可能發(fā)現(xiàn)很多講解的都是關于類的，但是現(xiàn)實情況是基于原型繼承的JavaScript完全避免了類（class）的概念。我們只是簡單從現(xiàn)有的對象進行拷貝來創(chuàng)建對象。

真正的原型繼承是作為最新版的ECMAScript5標準提出的，使用Object.create方法來創(chuàng)建這樣的對象，該方法創(chuàng)建指定的對象，其對象的prototype有指定的對象（也就是該方法傳進的第一個參數(shù)對象），也可以包含其他可選的指定屬性。例如Object.create(prototype, optionalDescriptorObjects)，下面的例子里也可以看到這個用法：

// 因為不是構造函數(shù)，所以不用大寫
var someCar = {
    drive: function () { },
    name: "馬自達 3"
};

// 使用Object.create創(chuàng)建一個新車x
var anotherCar = Object.create(someCar);
anotherCar.name = "豐田佳美";

Object.create運行你直接從其它對象繼承過來，使用該方法的第二個參數(shù)，你可以初始化額外的其它屬性。例如：

var vehicle = {
    getModel: function () {
        console.log("車輛的模具是：" + this.model);
    }
};

var car = Object.create(vehicle, {
    "id": {
        value: MY_GLOBAL.nextId(),
        enumerable: true // 默認writable:false, configurable:false
},
    "model": {
        value: "福特",
        enumerable: true
    }
});

這里，可以在Object.create的第二個參數(shù)里使用對象字面量傳入要初始化的額外屬性，其語法與Object.defineProperties或Object.defineProperty方法類似。它允許您設定屬性的特性，例如enumerable, writable 或 configurable。

如果你希望自己去實現(xiàn)原型模式，而不直接使用Object.create 。你可以使用像下面這樣的代碼為上面的例子來實現(xiàn)：

var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel;
    },
    getModel: function () {
        console.log("車輛模具是：" + this.model);
    }
};

function vehicle(model) {
    function F() { };
    F.prototype = vehiclePrototype;

    var f = new F();

    f.init(model);
    return f;
}

var car = vehicle("福特Escort");
car.getModel();

3. 總結

原型模式在JavaScript里的使用簡直是無處不在，其它很多模式有很多也是基于prototype的，這里大家要注意的依然是淺拷貝和深拷貝的問題，免得出現(xiàn)引用問題。

原型模式適合在創(chuàng)建復雜對象時，對于那些需求一直在變化而導致對象結構不停地改變時，將那些比較穩(wěn)定的屬性與方法共用而提取的繼承的實現(xiàn)。

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式
JS 工廠模式
JS 建造者模式
JS 原型模式
JS 單例模式
JS 回調模式
JS 外觀模式
JS 適配器模式
JS 利用高階函數(shù)實現(xiàn)函數(shù)緩存(備忘模式)
JS 狀態(tài)模式
JS 橋接模式
JS 觀察者模式

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發(fā)現(xiàn)錯誤，歡迎留言指出~

參考：
設計模式之原型模式
《Javascript 設計模式》 - 張榮銘

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

云服務器 GPU云服務器原型模式 js原型面試題 js原型鏈的繼承 js原型屬性有什么用

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

轉載請注明本文地址：http://systransis.cn/yun/92124.html

JS面向對象編程之封裝

摘要：在基于原型的面向對象方式中，對象則是依靠構造函數(shù)和原型構造出來的。來看下面的例子優(yōu)點與單純使用構造函數(shù)不一樣，原型對象中的方法不會在實例中重新創(chuàng)建一次，節(jié)約內存。我們所熟知的面向對象語言如 C++、Java 都有類的的概念，類是實例的類型模板，比如Student表示學生這種類型，而不表示任何具體的某個學生，而實例就是根據(jù)這個類型創(chuàng)建的一個具體的對象，比如zhangsan、lisi，由...

YFan 2019-08-23 10:35 評論0 收藏0
JS函數(shù)的工廠模式、構造函數(shù)模式、原型模式的區(qū)別

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

william 2019-08-26 11:49 評論0 收藏0
js組合模式和寄生組合模式的區(qū)別研究

摘要：組合模式繼承結合了構造函數(shù)繼承時可以為每個屬性重新初始化，構造一個副本的優(yōu)點，以及原型鏈繼承時一次定義處處共享的優(yōu)點。但令我百思不得其解的是，從上面給出的例子來看，組合繼承并沒有調用兩次超類型構造函數(shù)。最近在閱讀《js權威指南》的繼承這一章，對于組合模式和寄生組合模式的區(qū)別有點混淆，在多次重讀以及嘗試之后，得到一些心得。組合模式繼承結合了構造函數(shù)繼承時可以為每個屬性重新初始化，構...

tolerious 2019-08-23 15:24 評論0 收藏0
javascript設計模式與開發(fā)實踐（二）- 封裝和原型模式

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

luxixing 2019-08-22 15:05 評論0 收藏0
JS對象(3)經(jīng)典對象創(chuàng)建與繼承模式

摘要：對象經(jīng)典對象創(chuàng)建與繼承模式組合模式創(chuàng)建對象中創(chuàng)建一個對象的方式多種多樣，每種方式都有自己缺點或者優(yōu)點，具體的可以參考而組合使用構造函數(shù)模式和原型模式來創(chuàng)建自定義類型算是最常見的方式了。 title: JS對象(3)經(jīng)典對象創(chuàng)建與繼承模式 date: 2016-09-28 tags: JavaScript 0x01 組合模式創(chuàng)建對象 JS 中創(chuàng)建一個對象的方式多種多樣，...

hellowoody 2019-08-21 11:17 評論0 收藏0