当前位置: 首页 > 编程笔记 >

深入理解JavaScript系列(42):设计模式之原型模式详解

姬承教
2023-03-14
本文向大家介绍深入理解JavaScript系列(42):设计模式之原型模式详解,包括了深入理解JavaScript系列(42):设计模式之原型模式详解的使用技巧和注意事项,需要的朋友参考一下

介绍

原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。

正文

对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象,例如,如果一个构造函数的原型包含了一个name属性(见后面的例子),那通过这个构造函数创建的对象都会有这个属性。

在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很多讲解的都是关于类的,但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概念。我们只是简单从现有的对象进行拷贝来创建对象。

真正的原型继承是作为最新版的ECMAScript5标准提出的,使用Object.create方法来创建这样的对象,该方法创建指定的对象,其对象的prototype有指定的对象(也就是该方法传进的第一个参数对象),也可以包含其他可选的指定属性。例如Object.create(prototype, optionalDescriptorObjects),下面的例子里也可以看到这个用法:


// 因为不是构造函数,所以不用大写

var someCar = {

    drive: function () { },

    name: '马自达 3'

};

// 使用Object.create创建一个新车x var anotherCar = Object.create(someCar); anotherCar.name = '丰田佳美';


Object.create运行你直接从其它对象继承过来,使用该方法的第二个参数,你可以初始化额外的其它属性。例如:

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的第二个参数里使用对象字面量传入要初始化的额外属性,其语法与Object.defineProperties或Object.defineProperty方法类型。它允许您设定属性的特性,例如enumerable, writable 或 configurable。

如果你希望自己去实现原型模式,而不直接使用Object.create 。你可以使用像下面这样的代码为上面的例子来实现:


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();

总结

原型模式在JavaScript里的使用简直是无处不在,其它很多模式有很多也是基于prototype的,就不多说了,这里大家要注意的依然是浅拷贝和深拷贝的问题,免得出现引用问题。

 类似资料:
  • 本文向大家介绍深入理解JavaScript系列(31):设计模式之代理模式详解,包括了深入理解JavaScript系列(31):设计模式之代理模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。 代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件

  • 本文向大家介绍深入理解JavaScript系列(25):设计模式之单例模式详解,包括了深入理解JavaScript系列(25):设计模式之单例模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现。OK,正式开始。 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实

  • 本文向大家介绍深入理解JavaScript系列(33):设计模式之策略模式详解,包括了深入理解JavaScript系列(33):设计模式之策略模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户。 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都

  • 本文向大家介绍深入理解JavaScript系列(44):设计模式之桥接模式详解,包括了深入理解JavaScript系列(44):设计模式之桥接模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。 正文 桥接模式最常用在事件监控上,先看一段代码: 上述代码,有个问题就是getBeerById必须要有浏览器的上下文才能使

  • 本文向大家介绍深入理解JavaScript系列(43):设计模式之状态模式详解,包括了深入理解JavaScript系列(43):设计模式之状态模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 正文 举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState)、

  • 本文向大家介绍深入理解JavaScript系列(40):设计模式之组合模式详解,包括了深入理解JavaScript系列(40):设计模式之组合模式详解的使用技巧和注意事项,需要的朋友参考一下 介绍 组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。 常见的场景有asp.net里的控件机制(即control里可以包