美文网首页我爱编程
js继承简单介绍

js继承简单介绍

作者: yuanjiex | 来源:发表于2018-08-09 01:45 被阅读0次

一.构造继承

构造函数继承:

function  Super(){

        this.colors= ['c','a','b'];

        this.print = function(){

           console.log(this.colors);

        }

    }

    function Sub(){

        Super.call(this);

    }

    var instance1 =new Sub();

   instance1.colors.push('v');

   console.log(instance1.colors);   //c,a,b,v

   var instance2 =new Sub();

   console.log(instance2.colors);//c a b

基本思想 : 构造函数方式就是假借call和apply方法,把父类的构造函数嫁接到子类身上,子类new出一个实例的时候,就把父类的构造函数的内容copy到实例中了。

对于基本属性而言,非常棒,每个实例之间不共享属性,立刻拥有自己的私有属性了。对于方法属性而言,不太好。我原本希望实现1个函数在内存存储,最好没有拷贝,却能被父类和子类一起来共享。

实现了属性的私有,没有实现方法的共享

解决了原型链的两大问题:

其一, 保证了原型链中引用类型值的独立,不再被所有实例共享;

其二, 子类型创建时也能够向父类型传递参数.

组合继承:

 

 

function  Super(){

        this.colors= ['c','a','b'];

    }

    Super.prototype.print= function(){

        console.log(this.colors);

    };

    function Sub(){

        Super.call(this);

    }

    Sub.prototype =new Super();

    Sub.prototype.constructor= Sub;

    var instance1 =new Sub();

    instance1.colors.push('v');

    console.log(instance1.colors);  //a b c v

    var instance2 =new Sub();

    console.log(instance2.colors);   //a b c

 

组合式继承采用了原型链式继承构造函数式继承结合的办法。

我们把(我们希望子类有一份拷贝的)基本属性放在父类的构造函数里。我们把希望共享的函数方法放在父类的原型上。

实现了函数的共享,也实现了属性的私有

原型继承

 

function  Super(){

        this.colors= ['c','a','b'];

        this.print= function(){

           console.log(this.colors);

        }

    }

    function Sub(){

    }

    Sub.prototype =new Super();

    var instance1 =new Sub();

   instance1.colors.push('v');

   console.log(instance1.colors);   //c,a,b,v

    var instance2 =new Sub();

   console.log(instance2.colors);//c a b v

原型链式借用了js的对象的一个特性:对象去寻找自己的属性的时候,先在自己的当前对象上寻找,如果没有,就去自己的原型链上寻找,一直顺着原型链向上寻找直到找到null。

对于一个基本属性而言,这太尴尬了,子类修改了属性的值,父类和所有其他子类的值就全部被修改了。因为大家伙使用的是相同指针指向的堆上同一个值。

方法和属性全都被共享了。

寄生式继承

 

var sup = {

        colors : ['c','a','b']

    }

    var instance1 =Object.create(sup);

    instance1.colors.push('v');

    console.log(instance1.colors);    //a b c v

    var instance2 =Object.create(sup);

    console.log(instance2.colors);    //a b c v

 

原来是一种变了花样的原型继承呀。

所以它有原型继承的所有缺点 :基本属性不能私有

还有所有优点:方法属性可以共享

不同点就是:我们不需要去创建函数来表示一个类(构造函数),通过类(构造函数)去创建一个对象。object.create里面就帮我们创建类(构造函数)了。我们在外面看,好像实现了object之间的直接继承。

寄生组合式继承

 

function  Super(){

        this.colors= ['c','a','b'];

    }

    Super.prototype.print= function(){

        console.log(this.colors);

    };

    function Sub(){

        Super.call(this);

    }

    var proto =Object.create(Super.prototype);

    proto.constructor= Sub;

    Sub.prototype =proto ;

    var instance1 =new Sub();

    instance1.colors.push('v');

    console.log(instance1.colors);//a b c v

    var instance2 =new Sub();

    console.log(instance2.colors);//ab c

 

组合式并不完美啊。有一个很大的问题。基本属性在子类对象里出现了两次!!

Super.call(this);这个实现了对colors的拷贝。

var proto = Object.create(Super.prototype);

这句非常关键,我们只把super原型上的内容放在proto的原型链上了。

proto.constructor = Sub;Sub.prototype = proto ;

实现了原型和构造器的互相指引。

组合式不通的就是寄生组合式更加关注了父类的基本类型不能被共享到原型链上,变成误用的代码,浪费内存。

寄生组合式继承,集寄生式继承和组合继承的优点于一身,是实现基于类型继承的最有效方法.

相关文章

  • js继承简单介绍

    一.构造继承 构造函数继承: function Super(){ this.colors= ['c','a','b...

  • JavaScript 继承

    继承是JS中非常内容,原因就是JS没有地道的继承方式,我们只能通过各种方式来模拟面向对象中的继承。下面介绍几种常见...

  • js继承

    js各种继承方式介绍 1.原型链继承 2.构造继承 3.组合继承 4.寄生继承 5.寄生组合式继承 这种方式的高效...

  • JavaScript继承

    js继承方式js是一门弱类型动态语言,封装和继承是他的两大特性 原型链继承 优点: 简单易于实现 实例是子类的实例...

  • UIButton的使用

    1、简单介绍UIButton UIButton是继承于UIControl(UIControl继承于UIView),...

  • js中call、apply和bind到底有什么区别?

    介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承)。因此,每个函...

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • nodejs安装

    Node.js安装 目录 Node.js简单介绍 windows安装Node.js Linux安装Node.js ...

  • JS中的继承(下)

    在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要...

  • js面向对象实现面向对象(二)

    上一篇讲到js实现对类对封装,本篇介绍类的继承,多态。 类的继承 类式继承 类式继承方式是将父类的实例赋在子类的原...

网友评论

    本文标题:js继承简单介绍

    本文链接:https://www.haomeiwen.com/subject/tamtbftx.html