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小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
escape unescape的php下的实现方法
2007/04/27 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
在django模板中实现超链接配置
2019/08/21 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Django models filter筛选条件详解
2020/03/16 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
什么是Rollback Segment
2013/04/22 面试题
大学生职业生涯规划书模版
2013/12/30 职场文书
运动会表扬稿大全
2014/01/16 职场文书
最常使用的求职信
2014/05/25 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
周年庆典答谢词
2015/01/20 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis