实例介绍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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
判断浏览器的javascript版本的代码
2010/09/03 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
详解vue父子组件间传值(props)
2017/06/29 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
计算机相关的自我评价
2014/01/15 职场文书
yy生日主持词
2014/03/20 职场文书
公司开除员工通知
2015/04/22 职场文书
对学校的意见和建议
2015/06/04 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
宪法宣传标语100条
2019/10/15 职场文书