《JavaScript设计模式》——9.7 Prototype(原型)模式

简介:

本节书摘来自异步社区《JavaScript设计模式》一书中的第9章,第9.7节, 作者: 【美】Addy Osmani 译者: 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。

9.7 Prototype(原型)模式

“四人组”称Prototype模式为一种基于现有对象模板,通过克隆方式创建对象的模式。

我们可以认为Prototype模式是基于原型继承的模式,可以在其中创建对象,作为其他对象的原型。prototype对象本身实际上是用作构造函数创建每个对象的蓝图。如果所用构造函数的原型包含一个名为name的属性(代码样例如下),那么由同样的构造函数创建的每个对象也会有同样的属性(见图9-6)。
screenshot

如果查看现有(非JavaScript)文献对该模式的定义,我们可能会再一次发现对类的引用。现实情况是,原型继承避免和类(Class)一起使用。理论上没有“定义”的对象,也没有核心的对象。我们仅是创建现有功能对象的拷贝。

使用Prototype模式的其中一个好处是,我们获得的是JavaScript其本身所具有的原型优势,而不是试图模仿其他语言的特性。与其他设计模式一起使用时,情况并非总是如此。

模式不仅是一种实现继承的简单方法,它也可以带来性能提升:在一个对象中定义一个函数,它们都是由引用创建(因此所有子对象都指向相同的函数),而不是创建它们自己的单份拷贝。

如同ECMAScript5标准所定义的,那些有趣的、真正的原型继承要求使用Object.create(我们在本节的前面曾看到过)。Object.create创建一个对象,拥有指定原型和可选的属性(例如Object.create(prototype, optionalDescriptorObjects))。

在下面的示例中可以看到它的演示:

var myCar = {
   name: "Ford Escort",
   drive: function () {
     console.log("Weeee. I'm driving!");
    },
    panic: function () {
       console.log("Wait. How do you stop this thing?");
    }
};

// 使用Object.create实例化一个新car

var yourCar = Object.create(myCar);

// 现在可以看到一个对象是另外一个对象的原型

console.log(yourCar.name);

Object.create还允许我们轻松实现差异继承等高级概念,通过差异继承,对象可以直接继承自其他对象。我们之前已经了解到,Object.create允许我们使用第二个提供的参数来初始化对象属性。例如:

var vehicle = {
   getModel: function () {
     console.log("The model of this vehicle is.." + this.model);
   }
};
var car = Object.create(vehicle, {
   "id": {
     value: MY_GLOBAL.nextId(),
    // writable:false, configurable:false 默认值
    enumerable: true
   },
   "model": {
      value: "Ford",
     enumerable: true
   }
});

在这里,可以使用对象字面量在Object.create的第二个参数上初始化属性,并且对象字面量采用的语法与Object.defineProperties和Object.defineProperty方法所使用的语法相似,我们之前已经了解过这些方法。

值得注意的是,在枚举对象的属性以及在hasOwnProperty()检查中包装循环内容时(Crockford推荐),原型关系可能会引起麻烦。

如果希望在不直接使用Object.create的情况下实现Prototype模式,我们可以按照上面的示例模拟该模式,如下所示:

var vehiclePrototype = {
  init: function (carModel) {![图像说明文字](/api/storage/getbykey/inlineimage?key=1505687bf25eb899163d)
     this.model = carModel;
  },
  getModel: function () {
    console.log("The model of this vehicle is.." + this.model);
  }
};
function vehicle(model) {
   function F() { };
  F.prototype = vehiclePrototype;
  var f = new F();
  f.init(model);
  return f;
}
var car = vehicle("Ford Escort");
car.getModel();

这个方案不允许用户以同样的方式定义只读属性(因为如果不小心,vehiclePrototype可能会被改变)。
最后一种可供选择的Prototype模式实现可以是这样的:

var beget = (function () {
    function F() { }
    return function (proto) {
         F.prototype = proto;
       return new F();
     };
})();

我们可以从vehicle函数引出这个方法。请注意,这里的vehicle模仿了一个构造函数,因为Prototype模式不包含任何初始化的概念,而不仅是将对象链接至原型。

相关文章
|
4月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
241 11
|
2月前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
278 44
|
1月前
|
设计模式 Java 关系型数据库
设计模式:工厂方法模式(Factory Method)
工厂方法模式是一种创建型设计模式,通过将对象的创建延迟到子类实现解耦。其核心是抽象工厂声明工厂方法返回抽象产品,具体工厂重写该方法返回具体产品实例。适用于动态扩展产品类型、复杂创建逻辑和框架设计等场景,如日志记录器、数据库连接池等。优点包括符合开闭原则、解耦客户端与具体产品;缺点是可能增加类数量和复杂度。典型应用如Java集合框架、Spring BeanFactory等。
|
3月前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
105 40
|
2月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
40 8
|
3月前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
95 19
|
3月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
159 33
|
3月前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
81 12
|
3月前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
73 15
|
5月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
71 1
JavaScript中的原型 保姆级文章一文搞懂