js实例教程-javaScript之继承的基础学习,实例讲解

发布时间:2018-12-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-javaScript之继承的基础学习,实例讲解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前段时间,在面试中不停的会被提到继承。做一个关于继承的总结。关于对象之间的5中继承方式


若现在有对象“A”的构造函数:
 function A(){      this.sPEcies = "我是A"; }
还有一个对象“B”的构造函数:
  function B() {         this.name = "我是B";  }
如何操作,可以使得B继承到A中的方法?(很容易我们知道A相当于是父对象,B是子对象)

一、构造函数继承:使用call/apply方法,即:将父对象的构造函数绑定在子对象中。其实就是在子对象添加call/apply。

 function B(){     //使用call继承     A.call(this);     //使用apply继承: A.apply(this,arguments);     this.name = "我是B"; } VAR b = new B(); console.LOG(b.species);    //我是A console.log(b.name);       //我是B

二、PRototype模式:将子对象的prototype属性指向A,则B的实例中就有了A。

  B.prototype = new A();  B.prototype.constructor = B;  var b = new B();  console.log(b.species);       //我是A  console.log(b.name);          //我是B

首先在代码的第一行中,使用B.prototype = new A(),将B的prototype属性指向了A的实例。也就是说完全删除了prototype对象原先值,重新加值。 在第二行中B.prototype.constructor = B是因为在原型的概念中,我们都知道任何一个函数都会有一个prototype属性。而他们的prototype属性都会有一个constructor属性,指向其的构造函数。通过让B的constructor重新指回原构造函数,止造成继承紊乱。 如果在编程中替换了prototype对象,那么下一步就需要在新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

三、直接继承prototype:改写A对象,将不变的对象都直接写入A.prototype,所以可以通过B跳过A,直接继承A.prototype(改进上一中方法的继承方式)。

首先改写A对象:
 function A(){     this.a = "B访问不到我" } A.prototype.aa = "B可以访问到我";
再将B的prototype指向A的prototype
 B.prototype = A.prototype; B.prototype.constructor = B; var bb = new B(); console.log(bb.a);          //undefined console.log(bb.aa);         //B可以访问到我
使用这种模式的继承,优点是可以将b不需要继承到的东西放在构造函数内部使得实例化后的B无法访问,而节省了内存。缺点是因为B.prototype和A.prototype指向了同一个对象,所以会造成如果修改了B.prototype 都会影响到A.prototype。可以在上面的代码之后加入一句话判断是否是这样子的:
 console.log(A.prototype.constructor);      //B

四、利用空对象继承:改进上一个。不会污染到父对象。

 var F = function(){}; F.prototype = A.prototype; B.prototype = new F(); B.prototype.constructor = B;
新申请的F是空对象,所以几乎不占内存。这时,修改B的prototype对象,就不会影响到A的prototype对象了。

五、拷贝继承:将父对象的所有属性和方法都拷贝在子对象上。

上面的都是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用”拷贝”方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,也就可以实现继承。

和之前的一样,将不需要B去继承的还是放在A的内部 将A的属性都放在A.prototype上 再写一个可以实现拷贝的目的的函数。这个函数的作用是将父级对象的prototype属性,拷贝在子对象的prototype上。

 function extend(Child,Parent){     var p = Parent.prototype;     var c = Child.prototype;     for (var i in p){         c[i] = p[i];     }     c.uber = p; }
使用方式:
 extend(B,A); var b = new B();

前段时间,在面试中不停的会被提到继承。做一个关于继承的总结。关于对象之间的5中继承方式


若现在有对象“A”的构造函数:
 function A(){      this.species = "我是A"; }
还有一个对象“B”的构造函数:
  function B() {         this.name = "我是B";  }
如何操作,可以使得B继承到A中的方法?(很容易我们知道A相当于是父对象,B是子对象)

一、构造函数继承:使用call/apply方法,即:将父对象的构造函数绑定在子对象中。其实就是在子对象添加call/apply。

 function B(){     //使用call继承     A.call(this);     //使用apply继承: A.apply(this,arguments);     this.name = "我是B"; } var b = new B(); console.log(b.species);    //我是A console.log(b.name);       //我是B

二、prototype模式:将子对象的prototype属性指向A,则B的实例中就有了A。

  B.prototype = new A();  B.prototype.constructor = B;  var b = new B();  console.log(b.species);       //我是A  console.log(b.name);          //我是B

首先在代码的第一行中,使用B.prototype = new A(),将B的prototype属性指向了A的实例。也就是说完全删除了prototype对象原先值,重新加值。 在第二行中B.prototype.constructor = B是因为在原型的概念中,我们都知道任何一个函数都会有一个prototype属性。而他们的prototype属性都会有一个constructor属性,指向其的构造函数。通过让B的constructor重新指回原构造函数,防止造成继承紊乱。 如果在编程中替换了prototype对象,那么下一步就需要在新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

三、直接继承prototype:改写A对象,将不变的对象都直接写入A.prototype,所以可以通过B跳过A,直接继承A.prototype(改进上一中方法的继承方式)。

首先改写A对象:
 function A(){     this.a = "B访问不到我" } A.prototype.aa = "B可以访问到我";
再将B的prototype指向A的prototype
 B.prototype = A.prototype; B.prototype.constructor = B; var bb = new B(); console.log(bb.a);          //undefined console.log(bb.aa);         //B可以访问到我
使用这种模式的继承,优点是可以将b不需要继承到的东西放在构造函数内部使得实例化后的B无法访问,而节省了内存。缺点是因为B.prototype和A.prototype指向了同一个对象,所以会造成如果修改了B.prototype 都会影响到A.prototype。可以在上面的代码之后加入一句话判断是否是这样子的:
 console.log(A.prototype.constructor);      //B

四、利用空对象继承:改进上一个。不会污染到父对象。

 var F = function(){}; F.prototype = A.prototype; B.prototype = new F(); B.prototype.constructor = B;
新申请的F是空对象,所以几乎不占内存。这时,修改B的prototype对象,就不会影响到A的prototype对象了。

五、拷贝继承:将父对象的所有属性和方法都拷贝在子对象上。

上面的都是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用”拷贝”方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,也就可以实现继承。

和之前的一样,将不需要B去继承的还是放在A的内部 将A的属性都放在A.prototype上 再写一个可以实现拷贝的目的的函数。这个函数的作用是将父级对象的prototype属性,拷贝在子对象的prototype上。

 function extend(Child,Parent){     var p = Parent.prototype;     var c = Child.prototype;     for (var i in p){         c[i] = p[i];     }     c.uber = p; }
使用方式:
 extend(B,A); var b = new B();

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-javaScript之继承的基础学习,实例讲解全部内容,希望文章能够帮你解决js实例教程-javaScript之继承的基础学习,实例讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。