他山之石,可以攻玉,本人一直以谦虚的态度学他人之所长,补自己之所短,望各位老师指正! 拜谢

js几种继承方式,学习中的总结:

所谓的继承是为了继承共有的属性,减少不必要代码的书写

第一种:借用构造函数继承 :可以继承实例属性。但是原型中的方法无法继承

        // - 设置需要被继承的构造函数Animal
function Animal(name,age){
this.name = name;
this.age = age;
} Animal.prototype.eat = function(){
console.log("吃各种吃的");
}; //再设置一个猫咪构造函数 //思考:已经存在的构造函数Animal中具有了一些属性和方法,这些属性与方法时Cat构造函数需要的
// 没有必要再书写一遍了,可以使用继承的方式获取
function Cat(name,age){
//通过call的方式,修改Animal中的this指向为当前Cat的this,并设置参数
Animal.call(this,name,age);
} var c1 = new Cat("jack",);
console.log(c1);

第二种:原型继承

1 好处:可以继承原型中的方法
2 缺点:①实例属性虽然有,但是无法传参(跟没有一样)
      ②要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行 否则会被覆盖
      ③无法实现多继承
      ④需要重新设置被覆盖的constructor属性 让constructor重新指向Cat
    function Animal(name,age){
this.name = name;
this.age = age;
}
Animal.prototype.eat = function(){
console.log("吃各种吃的");
}; function Cat(color){
this.color = color;
} //继承的核心代码:
Cat.prototype = new Animal("jack",);///这点是重要点:必须写在前面 ,否则会覆盖子类的方法 //设置被覆盖的constructor属性 让constructor重新指向Cat
Cat.prototype.constructor = Cat;
Cat.prototype.shangShu = function(){
console.log("猫咪可以爬树");
};      
      var c1=new Cat();
      console.log(c1);
      console.log(c1.name)//jack
      console.log(c1.age)//18
  通过原型链的方法可以查找到属性,但是无法传参
原型链:查找规则,优先查找自身,如果没有则查找__proto__中是否存在; 原型链是用来描述实例对象与原型对象之间关系的一种方式。

第三种:组合继承

 使用前面两种继承方式时发现各有优缺点,所以将两种方式结合即可
 这种结合使用的方式称为组合继承,组合继承是最常用的一种继承方式。   
     function Animal(name,age){
        this.name = name;
this.age = age;
}
Animal.prototype.eat = function(){
console.log("吃各种吃的");
}; function Cat(name,age,color){
//使用借用构造函数的方式继承:
Animal.call(this,name,age);
this.color = color;
} //原型继承的核心代码:
//使用组合继承方式后,在构造函数体中就设置了实例属性,此处不需要传参
Cat.prototype = new Animal(); //设置被覆盖的constructor属性
Cat.prototype.constructor = Cat;
Cat.prototype.shangShu = function(){
console.log("猫咪可以爬树");
}; var c1 = new Cat("rose",,"red");
console.log(c1);
在这总结一下原型链: 原型链:查找规则,优先查找自身,如果没有则查找__proto__中是否存在; 原型链是用来描述实例对象与原型对象之间关系的一种方式

①Animal构造函数在设置时没用继承自其它的构造函数
②Animal的原型对象也是一个对象
③对象都是通过Object这个构造函数创建的
④Animal.prototype这个对象__proto__就应该指向Object.prototype
⑤通过观察我们发现确实含有一个属性constructor,并且值为Object构造函数
⑥Object.prototype中没有__proto__属性了,说明这个对象是原型对象的终点。若果使用一个对象的属性时,在整个原型对象中均没找到,值即为undefined Object。prototype.__proto__打印为null
扩展:在作用域中,都没有找到会报错

第四种:对组合继承的优化方式

个人认为:

虽然可以省去不需要继承的实例属性
这种方式的确会比组合继承的方式性能更好,但是略麻烦(了解即可)
    function Animal(name,age){
this.name = name;
this.age = age;
}
Animal.prototype.eat = function(){
console.log("吃各种吃的");
}; function Cat(name,age,color){
//使用借用构造函数的方式继承:
Animal.call(this,name,age);
this.color = color;
} //原型继承方式中希望获取到Animal的原型方法
//Cat.prototype = new Animal(); //可以省去不需要继承的实例属性
//这种方式的确会比组合继承的方式性能更好,但是略麻烦(了解即可)
function Fun (){}
Fun.prototype = Animal.prototype;
Cat.prototype = new Fun(); Cat.prototype.constructor = Cat;
Cat.prototype.shangShu = function(){
console.log("猫咪可以爬树");
}; var c1 = new Cat("rose",,"red");
console.log(c1);

第五种:拷贝继承

