JavaScript寄生组合式继承原理与用法分析

2024-08-13 20:15:56

本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考，具体如下：

寄生组合式继承

寄生组合式继承，就是通过伪造对象来继承属性，通过原型链的混成形式来继承方法。

这种技术的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，因为我们所需要的只是超类型原型的一个副本而已(这一点正是组合继承的问题，并且正是JavaScript这种原型式语言的强大之处，直接copy对象-原型对象)。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //创建超类型原型副本
  prototype.constructor = subType;          //修改原型副本的不同属性
  subType.prototype = prototype;           //指定原型
}
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  console.log(this.name);
}
function SubType(name, age){
  //继承属性
  SuperType.call(this, name);
  //实例属性
  this.age = age;
}
//继承方法
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
  console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //"red, blue, green, black"
instance1.sayName();      //"Nicholas"
instance1.sayAge();      //29

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

这个是寄生组合式继承的最简单形式。这个函数接收两个参数：

1. 子类型构造函数
2. 超类型构造函数

在函数内部，寄生组合式继承最简形式分为3个步骤：

1. 创建超类型原型副本；
2. 为创建的副本指定constructor属性，从而弥补因为重写SubType原型而失去的默认的constructor属性，这个原型副本的constructor属性变化：SuperType –> SubType；
3. 将该完善好的副本赋值给子类型的原型。

寄生组合式继承的图解如下：

寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了在SubType.prototype上面创建不必要的，多余的属性。与此同时，原型链还能保持不变。

更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

利用JS实现文字的聚合动画效果

前言所谓文字聚合效果,原理就是将容器分为若干的小块,然后每个小块设置 background-poisition ,最后添加css3动画就可以了,去掉注释,也就仅仅20行的代码. 先来看看效果图: js代码如下: //c为列数,r为行数,把box划分成多少个小块 var box = document.querySelector('.boxWrap1'),c=4,r=8; //每个小块的宽高 var w = box.offsetWidth/c,h = box.offsetHeight/r; //循
JavaScript是如何实现继承的(六种方式)

