JavaScript设计模式-原型模式

canopus4u 发布于2019-08-23 12:12 / 3008人阅读

摘要：原型模式就是将可复用的，可共享的耗时大的从父类中提出来，然后放在其原型中，然后通过组合继承或者寄生组合式继承将方法和属性继承下来，对于子类中那些需要重写的方法进行重写，这样子类创建的对象既有子类的属性和方法，也共享了父类的原型方法。

原型模式

原型模式：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。
父类总是要被子类继承的，如果将属性和方法都写在父类的构造函数里会有一些问题，比如每次子类继承都要创建一次父类，假如父类的构造函数中创建时存在很多耗时的逻辑，或者每次初始化都要做一些重复性的东西，这样性能消耗还是蛮大的。为了提高性能，我们需要一种共享机制。原型模式就是将可复用的，可共享的、耗时大的从父类中提出来，然后放在其原型中，然后通过组合继承或者寄生组合式继承将方法和属性继承下来，对于子类中那些需要重写的方法进行重写，这样子类创建的对象既有子类的属性和方法，也共享了父类的原型方法。
以图片轮播为例：

//图片轮播
var LoopImages = function (imgArr,container) {
    this.imageArray = imgArr;//轮播图片数组
    this.container = container;//轮播图片容器
}
LoopImages.prototype = {
    //创建轮播图片
    createImage : function () {
        console.log("LoopImages createImage function");
    },
    //切换下一张图片
    changeImage:function () {
        console.log("LoopImages changeImage function");
    }
}
//上下滑动切换类
var SlideLooImg = function (imgArr,container) {
    //构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
}
SlideLooImg.prototype = new LoopImages();
//重写继承的切换下一张图片方法
SlideLooImg.prototype.changeImage = function () {
    console.log("SlideLoopImg changeImg function");
}
//渐隐切换类
var FadeLoopImg = function (imgArr,container,arrow) {
    LoopImages.call(this,imgArr,container);
    //切换箭头私有变量
    this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
    console.log("FadeLoogImg changeImage function");
}
//实例化一个渐隐切换图片类
var fadeImg = new FadeLoopImg(["01.img","02.img","03.img"],"slide",["left.jpg","right.jpg"]);
//测试用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型对象是一个共享的对象，无论是父类的实例对象还是子类的继承，都是对它的一个指向引用，所以原型对象才会被共享。在任何时候，都可以对基类或者子类进行方法的拓展，并且所有被实例化的对象或者类都能获取这些方法。
如下：

//原型的拓展
LoopImages.prototype.getImageLength = function () {
    return this.imageArray.length;
}
FadeLoopImg.prototype.getContainer = function () {
    return this.container;
}
console.log(fadeImg.getImageLength());//3
console.log(fadeImg.getContainer());//slide

专线服务服务器托管原型模式 javascript设计模式 javascript命令模式 javascript严格模式

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

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

理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript

摘要：在中，并没有对抽象类和接口的支持。例如，当对象需要对象的能力时，可以有选择地把对象的构造器的原型指向对象，从而达到继承的效果。本节内容为设计模式与开发实践第一章笔记。动态类型语言编程语言按数据类型大体可以分为两类：静态类型语言与动态类型语言。静态类型语言在编译时已确定变量类型，动态类型语言的变量类型要到程序运行时，待变量被赋值后，才具有某种类型。而JavaScript是一门典型...

suxier 2019-08-21 10:44 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript对象的几种创建方式

摘要：三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数，其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。一、工厂模式工厂模式：使用字面量和object构造函数会有很多重复代码，在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 评论0 收藏0
(JavaScript)原型与原型对象

摘要：值得注意的是原型对象也拥有一个属性指向其函数。以上的原因就造成了很少有使用纯的原型模式创建对象，而其他混合使用原型模式的创建对象模式就不在这里展开说了。第一次记录自己学习的脚步，我选择了JavaScript中自认为比较熟悉的一小部分来说，诚挚的希望能够得到各位前辈的批评与指正。而对于看到我这篇笔记希望从这篇笔记中收获知识的读者，我希望你们可以参考权威，拥有自己的真知灼见而不听我一家之...

Muninn 2019-08-26 11:49 评论0 收藏0
JavaScript面向对象的程序设计

摘要：目录导语理解对象和面向对象的程序设计创建对象的方式的继承机制原型对象原型链与原型对象相关的方法小结导语前面的系列文章，基本把的核心知识点的基本语法标准库等章节讲解完本章开始进入核心知识点的高级部分面向对象的程序设计，这一部分的内容将会对对象目录导语 1.理解对象和面向对象的程序设计 2.创建对象的方式 3.JavaScript的继承机制 3.1 原型对象 3.2 原型链 3.3 与...

gitmilk 2019-08-20 13:30 评论0 收藏0
javascript设计模式与开发实践（二）- 封装和原型模式

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

luxixing 2019-08-22 15:05 评论0 收藏0