javascript模式——Prototype模式

GoF权威的解释是,原型模式是一种通过对一个对象的克隆,创建基于这个对象的多种对象的模式。

为了实现这种原型模式,可以直接使用ECMAScript 5 中的方法Object.create。它不紧可以创建出对特定对象的扩展出的对象,还可以增加新属性。

var vehicle = {
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model );
  }
};

var car = Object.create(vehicle, {

  "model": {
    value: "Ford",
    enumerable: true
  }

});

car.getModel()

Object.create第一个参数为要扩展的对象,对二个参数为新增属性。详细的使用方法可查MDN。

遍历可枚举属性时有一个问题,他会遍历原型链中的所有元素,需要用Object.hasOwnProperty进行筛选。

检查代码如下:

// 只输出car中的属性值。
for(var name in car ){
    if(car.hasOwnProperty(name)){
        console.log(car[name])
    }
}

在不支持Object.create的时候,比如IE8,我们按上面按上面的示例也可以模拟出原型模式

var vehicle = {
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model );
  }
};

var car = (function(){
    function F(){
        this.model = "Ford";
    }
    F.prototype = vehicle;
    var f = new F();
    return f;
})()

car.getModel(); // Ford
时间: 2024-11-26 01:52:55

javascript模式——Prototype模式的相关文章

设计模式(4)-对象创建型模式-Prototype模式

1.对象创建型模式 1.4          Protoype模式 1.4.1需求 通过拷贝原形对象创建新的对象. 1.4.2结构 ?P r o t o t y p e(Gr a p h i c) - 声明一个克隆自身的接口. ?C o n c r e t e P r o t o t y p e(S t a ff.W h o l e N o t e.H a l fN o t e) - 实现一个克隆自身的操作. ?  C l i e n t(G r a p h i c To o l) - 让一个原

Prototype模式

Prototype模式 Prototype模式是为了让对象提供自我复制的功能,即能够通过已有对象来创建新对象. Prototype提供了在一个现有对象创建新对象的接口Clone,它的实现和详细语言相关.在C++中通过拷贝构造函数实现. 类的结构图例如以下所看到的: 实现例如以下: //Prototype.h //Prototyep #ifndef _PROTOTYPE_H_ #define _PROTOTYPE_H_ class Prototype { public: virtual ~Prot

设计模式--创建模式--原型模式

一.基本概念 1.原型模式(Prototype模式)是指:用原型实例指定创建对象的种类,并且通过拷贝这些原型,创建新的对象 . 2.角色: A.抽象原型(Prototype)角色:此角色定义了的具体原型类所需的实现的方法,本例子直接精简为类. B.客户(Client)角色:客户类提出创建对象的请求:也就是我们用户使用复制粘贴的功能. 3.其实原型模式的核心就是Prototype(抽象原型),他需要继承Cloneable接口,并且重写Object类中的clone方法即可. 二.简单例子 A.抽象原

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

深入理解JavaScript中创建对象模式的演变(原型)

创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Object构造函数和对象字面量方法 工厂模式 自定义构造函数模式 原型模式 组合使用自定义构造函数模式和原型模式 动态原型模式.寄生构造函数模式.稳妥构造函数模式 第一部分:Object构造函数和对象字面量方法 我之前在博文<javascript中对象字面量的理解>中讲到过这两种方法,如何大家不熟悉,可以点进去看一看回顾一下.它们的优点是用来创建单个的对象非常方

JavaScript高级---组合模式设计

一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生产对象,实现解耦. 桥接模式 : (桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法.通过“桥”把彼此联系起来,同时又允许他们各自独立变化) 主要作用:主要作用表现为将抽象与其实现隔离开来,以便二者独立化. 组合模式 : (组合模式是一种专门为创建Web上的动态用户界面而量身制定

JavaScript高级---工厂模式设计

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <ti

Javascript备忘模式

使用备忘模式,利用了函数的自定义属性,先看一个例子 var test = function (){} test.myAttr = "attr"; 这样,就给test加上了一个自定义的属性,myAttr. 备忘模式,正式利用了这个方法,将已经运行过的结果存储起来,将函数接受到的参数作为key,将函数运行的结果作为value返回即可.代码如下 var myFunc = function (param) { if(!myFunc.cache[param]){ var result = {};

[设计模式] javascript 之 策略模式

定义: 封装一系列的算法,使得他们之间可以相互替换,本模式使用算法独立于使用它的客户的变化. 说明:策略模式,是一种组织算法的模式,核心不在于算法,而在于组织一系列的算法,并且如何去使用它:策略模式作用在于,行为实现的不可预见,面对这样的一种变化,我们得思考如何使用程序好维跟扩展,并使得客户很好的使用算法的方式: 策略模式 使用要注意它 "变化" 的一面,策略模式就是来解决这个 变化 问题的. 比如商场买卖的价格或促销问题,如果不使用模式,就可能只是 把“所有”的情况用 if else