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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
js实现下拉框二级联动
Dec 04 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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项目的方法
2006/10/09 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
常用的javascript function代码
2008/05/23 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
原生js实现下拉框选择组件
2021/01/20 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
下载给定网页上图片的方法
2014/02/18 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python数据封装json格式数据
2018/03/04 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python实现从wind导入数据
2019/12/03 Python
Python实现上下文管理器的方法
2020/08/07 Python
责任书格式范文
2014/07/28 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书