iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS继承与工厂构造及原型设计模式详解
  • 149
分享到

JS继承与工厂构造及原型设计模式详解

2024-04-02 19:04:59 149人浏览 独家记忆
摘要

目录序言正文结语序言 我们在前一篇文章《js精粹,原型链继承和构造函数继承的 “毛病”》 ,提到了:原型链继承、构造函数继承、组合继承; 在另一篇文章《蓦然回

序言

我们在前一篇文章《js精粹,原型链继承和构造函数继承的 “毛病”》 ,提到了:原型链继承、构造函数继承、组合继承;

在另一篇文章《蓦然回首,“工厂、构造、原型”设计模式,正在灯火阑珊处》,提到了:我们用于创建对象的三种设计模式:工厂设计模式、构造设计模式、原型设计模式;

至此,我们可以明显的感受到:JS 要实现面向对象(继承的能力),离不开这 3 种设计模式;

原型链 + 构造函数 = 组合继承

本篇带来一个新的继承方式:寄生继承,它由工厂模式和构造函数模式组成,即

工厂+构造函数 = 寄生继承

正文

正是由于:原型链继承和构造函数继承的 “毛病”

  • 原型链继承:所有继承的属性和方法都会在对象实例间共享,无法做到实例私有。
  • 构造函数继承:子类不能访问父类原型上的方法。

组合继承应运而生:

