JS 原型模式

Coding01 发布于2019-08-22 11:17 / 866人阅读

摘要：你可以使用像下面这样的代码为上面的例子来实现车辆模具是福特总结原型模式在里的使用简直是无处不在，其它很多模式有很多也是基于的，这里大家要注意的依然是浅拷贝和深拷贝的问题，免得出现引用问题。

1. 简介

原型模式(Prototype pattern)，用原型实例指向创建对象的类，使用于创建新的对象的类的共享原型的属性与方法。

2. 实现

对于原型模式，我们可以利用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();

3. 总结

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

原型模式适合在创建复杂对象时，对于那些需求一直在变化而导致对象结构不停地改变时，将那些比较稳定的属性与方法共用而提取的继承的实现。

本文是系列文章，可以相互参考印证，共同进步~

JS 抽象工厂模式

JS 工厂模式

JS 建造者模式

JS 原型模式

JS 单例模式

JS 回调模式

JS 外观模式

JS 适配器模式

JS 利用高阶函数实现函数缓存(备忘模式)

JS 状态模式

JS 桥接模式

JS 观察者模式

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

参考：
设计模式之原型模式
《Javascript 设计模式》 - 张荣铭

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

云服务器海外云主机原型模式 js原型面试题 js原型链的继承 js原型属性有什么用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92124.html

JS面向对象编程之封装

摘要：在基于原型的面向对象方式中，对象则是依靠构造函数和原型构造出来的。来看下面的例子优点与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。我们所熟知的面向对象语言如 C++、Java 都有类的的概念，类是实例的类型模板，比如Student表示学生这种类型，而不表示任何具体的某个学生，而实例就是根据这个类型创建的一个具体的对象，比如zhangsan、lisi，由...

YFan 2019-08-23 10:35 评论0 收藏0
JS函数的工厂模式、构造函数模式、原型模式的区别

摘要：于是就有了构造函数和原型模式混合模式组合使用构造函数模式和原型模式创建自定义类型最常见的方式，就是组合模式。创建对象 JS有六种数据数据类型，其中五种属于基本数据类型：Null、Boolean、undefined、String、Number。而其它值都是对象。数组是对象，函数是对象，正则表达式是对象。对象也是对象。来看一下对象的定义：无序属性的集合，其属性可以包含基本值、对象、或...

william 2019-08-26 11:49 评论0 收藏0
js组合模式和寄生组合模式的区别研究

摘要：组合模式继承结合了构造函数继承时可以为每个属性重新初始化，构造一个副本的优点，以及原型链继承时一次定义处处共享的优点。但令我百思不得其解的是，从上面给出的例子来看，组合继承并没有调用两次超类型构造函数。最近在阅读《js权威指南》的继承这一章，对于组合模式和寄生组合模式的区别有点混淆，在多次重读以及尝试之后，得到一些心得。组合模式继承结合了构造函数继承时可以为每个属性重新初始化，构...

tolerious 2019-08-23 15:24 评论0 收藏0
javascript设计模式与开发实践（二）- 封装和原型模式

摘要：对象会记住它的原型给对象提供了一个名为的隐藏属性，某个对象的属性默认会指向它的构造器的原型对象，即。我们通过代码来验证再来实际上，就是对象跟对象构造器的原型联系起来的纽带切记这句话，对未来理解原型链很有帮助。封装封装数据在许多语言的对象系统中，封装数据是由语法解析来实现的，这些语言也许提供了 private、public、protected 等关键字来提供不同的访问权限。例如：j...

luxixing 2019-08-22 15:05 评论0 收藏0
JS对象(3)经典对象创建与继承模式

摘要：对象经典对象创建与继承模式组合模式创建对象中创建一个对象的方式多种多样，每种方式都有自己缺点或者优点，具体的可以参考而组合使用构造函数模式和原型模式来创建自定义类型算是最常见的方式了。 title: JS对象(3)经典对象创建与继承模式 date: 2016-09-28 tags: JavaScript 0x01 组合模式创建对象 JS 中创建一个对象的方式多种多样，...

hellowoody 2019-08-21 11:17 评论0 收藏0