实例介绍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 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
详解vue 组件注册
Nov 20 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
javascript每日必学之多态
2016/02/23 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
Python3如何解决字符编码问题详解
2017/04/23 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python使用turtle库绘制树
2018/06/25 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Python之字典添加元素的几种方法
2020/09/30 Python
python 装饰器重要在哪
2021/02/14 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
学生实习介绍信
2014/01/15 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
亲子读书活动方案
2014/02/22 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
新娘婚礼致辞
2015/07/27 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Golang 对es的操作实例
2022/04/20 Golang