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 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 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
基于Zookeeper的使用详解
2013/05/02 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
存储过程的优缺点是什么
2015/01/10 面试题
农村婚庆司仪主持词
2014/03/15 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
民主生活会剖析材料
2014/09/30 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
今日说法观后感
2015/06/08 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Python中的变量与常量
2021/11/11 Python