ES里面没有真正的继承,但是能通过某些手段达到继承效果,从而让一个类拥有另外一个类的方法  类 =>构造函数

继承描述某语言环境---魔兽世界 哈!其实我没玩过  魔兽世界里面 有Humen类  Humen类里面有Gnome(侏儒) , gnome有方法say(我的名字) 
有共有属性ggroup=gnome ,humen 有共有属性hgroup=humen , 有自己名字 hname 共有方法write();

总共共3种继承方式 一种类继承 一种是原型继承 还有一种组合继承  至于其他的继承方式,本质上没啥区别

  1. function humen(name){ //人类类
  2. this.name=name;
  3. this.write=function(){
  4. console.log("write")
  5. }
  6. }
  7. humen.prototype.hgroup="humen";
  8. new humen('张三');
  9. //传统的是在gnome里面建立一个temp属性 指向humen构造函数,从而去用humen里面this指向ganme 然后去初始化gnome里面的属性和方法(略)
  10. /**下面是类继承 */
  11. function gnome(name){
  12. this.say=function(){
  13. console.log(this.name);
  14. };
  15. humen.call(this,name);
  16. }
  17. gnome.prototype.ggroup="gnome";
  18. var gnome=new gnome("李四");
  19. console.log(gnome.name); //"李四"
  20. console.log(gnome.hgroup);//"underfined" 由此可以得出这种继承方式只是借用call 或者apply 来改变this 借用构造函数初始化属性和方法
  21. //无法继承原型上面的属性和方法
  22.  
  23. /*************************下面是原型继承 ***********************/
  24. function gnome(name){
  25. this.name=name;
  26. this.say=function(){
  27. console.log(this.name);
  28. }
  29. }
  30. gnome.prototype.ggroup="gnome";
  31. gnome.prototype=new humen(); // 这里把一些公共的参数传进去。。。
  32. var gnome=new gnome("李四");
  33. gnome.say();//李四
  34. console.log(gnome.hgroup); //humen 由此得出这种继承方式能够继承原型链上面的属性和方法 但是个体的方法(this.name)需要重新写一遍
  35.  
  36. /*************************都用的不爽 前面2种一种不能继承原型 一种构造函数里面的属性需要重新定义 混合继承***********************/
  37. function gnome(name){
  38. this.say=function(){ //自己的方法
  39. console.log(this.name);
  40. };
  41. humen.call(this,name);
  42. }
  43. gnome.prototype=new humen(); //new humen里面name属性是undefined 被类继承的name覆盖
  44. gnome.prototype.ggroup="gnome";
  45. var gnome1=new gnome("李四");
  46. gnome1.say();//李四
  47. gnome.prototype.constructor=gnome; //由于用原型继承 构造函数方向指向humen
  48. console.log(gnome1.hgroup);//"humen"
  49. console.log(gnome1.ggroup); //"gnome"

总结:每使用new 关键字new一个对象都是在创建一个空对象,改变this指针指向空对象,然后初始化其中属性和方法,还有_proto_指向原型对象,所以对于一些公用的属性和方法定义在原型对象之中,避免浪费内存,私有的(与参数相关)则放在构造函数中。类继承和原型继承都有各自的弊端,组合继承则互补,实现完美继承,注意constructor的指向

另外附上某处偷来的,自己觉得比较好的js世界里面的原型链图:

JS 继承总结的更多相关文章

  1. js继承

    js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...

  2. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  3. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  4. 老生常谈--Js继承小结

    一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...

  5. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  6. js继承实现

    JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...

  7. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  8. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  9. js继承的常用方法

    写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...

  10. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

随机推荐

  1. Maven学习笔记(1)之安装Maven

    此笔记是学习Maven时自己摸索+各种百度而来,并非全部原创,望与各位一同学习,勿拍~勿拍~ 安装步骤 1.下载Maven的最新版本,地址:http://maven.apache.org/downlo ...

  2. 字符编码详解及由来(UNICODE,UTF-8,GBK)[转帖]

    相信許多人對字符編碼都不是很了解,透過下文可以清晰的理解各种字符编码方式详解及由来. 一直对字符的各种编码方式懵懵懂懂,什么ANSI.UNICODE.UTF-8.GB2312.GBK.DBCS.UCS ...

  3. [原创]IIS7.5下配置ASP+PHP环境及错误处理(0xc0000135)

    IIS7.5下配置ASP+PHP环境及错误处理(0xc0000135) http://user.qzone.qq.com/93701178/blog/1398155812 操作系统更新至Win7或Wi ...

  4. linux磁盘存储命令 磁盘存储命令

    硬盘空间是一个有限的资源, 硬盘空间是一个有限的资源,用户用下面的命令 可 以随时了解当前硬盘空间的使用情况. 以随时了解当前硬盘空间的使用情况.   ? du,df命令 查看磁盘空间状况的操作 , ...

  5. linux下MySQL安装及设置

    转自:http://www.entage.net/1/viewspace-25420 1. 关于本文    本文将以MySQL 5.0.51为例,以CentOS 5为平台,讲述MySQL数据库的安装和 ...

  6. 从一个数组中提取出第start位到第end位

    假设通过数组in来表示一个很大的数(in[0]表示最低bit),提取该数的第start位到第end位(计数起始位为0): #define MAX_BYTE_LEN ( 48 ) int getData ...

  7. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

  8. Weblogic新增域(可以配置新端口)

    操作系统 :Linux version 2.6.32-504.el6.x86_64 Weblogic Server :11g 一.Weblogic新增域(可以配置新端口) 以weblogic用户登录 ...

  9. Ajax+JQuery

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. dedecms 后台发布后的文章不能编辑出现一片空白的解决办法

    dede后台无法写新文章也无法编辑以前的文档,文章编辑的地方无法写入,出现无法显示该页面的问题,这是怎么回事?我的dede在ftp中换过文件夹,是不是跟这个有关?该如何解决这个问题? 以下修改是针对d ...