S1:js中一切皆对象,想想如果要实现对父对象属性和方法的继承,最初我们会怎样子来实现呢,考虑到原型的概念,最初我是这样来实现继承的

function Parent(){
this.name='123';
}
Parent.prototype.getName=function(){
return this.name;
}
function Son(){
this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
return this.age;
}
var son=new Son();
console.log('Name :'+son.getName()+';Age: '+son.getAge()); VM1777:16 Name :123;Age: 20

从上面可以看到实现对Parent的继承主要是覆写了Son的prototype,这样便把Parent的属性和方法过给了Son的原型,这样子在通过new Son()构造出来的对象均会继承来自原型【即父对象Parent】的属性和方法,这样就达到了继承效果;但这样会带来一个副作用,就是当父对象中包含引用类型的属性时,子对象对引用类型数据的修改,会影响到所有的子对象,显然这不是我们需要的效果:

function Parent(){
this.name='123';
this.fruits=['apple'];
}
Parent.prototype.getName=function(){
return this.name;
}
function Son(){
this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple", "pear"]

S2:目前想到要解决这个问题就是使每个子对象都拥有一份父对象属性的复制品,这样修改属性时只是修改了子对象下的属性,而不会影响到其他的子对象属性。这一目标的实现参照前人的对象冒充的方式来实现

function Parent(){
this.name='123';
this.fruits=['apple'];
}
Parent.prototype.getName=function(){
return this.name;
}
function Son(){
Parent.call(this);
this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple"]

上面我在Son函数里加了Parent.call(this)实现在new Son()的时候将this[即new 出来的Son对象]冒充成Parent函数里的上下文this来调用Parent()函数,从而拿到了父对象的属性和方法副本,所以在接下来修改父对象的属性和方法时其实是修改的副本,故达到了不会影响全部子对象的效果。但是由于Son.prototype=new Parent()的使用,我们得到了两份实例的属性和方法,而再我们拿到了副本以后,只是需要父对象的原型就行了,从下面可以看出我们只需要原型中的getname();

S3:接下来就是要去掉一份实例的属性和方法,这时候是constructor发挥作用的时候了,看下边代码,将Parent.prototype重新构建成一个原生对象,来作为子对象的原型,再把constructor指向子构造器

function Parent(){
this.name='123';
this.fruits=['apple'];
}
Parent.prototype.getName=function(){
return this.name;
}
function Son(){
Parent.call(this);
this.age=20;
}
function Extend(Parent,Son){
var proto = new Object(Parent.prototype);
proto.constructor = Son;
Son.prototype=proto;
}
Extend(Parent,Son);
Son.prototype.getAge=function(){
return this.age;
}

Javascript继承实现的更多相关文章

  1. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  2. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  3. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

  4. 图解JavaScript 继承

    JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...

  5. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  6. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  7. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  8. javascript继承(五)—prototype最优两种继承(空函数和循环拷贝)

    一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  9. javascript继承(四)—prototype属性介绍

    js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向 ...

  10. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

随机推荐

  1. sqlserver错误"试图扩大物理文件时,MODIFY FILE 遇到操作系统错误 112(磁盘空间不足。)。"处理

    正常还原的时候报错: Microsoft SQL-DMO (ODBC SQLState: 42000)---------------------------试图扩大物理文件时,MODIFY FILE  ...

  2. [转帖]Asp.NET 弹出页面

    原文链接:http://www.cnblogs.com/adi-liu/archive/2008/07/18/1246091.html ASP.NET 弹出对话框和页面之间传递值的经验总结 今天碰到一 ...

  3. 生产者和消费者(.net实现)

    生产者和消费者,是多线程中的经典问题,听过java方面的这个问题的培训,闲暇时用.net实现了这 个问题.在此实现的是,生产一个消息后,消费一个消息,再生产一个消息,循环往复.  1.消息代码  us ...

  4. 04day2

    中位数 排序 [问题描述] 给出 1~n 的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是 b.中位数是指把所有元素从小到大排列后,位于中间的数.n<=100000 [输入] 第一 ...

  5. 省常中模拟 Test2 Day2

    two 模拟 大意:给你一个 N 位二进制数,有四种操作:加1.减1.乘2.整除2.给定一个操作序列,求最终结果.N <= 5*10^6.数据保证不会在最高位上进行进位或退位操作. 初步解法:由 ...

  6. ECshop 二次开发模板教程1

    本教程适用于了解 ECshop 和 ECshop模板DIY 以及它们的日常使用,在查看前阁下需要至少会使用一种编辑器(exp:Dreamweaver, editplus, emacs, vi, ee  ...

  7. IO负载高的来源定位

    前言: 在一般运维工作中经常会遇到这么一个场景,服务器的IO负载很高(iostat中的util),但是无法快速的定位到IO负载的来源进程和来源文件导致无法进行相应的策略来解决问题. 这个现象在MySQ ...

  8. ASP.NET MVC+Bootstrap个人博客之打造清新分页Helper(三)

    有点另类,分页直接是在后台拼接好html,然后发送到前台的: 1. 分页容器: <div class="pagination"> <ul> //****** ...

  9. 数据库SQL Server与C#中数据类型的对应关系

    ylbtech- .NET-Basic:数据库SQL Server与C#中数据类型的对应关系 数据库SQL SServer与C#中数据类型的对应关系 1.A,返回顶部 数据库 C#程序 int int ...

  10. HDU5764 After a Sleepless Night 树形乱搞题

    分析(官方题解): 假设根已确定,可以发现新树若合法,需满足以下性质:根节点是n:儿子的值不大于父亲:具有相同值的节点形成一条链,并且链不会发生“分叉”(即有多个最低点).所以对于新树中有出现的值x, ...