实例介绍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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
ext 代码生成器
2009/08/07 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python打包成so文件过程解析
2019/09/28 Python
Python 爬虫性能相关总结
2020/08/03 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
专科应届生求职信
2013/11/24 职场文书
打架检讨书300字
2014/02/02 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
服装设计师求职信
2014/06/04 职场文书
党性教育心得体会
2014/09/03 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
车间班组长竞聘书
2015/09/15 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS