javascript的几种继承方法介绍


Posted in Javascript onMarch 22, 2016

1.原型链继承:构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。确认原型和实例之间的关系用instanceof。

原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数

function Parent(){
    this.name='mike';
  }
  function Child(){
    this.age=12;
  }
  //儿子继承父亲(原型链)
  Child.prototype=new Parent();//Child继承Parent,通过原型形成链条
  var test=new Child();
  console.log(test.age);
  console.log(test.name);//得到被继承的属性
  //孙子继续原型链继承儿子
  function Brother(){
    this.weight=60;
  }
  Brother.prototype=new Child();//继承原型链继承
  var brother=new Brother();
  console.log(brother.name);//继承了Parent和Child,弹出mike
  console.log(brother.age);//12

  console.log(brother instanceof Child);//ture
  console.log(brother instanceof Parent);//ture
  console.log(brother instanceof Object);//ture

2.构造函数实现继承:又叫伪造对象或经典继承。
构造函数实现继承缺点:借用构造函数虽然解决了原型链继承的两种问题,但没有原型,则复用无从谈起,所以需要原型链+借用构造函数模式。

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  function Child(age){
    Parent.call(this,age);//把this指向Parent,同时还可以传递参数
  }
  var test=new Child(21);
  console.log(test.age);//21
  console.log(test.name);

  test.name.push('bill');
  console.log(test.name);//mike,jack,smith,bill

3.组合继承:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样即通过在原型上定义方法实现了函数复用,又保证每个实现都有它自己的属性。

缺点:无论什么情况下,都会调用两次超类型构造函数,一次是在创建子类型原型的时候,另一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  Parent.prototype.run=function(){
    return this.name+' are both '+this.age;
  }
  function Child(age){
    Parent.call(this,age);//给超类型传参,第二次调用
  }
  Child.prototype=new Parent();//原型链继承,第一次调用
  var test1=new Child(21);//写new Parent(21)也行
  console.log(test1.run());//mike,jack,smith are both 21

  var test2=new Child(22);
  console.log(test2.age);
  console.log(test1.age);
  console.log(test2.run());
  //这样可以使test1和test2分别拥有自己的属性age同时又可以有run方法

4.原型式继承:借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。它要求必须有一个对象可以作为另一个对象的基础。

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  }
  var person={
    name:'nicho',
    friends:['shell','jim','lucy']
  }
  var anotherPerson = object(person);
  anotherPerson.name = 'Greg';
  anotherPerson.friends.push('Rob');
  console.log(anotherPerson.friends);//["shell", "jim", "lucy", "Rob"]

  var yetAnotherPerson = object(person);
  yetAnotherPerson.name = 'Linda';
  yetAnotherPerson.friends.push('Barbie');
  console.log(yetAnotherPerson.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义属性的对象。

var person2={
    name:'nicho',
    friends:['shell','jim','lucy']
  };
  var anoP2=Object.create(person2);
  anoP2.name="Greg";
  anoP2.friends.push('Rob');
  console.log(anoP2.friends);//["shell", "jim", "lucy", "Rob"]

  var yetP2=Object.create(person2);
  yetP2.name="Linda";
  yetP2.friends.push('Barbie');
  console.log(yetP2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]
  /*以这种方式指定的任何属性都会覆盖原型对象上的同名属性。*/
  var threeP=Object.create(person,{
    name:{value:'red'}
  });
  console.log(threeP.name);//red,如果threeP中无name则输出person2里的name值nicho

5.寄生式继承:思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  function createAnother(o){
    var cl=object(o);
    cl.sayHi=function(){
      console.log('hi');
    }
    return cl;
  };
  var person={
    name:'nick',
    friends:['shelby','court','van']
  }
  var anotherPerson=createAnother(person);
  anotherPerson.sayHi();//hi
  console.log(anotherPerson.name);//nick
  console.log(anotherPerson.friends);//["shelby", "court", "van"]

  /*这个例子中的代码基于 person 返回了一个新对象—— anotherPerson 。 新对象不仅具有 person
   的所有属性和方法,而且还有自己的 sayHi() 方法*/

寄生组合式继承:无论什么情况下,都会调用两次超类型构造函数,一次是在创建子类型原型的时候,另一次是在创建子类型原型的时候,另一次是在子类型构造函数内部,这样子类型最终会包含超类型对象的全部实例属性,我们不得不在调用子类型构造函数时重写这些属性。因此出现了寄生组合式继承。

6.寄生组合式继承:借用构造函数来继承属性,通过原型链的混成形式来继承方法。基本思路:不必为了指定子类型的原型而调用超类型的构造函数。本质上就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

function SuperType(name){
    this.name=name;
    this.colors=['red','blue','green'];
  }
  SuperType.prototype.sayName=function(){
    console.log(this.name);
  }
  function SubType(name,age){
    SuperType.call(this,name);
    this.age=age;
  }
  function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  /*inheritPrototype此函数第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性,
  * 从而弥补因重写原型而失去的默认的constructor属性,第三步将新创建的对象(副本)赋值给子类型的原型*/
  function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);//创建对象
    prototype.constructor=subType;//增强对象
    subType.prototype=prototype;//指定对象
  }
  inheritPrototype(SubType,SuperType);
  SubType.prototype.sayAge=function(){
    console.log(this.age);
  }

  var p=new SubType('xiaoli',24);
  console.log(p.sayName());
  console.log(p.sayAge());
  console.log(p.colors)

此方法优点:只调用了一次父类SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的多余的属性。同时原型链还能保持不变,还能正常使用instanceof和isPrototypeOf();

以上这篇javascript的几种继承方法介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 #Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 #Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 #Javascript
jQuery toggle 代替方法
Mar 22 #Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 #Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 #Javascript
You might like
php IP转换整形(ip2long)的详解
2013/06/06 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python中Threading用法详解
2017/12/27 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
J2EE模式面试题
2016/10/11 面试题
十佳标兵事迹材料
2014/08/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
党员自我评价2015
2015/03/03 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书