一、原型链继承【子构造函数的原型对象是父构造函数的实例】【对原型属性和方法的继承】
1、每个构造函数【prototype】都有一个原型对象,原型对象中都包含一个指向构造函数的指针【constructor】,而实
例都包含一个指向原型对象的内部指针【__proto__】。当原型对象等于另外一个类型的实例即继承。
eg:

  1. //创建父类Animal构造函数
  2. function Animal(name,age){
  3. this.name = name;
  4. this.age = age;
  5. }
  6. //将sayName()方法添加到Animal的原型对象中
  7. Animal.prototype.sayName = function(){
  8. console.log(this.name);
  9. }
  10.  
  11. //将子类Dog原型对象指针【Dog.prototype】指向Animal对象实例
  12. Dog.prototype = new Animal();
  13. //将Dog构造函数指针指向Dog类型
  14. Dog.prototype.constructor = Dog;
  15. Dog.prototype.sayAge = function(){
  16. console.log(this.age);
  17. }
  18. //创建Dog类实例对象dog
  19. var dog = new Dog('旺财',2,'yellow');
  20. dog.sayName(); //旺财 【可以调用父类方法】
  21. dog.sayAge(); //2 【可以调用自身原型对象中的方法】

2、谨慎定义方法:
子类型覆盖超类型中的某个方法,或者是需要添加超类中不存在的方法,都需要将给原型添加方法的代码放在继承之后【即替换原型的语句之后】

3、原型链相关问题:
a、通过原型来实现继承时,原型实际上会变成另一个类型的实例,原来的实例属性也就变成了现在的原型属性
b、在创建子类型的实例时,不能向超类型的构造函数传递参数【使用后面的伪类继承来解决】。因此实践中很少会单独使用原型链

二、经典继承(伪继承)【对实例属性的继承】
1、在子类构造函数中使用call()或apply()方法改变调用方法对象,在子类构造函数中使用父类构造函数名调用call()或apply()并将
其调用对象改为子类对象
eg:

  1. //创建父类Animal构造函数
  2. function Animal(name,age){
  3. this.name = name;
  4. this.age = age;
  5. }
  6. //将sayName()方法添加到Animal的原型对象中
  7. Animal.prototype.sayName = function(){
  8. console.log(this.name);
  9. }
  10. //创建子类Dog构造函数
  11. function Dog(name,age,color){
  12. //使用call函数指定调用Animal构造函数方法的对象为Dog
  13. Animal.call(this,name,age);
  14. this.color = color;
  15. }
  16. //创建Dog类实例对象dog
  17. var dog = new Dog('旺财',2,'yellow');
  18. console.log(dog.name); //旺财

三、组合继承(原型链继承和组合链继承【伪经典继承】)【常采用的一种继承方式】
1、原理是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数实现对实例属性的继承

eg:

  1. //创建父类Animal构造函数
  2. function Animal(name,age){
  3. this.name = name;
  4. this.age = age;
  5. }
  6. //将sayName()方法添加到Animal的原型对象中
  7. Animal.prototype.sayName = function(){
  8. console.log(this.name);
  9. }
  10. //创建Animal实例对象animal
  11. var animal = new Animal('小白',1);
  12. animal.sayName();
  13. console.log(animal);
  14.  
  15. //原型链继承,一般继承用于父类的方法
  16. //将子类Dog原型对象指针【Dog.prototype】指向Animal对象实例
  17. Dog.prototype = new Animal();
  18. //将Dog构造函数指针指向Dog构造函数
  19. Dog.prototype.constructor = Dog;
  20. Dog.prototype.sayAge = function(){
  21. console.log(this.age);
  22. }
  23.  
  24. //创建子类Dog构造函数
  25. function Dog(name,age,color){
  26. /*this.name = name;
  27. this.age = age;*/
  28. //经典继承(伪继承),一般继承属性
  29. Animal.call(this,name,age);
  30. this.color = color;
  31. }
  32. //创建Dog类实例对象dog
  33. var dog = new Dog('旺财',2,'yellow');
  34. dog.sayName(); //可以调用父类方法
  35. dog.sayAge(); //可以调用自身原型【前面已将Dog原型对象指向了一个new Animal()实例对象】对象中的方法
  36. // animal.sayAge(); //父类创建的对象不可以使用子类原型对象中的方法 animal.sayAge is not a function
  37.  
  38. // Array继承自谁
  39. console.log(Array.prototype.__proto__.constructor); //Object

组合继承中原型继承部分图例分析如下:

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面向对象的基础知识,毕竟胖子不是一口吃成的 ...

随机推荐

  1. 对回溯算法的理解(以数独游戏为例,使用c++实现)

    算法思想: 数独游戏的规则: 每一行都用到1.2.3.4.5.6.7.8.9位置不限: 每一列都用到1.2.3.4.5.6.7.8.9位置不限: 每3×3的格子(共九个这样的格子)都用到1.2.3.4 ...

  2. shell整数与小数比较,小数之间比较的方法【转】

    在shell脚本中,无法对浮点数进行比较,如: max=0.1 min=0.01 if [ "$max" -gt "$min" ] then echo &quo ...

  3. sharding jdbc(sphere) 3.1.0 spring boot配置

    sharding jdbc 2.x系列详解参见https://www.cnblogs.com/zhjh256/p/9221634.html. 最近将sharding jdbc的配置从xml切换到了sp ...

  4. Eclipse安装代码反编译插件Enhanced Class Decompiler

    在开发过程中,如果想查看引入资源的源代码,可以借助eclipse的插件Enhanced Class Decompiler轻松实现,下面我来讲解一下如何安装使用这个插件. 1.打开Eclipse菜单-& ...

  5. sessionid 特性

    本文为博主原创,转载请注明出处: sessionid 是服务器用来辨别客户端浏览器身份的号码,就像人的身份证一样.当用户第一次访问网站时,服务器会分配一个独一无二的 sessionid 给用户浏览器: ...

  6. h5 唤起app或跳转appStore

    //唤起app通过唤端媒介(URL Scheme)   //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用   // URL 的组成:   // [scheme:][// ...

  7. 关于怎么提取m3u8地址

    摘自: https://blog.51cto.com/4373601/1920758 很长时间没有写博客了,这一段时间比较忙,接下来的日子要坚持写博客了,后期抽空会把这一年多的测试心得补上来,写博客其 ...

  8. istio1.0安装

    1. istio1.0安装 创建 istio 目录 [root@centos-110 ~]# mkdir istio [root@centos-110 ~]# cd istio 1.1 获取安装包 链 ...

  9. docker load tar.gz包失败解决方法

    执行docker load -i xxx.tar.gz时候报错 open /var/lib/docker/xxx No such file or directory 这种情况属于容器快照文件缺乏基础镜 ...

  10. SonarQube - 安装与运行SonarQube

    1 - 下载SonarQube SonarQube有多个版本,其中CE(Community Edition)版本免费开源,其余的开发者版本.企业版本和数据中心版本都是收费版本. 官网下载:https: ...