前言:大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现. 1.原型链基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法. 构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 原型链实现继承例子: function SuperType() { this.property
实例介绍JavaScript中多种组合继承

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); } function SubType(nam
彻底理解js面向对象之继承

说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且靠的是原型链实现的.下面正式的说一说js中继承那点事儿 1.原型链原型链:实现继承的主要方法,利用原型让一个引用类型继承另一个引用类型的属性和方法. 回顾:构造函数,原型,实例三者的关系每一个构造函数都有一个原型对象(Person.prototype):原型对象都包含指向构造函数的指针(constru
JavaScript继承与聚合实例详解

本文实例讲述了JavaScript继承与聚合.分享给大家供大家参考,具体如下: 一.继承第一种方式:类与被继承类直接耦合度高 1. 首先,准备一个可以被继承的类(父类),例如 //创建一个人员类 function Person(name) {//现在Person里面的域是由Person里面的来this来控制的 this.name=name; } 2. 然后,有个需要继承父类的子类 function Teacher(name,books) { Person.call(this,name);//
15分钟深入了解JS继承分类、原理与用法

本文全面讲述了JS继承分类.原理与用法.分享给大家供大家参考,具体如下: 许多 OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ECMAScript 中的函数没有签名,所以在 JS 中无法实现接口继承.ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的.所以,下面所要说的原型链继承.借用构造函数继承.组合继承.原型式继承.寄生式继承和寄生组合式继承都属于实现继承. 最后的最后,我会解释 ES6 中的 exten
JavaScript常见继承模式实例小结

本文实例总结了JavaScript常见继承模式.分享给大家供大家参考,具体如下: JavaScript中并没有传统的面向对象语言中的类的概念,但是却实现了特殊的继承机制. (阅读此文您首先需要知道原型的知识) 先来说说第一种继承方式,原型链继承. 一. 原型链继承所谓原型链继承,就是让父类的一个实例作为子类的原型. 即 : parentInstance = new Parent(); child.prototype = parentInstance; 这样,在创建子类的实例时,子类实例的__p
js中继承的几种用法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承复制代码代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(na
JavaScript寄生组合式继承原理与用法分析

本文实例讲述了JavaScript寄生组合式继承.分享给大家供大家参考,具体如下: 寄生组合式继承寄生组合式继承,就是通过伪造对象来继承属性,通过原型链的混成形式来继承方法. 这种技术的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,因为我们所需要的只是超类型原型的一个副本而已(这一点正是组合继承的问题,并且正是JavaScript这种原型式语言的强大之处,直接copy对象-原型对象).本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型. function
JavaScript寄生组合式继承实例详解

本文实例讲述了JavaScript寄生组合式继承.分享给大家供大家参考,具体如下: 其实<JavaScript高级程序设计>这本书中已经有完整代码了,只要把代码读懂就知道这个继承是怎么回事. 首先,在js中,给对象定义属性有两种方式: //通过执行构造函数设置属性 function A(){ this.a = 1; } //通过原型设置属性 A.prototype.b = 1; 所以: 一个类Sub要继承另一个类Super,需要继承父类的prototype下的属性,还要执行一下父类的构造函数.
JavaScript中BOM对象原理与用法分析

本文实例讲述了JavaScript中BOM对象原理与用法.分享给大家供大家参考,具体如下: 百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 我的理解博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScrip
Java类的继承原理与用法分析

本文实例讲述了Java类的继承.分享给大家供大家参考,具体如下: 为什么要继承? 观察两个类的成员组成提取相同的属性和方法宠物是父类,狗和金鱼是子类.子类具有父类的属性和方法. 继承定义是使用已存在的类作为基础建立新类的技术. 单一继承:只有一个父类. 父类可以叫做基类.超类.子类可以叫做派生类. 继承注意事项子类可以继承父类中的成员(属性和方法). 但是需要注意: 1.private的成员不能继承 2.子类和父类不在同一个程序包,使用默认访问权限的成员不能继承 3.构造器不能继承. 继
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu
javascript设计模式 – 策略模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 策略模式原理与用法.分享给大家供大家参考,具体如下: 介绍:策略模式中可以定义一些独立的类来封装不同的算法,每一个类封装一种具体的算法.在这里,每一种算法的封装都可以称之为一种策略.策略模式的主要目的是将算法的定义与使用分开. 定义:定义一系列算法类,将每一个算法封装起来,并让它们可以相互替换.策略模式让算法独立与使用它的客户而变化,也称为政策模式.策略模式是一种对象行为型模式. 场景:使用策略模式实现一个加减乘除的工具类,将四个算法进行封装. 示
JavaScript中继承原理与用法实例入门

本文实例讲述了JavaScript中继承原理与用法.分享给大家供大家参考,具体如下: 正统的面相对象的语言都会提供extend之类的方法用于出来类的继承,但Javascript并不提供extend方法,在Javascript中使用继承需要用点技巧. Javascript中的实例的属性和行为是由构造函数和原型两部分组成的,我们定义两个类:Person和zhangsan,它们在内存中的表现如下图1: 如果想让Zhangsan继承Person,那么我们需要把Person构造函数和原型中的属性和行为全部
javascript设计模式 – 模板方法模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 模板方法模式原理与用法.分享给大家供大家参考,具体如下: 介绍:模板方法模式是结构最简单的行为型设计模式,在其结构中只存在父类与子类之间的继承关系.使用模板方法模式,可以将一些复杂流程的实现步骤封装在一系列基本方法中. 定义:定义一个操作中算法的框架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤.模板方法是一种类行为型模式. 场景:我们设计一个游戏机,用来运行不同的游戏, 示例: var Game
Java 继承原理与用法实例分析

本文实例讲述了Java 继承原理与用法.分享给大家供大家参考,具体如下: 继承的概念继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 类的继承格式在 Java 中通过 extends 关键字可以申明一个类是从另外一个类继承而来的,一般形式如下: class 父类 { } class 子类 extends 父类 { } 为什么需要继承接下来
JavaScript设计模式之单例模式原理与用法实例分析

本文实例讲述了JavaScript设计模式之单例模式原理与用法.分享给大家供大家参考,具体如下: 单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有些对象只需要一个,如线程池.全局缓存.浏览器中的window对象等,这时候可以用到单例模式. 单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建. 全局变量不是单例模式,但在JavaScript开发中,经

JavaScript寄生组合式继承原理与用法分析

相关推荐

随机推荐