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

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

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

参考代码:

  

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. loj 1221(spfa判正环)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25957 思路:由于路线为一个环,将路径上的权值改为c-p*d,那么 ...

  2. 提高C#编程水平的50个要点

    下面的文章转载于 提高C#编程水平的50个要点 1.总是用属性 (Property) 来代替可访问的数据成员 2.在  readonly 和 const 之间,优先使用 readonly 3.在 as ...

  3. 拓扑排序 Codeforces Round #290 (Div. 2) C. Fox And Names

    题目传送门 /* 给出n个字符串,求是否有一个“字典序”使得n个字符串是从小到大排序 拓扑排序 详细解释:http://www.2cto.com/kf/201502/374966.html */ #i ...

  4. eBay Notification介绍

      1.简介 "通知服务"(约定为Notification的中文名称),是EbayAPI提供的一个便捷的工具,具有实时性的特点.   其设计思想基于发布-订阅模式.一旦客户端订阅了 ...

  5. onclientclick和onclick区别

    OnClientClick是客户端脚本,一般使用javascript,在客户端,也就是IE中运行,点击后马上执行OnClick是服务器端事件处理函数,使用C#或者vb.net,在服务器端,也就是IIS ...

  6. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  7. Spring_讲解

    http://s,i,s,h,u,o,k.com/forum/blogPost/list/6174.html

  8. PHP + Redis 实现一个简单的twitter

    原文位于Redis官网http://redis.io/topics/twitter-clone Redis是NoSQL数据库中一个知名数据库,在新浪微博中亦有部署,适合固定数据量的热数据的访问. 作为 ...

  9. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

  10. Linux环境下实现哲学家就餐问题

    #include <stdio.h> #include <stdlib.h> #include <memory.h> #include <pthread.h& ...