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

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. JS/Jquery 表单方式提交总结

    1. submit提交 (1). submit 按钮式提交 缺点:在提交前不可修改提交的form表单数据 // 1. html <form method="post" act ...

  2. 有了 CompletableFuture,使得异步编程没有那么难了!

    本文导读: 业务需求场景介绍 技术设计方案思考 Future 设计模式实战 CompletableFuture 模式实战 CompletableFuture 生产建议 CompletableFutur ...

  3. python 关于excel弹窗——请注意,您的文档的部分内容可能包含了文档检查器无法删除的个人信息解决方法

    参考https://www.cnblogs.com/Jacklovely/p/6582732.html 这个问题的原因是由于工作簿包含宏.ActiveX控件等内容, 而Excel被设置为在保存文件时自 ...

  4. 纯 CSS 实现幻灯片播放

    介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...

  5. hover和position共用出现的问题

    hover  鼠标移入的样式 position  定位属性 包含 relative  相对定位   absolute  绝对定位为     fixed 固定定位 hover作用范围 可以实现自己样式的 ...

  6. 五、springboot 简单优雅是实现邮件服务

    前言 spring boot 的项目放下小半个月没有更新了,终于闲下来可以开心的接着写啦. 之前我们配置好mybatis 多数据源的,接下来我们需要做一个邮件服务.比如你注册的时候,需要输入验证码来校 ...

  7. golang的生产者消费者模型示例

    package main import "fmt" func Producer(ch chan int) { for i := 1; i <= 10; i++ { ch &l ...

  8. SQL SERVER 还原误操作导致还原无法停止,处理办法

    昨天遇到运行库不知道单位哪个小伙子,把数据库还原了,导致单位业务全部瘫痪,主数据库一直显示正在还原,真的是不敢动,经过多方寻找,找到此脚本-------------------------数据库还原日 ...

  9. 编译 lame for iOS

    网上找了许多编译lame的教程,结果都是编译失败,多次尝试后发现是编译脚本放错路径了,记录下编译的过程,把编译脚本放到源码文件夹中和修改编译脚本中的目录是关键: 一.首先去Lame官网 http:// ...

  10. 解决Mac安装tesserocr报错问题 Failed building wheel for

    localhost:~ jerry$ Processing /var/www/git/python/tesserocr -bash: Processing: command not found loc ...