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

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

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

参考代码:

  

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. IIS上发布WCF发布服务,访问不到

    1 环境是IIS7,发布WCF发布服务,访问不到. 一种原因站点自动生成“程序应用池”和站点的Framwork版本不一致. 解决的办法:新建一个“程序应用池”,然后站点指向这个新建的“程序应用池”

  2. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(二)转载自码农网

    7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...

  3. img 默认是行内元素,它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

  4. elk是指logstash,elasticsearch,kibana三件套,这三件套可以组成日志分析和监控工具

    Logstash是一个完全开源的工具,他可以对你的日志进行收集.分析,并将其存储供以后使用(如,搜索),您可以使用它.说到搜索,logstash带有一个web界面,搜索和展示所有日志.kibana 也 ...

  5. hdu 1284 分硬币 && uva 147

    #include<bits/stdc++.h> using namespace std; int main() { unsigned ]; memset(dp,,sizeof(dp)); ...

  6. Spring的replace-method标签

    Spring的解析源码 public void parseReplacedMethodSubElements(Element beanEle, MethodOverrides overrides) { ...

  7. 空函数有参函数调用参数的注意事项Swift 1.1语言

    空函数有参函数调用参数的注意事项Swift 1.1语言 7.2.3  空函数 空函数有参函数调用参数的注意事项Swift 1.1语言空函数是函数中最简单的形式.在空函数中,函数只有一个空壳,里面是没有 ...

  8. HDU2222 Keywords Search(AC自动机模板)

    AC自动机是一种多模式匹配的算法.大概过程如下: 首先所有模式串构造一棵Trie树,Trie树上的每个非根结点都代表一个从根出发到该点路径的字符串. 然后每个结点都计算出其fail指针的值,这个fai ...

  9. POJ2570 Fiber Network(Floyd)

    d[i][j]表示从i点到j点可以全程提供光纤的公司的集合,集合用26位的二进制压缩. 那么状态转移方程就是dk[i][j]|=dk-1[i][k]&dk-1[k][j]. #include& ...

  10. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...