实例介绍JavaScript中多种组合继承


Posted in Javascript onJanuary 20, 2019

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式。

下面来看一个例子:

function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  alert(this.name);

 }

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承方法

 SubType.prototype = new SuperType();

 SubType.prototype.sayAge = function() {

  alert(this.age);

 }

 

 var instance1 = new SubType("Nicholas", 29);

 instance1.colors.push("black");

 alert(instance1.colors); //red,blue,green,black

 instance1.sayName(); //Nicholas

 instance1.sayAge(); //29

 

 var instance2 = new SubType("Greg", 27);

 alert(instance2.colors); //red,blue,green

 instance2.sayName(); //Greg

 instance2.sayAge(); //27

组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。

2. 原型式继承

可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var antherPerson = object(person);

 antherPerson.name = "Greg";

 antherPerson.friends.push("Rob");

 

 var antherPerson = object(person);

 antherPerson.name = "Linda";

 antherPerson.friends.push("Barbie");

 

 alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 function createAnother(original) {

  var clone = object(original);

  clone.sayHi = function() {

   alert("Hi");

  };

  return clone;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var anotherPerson = createAnother(person);

 anotherPerson.sayHi();

4. 寄生组合式继承

集寄生式继承和组合继承的优点与一身,是实现基本类型继承的最有效方式。

//继承原型

 function extend(subType, superType) {

  function F(){};

  F.prototype = superType.prototype;

 

  var prototype = new F;

  prototype.constructor = subType;

  subType.prototype = prototype;

 }

 

 //超类方法

 function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  return this.name;

 }

 

 //子类方法

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承超类的原型

 extend(SubType, SuperType);

 

 //子类方法

 SubType.prototype.sayAge = function() {

  return this.age;

 }

 

 var instance1 = new SubType("Shelby");

 var instance2 = new SubType("Court", 28);

 

 instance1.colors.push('black');

 

 alert(instance1.colors); //red,blue,green,black

 alert(instance2.colors); //red,blue,green

 

 alert(instance1 instanceof SubType); //true

 alert(instance1 instanceof SuperType); //true

这段例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的多余的属性。与此同时,原型链还能保持不变。因此,还能正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
You might like
社区(php&&mysql)三
2006/10/09 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
php实现文章评论系统
2019/02/18 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
Python每天必学之bytes字节
2016/01/28 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python实现名片管理器的示例代码
2019/12/17 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
shell程序中如何注释
2012/01/28 面试题
编辑找工作求职信分享
2014/01/03 职场文书
养殖项目策划书范文
2014/01/13 职场文书
银行办公室岗位职责
2014/03/10 职场文书
关于安全的标语
2014/06/10 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android