实例介绍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 UI 1.72 之datepicker
Dec 29 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
详解vue 命名视图
Aug 14 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JavaScript实例 ODO List分析
Jan 22 Javascript
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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
smarty简单入门实例
2014/11/28 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS高级运动实例分析
2016/12/20 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
package.json文件配置详解
2017/06/15 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
幼师自我鉴定范文
2013/10/01 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
地球一小时宣传标语
2014/06/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
学校少先队工作总结
2015/08/12 职场文书
Nginx 匹配方式
2022/05/15 Servers