使用继承的原型中的方法时,查找的次数会降低
效率较低,内存占用高(因为要拷贝父类的属性)
    function Animal(name,age){
this.name = name;
this.age = age;
}
Animal.prototype.eat = function(){
console.log("吃各种吃的");
};
      
     
     function Cat(name,age){
          Animal.call(this,name,age)
        }
     //核心代码
      for(var k in Animal.prototype){
          Cat.prototype[k] = Animal.prototype[k];//添加属性
        }
        Cat.prototype.constructor = Cat;
        Cat.prototype.shangShu = function(){
          console.log("猫咪可以爬树");
        };
        var c1 = new Cat("rose",20,"red");
        console.log(c1);
 

补充一下:对象之间的继承:

  var obj={
name:'jack',
age:,
gender:'男',
sayHai:function(){
console.log(‘我是人)
}
}
问题:obj2想要继承obj的属性
)拷贝继承:
var obj2={};
for(var k in obj){
obj2[k]=obj[k];
}
)原型继承:
function Fun(){};
Fun.prototype=obj;
var obj2=new Fun();
console.log(obj2);

js实现的几种继承方式的更多相关文章

  1. js常见的几种继承方式

    1.原型链继承 “父类”的实例作为子类的prototype SubType.prototype = new SuperType() 2.组合继承(原型链+构造函数) function SubType( ...

  2. js中的几种继承方法

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 继承:子承父业:一个原本没有某些方法或属性的对象,统一写方法,拿到了另外一个对象的属性和方法 下面是js中的几种继承方式 1.改变this ...

  3. js的三种继承方式及其优缺点

    [转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...

  4. 重新理解JS的6种继承方式

    写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...

  5. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  6. js的5种继承方式——前端面试

    js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 function P ...

  7. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...

  8. JavaScript_几种继承方式(2017-07-04)

    原型链继承 核心: 将父类的实例作为子类的原型 //父类 function SuperType() {   this.property = true; } SuperType.prototype.ge ...

  9. 都0202年了,你还不知道javascript有几种继承方式?

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

随机推荐

  1. android系统中对ffmpeg封装最好的免费SDK

    android系统中对ffmpeg封装最好的免费SDK; 无论个人还是公司,都免费商用, 欢迎下载. https://github.com/LanSoSdk/LanSoEditor_common 可能 ...

  2. 在ZYBO板卡上实现PL-PS交互(通过AXI的方式)

    前情提要:参考的是下面所说的原网页,只是原作者用的是vivado 2014.4,我用vivado 2018.2跑的,图是新的,内容大多“换汤不换药”,但是我在做的时候存在一些问题,我记录了下来并将解决 ...

  3. 588 div2 C. Anadi and Domino

    C. Anadi and Domino 题目链接:https://codeforces.com/contest/1230/problem/C Anadi has a set of dominoes. ...

  4. 软件开发工具(第12章: CVS的安装及使用)

    一.CVS介绍 并发版本系统(Concurrent Versions System——CVS)是一个常用 的代码版本控制系统. 使用CVS可以对代码进行集中管理,记录代码所有的更改历史,提供 协作开发 ...

  5. 纯C语言写的按键驱动,将按键逻辑与按键处理事件分离~

    button drive 杰杰自己写的一个按键驱动,支持单双击.连按.长按:采用回调处理按键事件(自定义消抖时间),使用只需3步,创建按键,按键事件与回调处理函数链接映射,周期检查按键. 源码地址:h ...

  6. Mac上Charles抓包iOS的https请求

    介绍一款抓包工具,一般我在windows下使用Fiddler抓包,Fiddler使用教程这里就不讲了,重点介绍使用mac时的抓包工具----Charles. 进入官网 :Charles官网地址官网下载 ...

  7. java-i++的原理探究

    先看例子: package com.test; publick class Auto{ public static void main(String[] args){ Auto inc=new Aut ...

  8. [Abp vNext 源码分析] - 11. 用户的自定义参数与配置

    一.简要说明 文章信息: 基于的 ABP vNext 版本:1.0.0 创作日期:2019 年 10 月 23 日晚 更新日期:暂无 ABP vNext 针对用户可编辑的配置,提供了单独的 Volo. ...

  9. 【OUC2019写作】学术论文写作第九小组第一次博客作业

    个人简介 潘旻琦:我是潘旻琦:我的爱好是游泳:羊肉泡馍是海大食堂中我最喜欢的一道菜(清真食堂):一句想说的话是:“追随本心,坚持不懈”. 郭念帆:我是郭念帆:我的爱好是足球:海大食堂中最喜欢的一道菜偏 ...

  10. 5. Sersync实时同步

    rsync+Sersync数据的实时同步 sersync介绍 1.什么是实时同步 监控一个目录的变化, 当该目录触发事件(创建\删除\修改) 就执行动作, 这个动作可以是 rsync同步 ,也可以是其 ...