原型模式 -- JavaScript语言的灵魂

原型模式就是将原型对象指向创建对象的类,使这些类共享原型对象的方法与属性。JS是基于原型链实现对象之间的继承,是对属性或者方法的共享,而不是对属性和方法的复制。

    // 图片轮播类
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;
        this.container = container;
    }
    LoopImages.prototype = {
        // 创建轮播图片
        createImage:function () {
            console.log(‘LoopImages createImage function‘);
        },
        // 切换下一张图片
        changeImage:function () {
            console.log(‘LoopImages changeImage function‘);
        }
    }
    // 上下滑动切换类
    var SlideLoopImg = function (imgArr, container) {
        // 构造函数继承图片轮播类
        LoopImages.call(this,imgArr,container);
    }
    SlideLoopImg.prototype = new LoopImages();
    // 重写继承的切换下一张图片方法
    SlideLoopImg.prototype.changeImage = function () {
        console.log(‘SlideLoopImg changeImage 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(‘FadeLoopImg changeImage function‘)
    }
    // 测试用例
    console.log(fageImg.container); //slide
    fadeImg.changeImg(); //FadeLoopImg changeImage function

原文地址:https://www.cnblogs.com/wujiaqi/p/10372140.html

时间: 2024-10-26 14:01:29

原型模式 -- JavaScript语言的灵魂的相关文章

原型模式——javascript的面向对象

javascript没有类这个概念,但是面向对象的标志确是拥有类概念.对于类抽象重复的解决方案在javascript中没有办法通过继承来实现.但是javascript的每个函数都自动添加一个名称为prototype属性,这是一个对象,我们可以将所有的实例通过一个原型链引用到prototype上,从而模拟类的方式. 原型模式实现一个接口,该接口用于创建当前对象的克隆,从而实现创建重复的对象. 在javascript中的继承关系就可以通过原型克隆一份父类给子类便可.我们可以定义一个所有类型的父类Cl

设计模式(六):原型模式

在读这个模式,头脑里就浮想两个问题: 1. JavaScript的原型模式与普遍的原型模式有什么区别? 2. JavaScript的原型模式与prototype有什么关系? 原型模式定义 原型模式(创建型设计模式)是用一个对象做模板,克隆出新对象. 另外原型模式中的克隆分为"浅克隆"和"深克隆": 浅克隆: 对值类型的成员变量进行值的复制,对引用类型的成员变量只复制引用,不复制引用的对象. 深克隆: 对值类型的成员变量进行值的复制,对引用类型的成员变量也进行引用对象

理解javascript中的原型模式

一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂模式尽管解决了创建多个相似对象的问题,却没有解决对象识别的问题(返回的是自定义的一个对象o,不明确对象o的类型).  2. 构造函数模式:构造函数的调用和其他oo语言一样,用new操作符来构建一个Person的实例:javascript中的构造函数也是函数(所以也可以直接像普通函数那样直接调用方法名

Javascript原型模式总结梳理

在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编程语言中,类并不是必需的,对象不一定需要由类实例化而来,而是通过克隆另外一个对象来得到. 原型模式是用来创建对象的一种模式.在以类为中心的语言中,要创建一个对象首先要指定这个对象的类型,然后实例化一个对象.使用原型模式创建对象时不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

「JavaScript里的面向对象」— 5.原型模式

本文原文来源:<Object-Oriented JavaScript>By Stoyan Stefanov 本文翻译来源:赤石俊哉 原创翻译 版权申明: 如果您是原文的原作者并且不希望此文被公开,可以联系作者删除.本文翻译由 赤石俊哉 翻译整理,您可以用于学习目的,但是禁止转载. 第五章 原型模式(Prototype) 在这一章节中你将会学习使用"函数(function)"对象中的prototype属性.在JavaScript的学习过程中,理解prototype的工作原理是

JavaScript的原型模式

原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象. http://www.cnblogs.com/TomXu/archive/2012/04/16/2436460.html http://www.cnblogs.com/silymer/archive/2012/11/02/2751803.html JS原型对象:所有实例都会共享它里面的属性和方法 原型(prototype),是 JavaScript 特有的一个概念,通过使用原型,JavaScrip

javascript中的模式解析——原型模式

理解原型模式,首先要理解prototyoe(这个单词翻译 原型)属性,<javascript高级程序设计>书中描述到——我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 我在上一篇构造函数模式所说的,我们构建了一个一个Person函数,然后通过new一个person函数来创建了person1实例,person2实例,既然每个函数都有一个prototype属性,那么我有几个问题想要弄明白: per

JavaScript设计模式-3.原型模式

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js高级语法3-原型模式 </title> 6 </head> 7 <body> 8 <script> 9 /* 10 javascript原型模式(prototype): 11 1. 原型是一个对象,其他对象可以通过它实现属性的继承,所有的