一、基于原型链方式实现的继承

缺点:无法从子类中调用父类的构造函数,所以没有办法把子类的属性赋值到父类中。

如果父类中有引用类型,例如:数组。此时这个引用类型会添加到子类的原型当中,一但子类某个对象修改,则影响全部其他对象。

参考代码:

  

function Parent(){
this.pv = "parent";
this.color = ["red","yellow"];
}
Parent.prototype.showParentValue = function(){
alert(this.pv);
}
function Child(){
this.cv = "child";
}
Child.prototype = new Parent();
Child.prototype.showChildValue = function(){
alert(this.cv);
} var c1 = new Child();
//Child中的原型的color被修改
c1.color.push("bule");//red yellow blue
alert(c1.color);
var c2 = new Child();//同样影响c2中color值
alert(c2.color);//red yellow blue

二、基于伪装方式实现的继承

缺点:没有完成原型的指向。只能继承父类属性无法完成父类方法的继承。

参考代码:

function Parent(name){
this.color = ["red","blue"];
this.name=name;
}
function Child(name,age){
this.age = age;
Parent.call(this,name);//用第一个变量的上下文调用这个函数
}
var c1 = new Child("Leon",12);
var c2 = new Child("Ada",22);
alert(c1.name + "," +c1.age);
alert(c2.name + "," +c2.age);

三、终极方案-组合方式实现继承
原理:通过原型链方式实现方法的继承,通过伪装方式实现属性的继承。

参考代码:

/**
* 组合的实现方式是属性通过伪造的方法实现,方法通过原型链的方式实现
*/
function Parent(name){
this.color = ["red","blue"];
this.name = name;
}
Parent.prototype.ps = function(){
alert(this.name + "[" + this.color + "]");
}
function Child(name,age){
//已经完成了伪造
Parent.call(this,name);
this.age = age;
}
Child.prototype = new Parent();
Child.prototype.say = function(){
alert(this.name + "," + this.age + "[" + this.color + "]")
} var c1 = new Child("rigid",30);

javascrpt 继承的更多相关文章

  1. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  2. 面向对象的Javascript(5):继承

    在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求 良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScrip ...

  3. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  4. JavaScript的继承实现方式

    1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...

  5. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  6. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  7. JS继承类相关试题

    题目一: //有关于原型继承的代码如下:function Person(name) {   this.name = name;}Person.prototype = {     getName : f ...

  8. JS继承之寄生类继承

    原型式继承 其原理就是借助原型,可以基于已有的对象创建新对象.节省了创建自定义类型这一步(虽然觉得这样没什么意义). 模型 function object(o){ function W(){ } W. ...

  9. JS继承之借用构造函数继承和组合继承

    根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...

随机推荐

  1. HDU 4342History repeat itself 数学

    C - History repeat itself Time Limit:1000MS     Memory Limit:32768KB      Description Tom took the D ...

  2. 将long型转换为多少MB的方法

    Formatter.formatFileSize( this, processInfo.getMemsize()) public class DensityUtil { /** * 根据手机的分辨率从 ...

  3. qmf

    vim命令 ——————————正文开始—————————— Vim是一款简单而强大的文本编辑器,它能以简单的方式完成复杂的操作. 学习 vim 首先了解它的几种模式: 下图提供了三种模式下的切换: ...

  4. LR结构图

  5. javascript优化--07模式(对象)02

    沙箱模式: 解决空间命名模式的几个缺点: 命名空间模式中无法同时使用一个应用程序或库的两个版本运行在同一个页面中,因为两者需要相同的全局符号: 以点分割,需要输入更长的字符,解析时间也更长: 全局构造 ...

  6. spring实战六之使用基于java配置的Spring

    之前接触的都是基于XML配置的Spring,Spring3.0开始可以几乎不使用XML而使用纯粹的java代码来配置Spring应用.使用基于java配置的Spring的步骤如下: 1. 创建基于ja ...

  7. 简单几何(极角排序) POJ 2007 Scrambled Polygon

    题目传送门 题意:裸的对原点的极角排序,凸包貌似不行. /************************************************ * Author :Running_Time ...

  8. java 文件md5+字符串md5 实现

    import org.apache.commons.codec.binary.Hex; import org.apache.commons.codec.digest.DigestUtils; impo ...

  9. ural 1243. Divorce of the Seven Dwarfs

    1243. Divorce of the Seven Dwarfs Time limit: 1.0 secondMemory limit: 64 MB After the Snow White wit ...

  10. BZOJ4294 : [PA2015]Fibonacci

    斐波那契数列模$10^m$的循环节为$6\times10^m$,于是从低位到高位dfs即可. #include<cstdio> #include<cstring> #defin ...