function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
     SuperType.call(this, name) // 构造函数继承 (两次调用父类构造函数)
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承 (一次调用父类构造函数)
SubType.prototype.sayAge = function() {
	 console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

但是呢?这样做,会有效率问题,父类构造函数始终会被调用两次:一次是在子类构造函数中调用,另一次在是创建子类原型时调用。

本质上,子类原型最终是要包含超类对象的所有实例属性,子类构造函数只要在执行时重写自己的原型就行了。

这个时候有一个新的思路!

不通过调用父类构造函数给子类原型赋值,而是取得父类原型的一个副本。使用寄生式继承来继承父 类原型,然后将返回的新对象赋值给子类原型。

核心代码是:通过工厂的方式,增强一个新对象:

function createAnother(original){
     let clone = Object(original); // 通过调用函数创建一个新对象
     clone.sayHi = function() { // 以某种方式增强这个对象
         console.log("hi");
     };
     return clone; // 返回这个对象
}

将组合代码改造一下,完整代码是:

function inheritPrototype(subType, superType) {
     let prototype = Object(superType.prototype); // 创建对象
     prototype.constructor = subType; // 增强对象
     subType.prototype = prototype; // 赋值对象
}
function SuperType(name) {
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age) {
     SuperType.call(this, name); // 构造函数继承(只调了一次)
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
};
inheritPrototype(SubType, SuperType); // 寄生继承
SubType.prototype.sayAge = function() {
     console.log(this.age);
};
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

这里只调用了一次 SuperType 构造函数,避免了 SubType.prototype 上不必要也用不到的属性;而且,原型链仍然保持不变,instanceof 操作符和 isPrototypeOf() 方法正常有效。

寄生式组合继承可以算是【引用类型】继承的最佳模式

os:不过这里的增强写法,理解起来真是怪,为什么父类的显示原型的构造函数等于子类?

SuperType.prototype.constructor=== SubType // true

大概是为了,通过寄生实现:父类、子类都由同一函数构造;

SubType === SubType.prototype.constructor // true
SuperType.prototype.constructor === SubType.prototype.constructor // true

结语

只要是写 JS 的继承,一定离不开:工厂、构造、原型设计模式;

原型链 + 构造函数 = 组合继承

工厂+构造函数 = 寄生继承;

组合继承和寄生继承是最常用的两种继承方式。

......

u1s1,class 出来前,写 JS 实现继承,是真滴麻烦QAQ

以上就是JS继承与工厂构造及原型设计模式详解的详细内容,更多关于JS继承与设计模式的资料请关注编程网其它相关文章!

--结束END--

本文标题: JS继承与工厂构造及原型设计模式详解

本文链接: https://www.lsjlt.com/news/153832.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS继承与工厂构造及原型设计模式详解
    目录序言正文结语序言 我们在前一篇文章《JS精粹,原型链继承和构造函数继承的 “毛病”》 ,提到了:原型链继承、构造函数继承、组合继承; 在另一篇文章《蓦然回...
    99+
    2024-04-02
  • JS继承、工厂构造及原型设计模式实例分析
    这篇文章主要介绍“JS继承、工厂构造及原型设计模式实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JS继承、工厂构造及原型设计模式实例分析”文章能帮助大家解决问题。正文正是由于:原型链继承和构...
    99+
    2023-07-02
  • JS创建对象常用设计模式工厂构造函数及原型
    目录引言工厂模式构造函数模式原型模式结语引言 很多工友们都说:设计模式根本用不到,然而它其实时刻就在我们身边,像王国维所说:众里寻他千百度,蓦然回首,那人正在灯火阑珊处。 工厂模式 ...
    99+
    2024-04-02
  • JS精髓原型链继承及构造函数继承问题纠正
    目录前言原型链继承构造函数继承组合继承前言 先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装、继承、多态。 这三个特点,以&ldqu...
    99+
    2024-04-02
  • Java设计模式——工厂设计模式详解
    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类。工厂模式的形态工厂模式主要用一下几种形态:简单工厂(Simple Factory)。2:工厂方法(Factory Method)。3:抽象工厂(Abstract...
    99+
    2023-05-30
    java 设计模式 ava
  • PHP设计模式之工厂模式详解
    工厂模式是一种创建型设计模式,它提供了一种统一的方式来创建对象,而不用直接实例化对象。工厂模式可以隐藏对象创建的细节,客户端只需要调...
    99+
    2023-08-14
    php
  • java设计模式--三种工厂模式详解
    目录简单工厂代码:1.产品接口2.产品接口实现子类3.简单工厂类4.调用工厂5.测试工厂方法代码:1.工厂接口2.工厂实现子类3.产品接口4.产品实现子类5.调用6.测试1.产品接口...
    99+
    2024-04-02
  • java设计模式之简单工厂模式详解
    简单工厂模式:由一个工厂对象决定创建出哪一种类的实例。抽象类public abstract class People { public abstract void doSth();}...
    99+
    2023-05-31
    java 设计模式 简单工厂
  • Java设计模式之抽象工厂模式详解
    目录一、什么是抽象工厂模式二、示例程序三、UML一、什么是抽象工厂模式 为创建一组相关或相互依赖的对象提供一个接口,而且无需指定他们的具体类,这称之为抽象工厂模式(Abstract ...
    99+
    2024-04-02
  • Java设计模式之工厂模式案例详解
    目录分类案例需求方案一:简单工厂模式方案二:工厂方法模式方案三:抽象工厂模式对比分析总结 分类 1.简单工厂模式 2.工厂方法模式 3.抽象工厂模式 案例 需求 根据蛋糕的不同口味,...
    99+
    2024-04-02
  • Java设计模式之工厂方法模式详解
    目录1.工厂方法是什么2.如何实现3.代码实现4.工厂方法模式的优点5.拓展1.工厂方法是什么 众所周知,工厂是生产产品的,并且产品供消费者使用。消费者不必关心产品的生产过程,只需要...
    99+
    2024-04-02
  • python设计模式之抽象工厂模式详解
    抽象工厂模式(Abstract Factory Pattern):属于创建型模式,它提供了一种创建对象的最佳方式。在抽象工厂模式中,接口是负责创建一个相关对象的工厂,不需要显式指定它...
    99+
    2024-04-02
  • PHP设计模式中工厂模式深入详解
    目录简介简单工厂作用适用场景优点缺点代码工厂模式作用适用场景优点缺点代码抽象工厂作用适用场景优点缺点代码三者对比简介 工厂模式属于创建型模式,可以分为三种:简单工厂、工厂模式、抽象工...
    99+
    2022-11-13
    PHP工厂模式 PHP设计模式
  • Java创建型设计模式之工厂方法模式深入详解
    目录简单工厂模式定义产品对象创建工厂类工厂使用反射工厂方法模式概述应用场景优缺点主要角色工厂方法模式的基本使用创建抽象产品创建具体产品创建抽象工厂创建具体工厂客户端执行简单工厂模式 ...
    99+
    2024-04-02
  • java设计模式--原型模式详解
    目录引例原型模式浅拷贝在原先Sheep类基础上实现Cloneable接口,重写clone方法。客户端调用Sheep类新添的Cow类客户端调用克隆深拷贝1.Cow类也实现Cloneab...
    99+
    2024-04-02
  • java设计模式之工厂方法详解
    一、概念         工厂方法模式是类的创建模式,又叫虚拟构造子模式(virtual constructor) 或者多态性工厂模式。二、模式动机 ...
    99+
    2023-05-31
    java 设计模式 工厂方法
  • java设计模式之抽像工厂详解
     一、概念  提供一个创建一系列相关或相互依赖对像的接口,而无需指定它们具体的类。二、模式动机  这一系列对像之间是相互依赖的,相当于一个产品族 三、模式的结构通过上图我们可以清楚的看到抽像工厂模式包括以下4个角色:  ...
    99+
    2023-05-31
    java 设计模式 抽像工厂
  • Java结构型设计模式中建造者模式示例详解
    目录建造者模式概述角色优缺点应用场景基本使用创建产品类创建建造者类使用链式写法创建产品类与建造者类使用建造者模式 概述 建造者模式(Builder Pattern)属于创建型模式。 ...
    99+
    2024-04-02
  • java编程创建型设计模式工厂方法模式示例详解
    目录1.什么是工厂方法模式?2.案例实现3.JDK中的工厂方法模式1.什么是工厂方法模式? 工厂方法模式设计方案:  将披萨项目的实例化功能抽象成抽象方法,在不同的口味点餐...
    99+
    2024-04-02
  • Java设计模式之原型模式详解
    目录一、前言二、优点及适用场景三、原型模式的注意事项四、浅复制和深复制五、浅复制demo演示六、深复制demo演示一、前言 原型模式是一种比较简单的模式,也非常容易理解,实现一个接口...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作