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 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
jquery 模板的应用示例
Nov 12 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 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遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
详解angular element()方法使用
2017/04/08 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
门卫人员岗位职责
2013/12/24 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
表扬信范文
2015/05/04 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
python 离散点图画法的实现
2022/04/01 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android