1、类的声明
2、生成实例
3、如何实现继承
4、继承的几种方式
1、类的声明有哪些方式
<script type="text/javascript">
  //类的声明
  function Animal() {
    this.name = 'name'
  }
  // es6中的class的声明
  class Animal2 {
    constructor() {
      this.name = name
    }
  }
</script>
2、怎么实例化这个对象
console.log(new Animal(), new Animal2());
3、js有几种继承方式
 
1)
/**
* 借助构造函数实现继承
*/
function Parent1() {
  this.name = 'parent1'
}
function Child1() {
  Parent1.call(this);
  this.type = 'child1';
}
console.log(new Child1());
这样就实现了一个继承了。重点看这个Parent1.call,他改变了js运行的上下文,通过这个调用,改变了Parent1的this指向。也就是父类的所有属性都指向了子类的这个实例
缺点:这个构造函数是有自己的原型链的,也就是有自己的prototype属性,虽然说Parent1的属性指向了Child1这个实例,但是他的prototype并没有被Child1所继承。比如说
function Parent1() {
  this.name = 'parent1'
}
Parent1.prototype.say = function(){}; function Child1() {
  Parent1.call(this);
  this.type = 'child1';
}
console.log(new Child1());
看下,是没有say方法的,说明不会继承父类的原型链,所以说,这种继承只是部分继承,如果父类还有一些方法,就拿不到
2)
/**
* 借助原型链实现即成
*/
function Parent2() {
  this.name = "parent2";
}
function Child2() {
  this.type = "child2"
}
Child2.prototype = new Parent2();
console.log(new Child2());
这个方法弥补第一种方式的不足,我们说任何一个构造函数都有一个prototype这个属性的,这个属性的作用是访问他的实例能访问到原型对象上。
如图,我们看到Child2的__proto__指向的是Parent2的原型对象,prototype是Child2的一个属性,这个属性是个对象,将new Parent2()这个对象赋值给了Child2,那么new一个Child2后,访问Child2.name,在Child2里面没有找到,就会去__proto__找,也就是prototype找,也就是Parent2这个实例找,这样就实现了继承
这个继承方式的缺点:在Parent2里面添加,this.play = [1,2,3];,然后new多个Child2的实例,发现他们都指向了同一个play。当s1改变了play,第二个对象跟着被改变了
比如
/**
* 借助原型链实现即成
*/
function Parent2() {
this.name = "parent2";
this.play = [1,2,3]
}
function Child2() {
this.type = "child2"
}
Child2.prototype = new Parent2(); var s1 = new Child2();
var s2 = new Child2();
s1.play.push(4); console.log(s1.play,s2.play);
3)
/**
* 组合方式(结合构造函数 和 原型链的优点)
*/
function Parent3 () {
  this.name = 'parent3';
}
function Child3 () {
  Parent3.call(this);
  this.type = 'child3'
}
Child3.prototype = new Parent3();

我们再加上方法,看看是否能避免上面的问题呢

/**
* 组合方式(结合构造函数 和 原型链的优点)
*/
function Parent3 () {
this.name = 'parent3';
  this.play = [1,2,3];
}
function Child3 () {
  Parent3.call(this);
  this.type = 'child3'
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play,s4.play);

这个时候发现就不一样了,避免了eg2的缺点,这种组合方式结合了优点,弥补了缺点,这是通常实现继承的方式

缺点:执行了两次父类的原型链,第一次Parent2.call()。第二次 new Parent3()

4)

/**
* 组合继承的优化
*/
function Parent4 () {
  this.name = 'parent4';
  this.play = [1,2,3];
}
function Child4 () {
  Parent4.call(this);
  this.type = 'child4'
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();

这样父类的原型链只执行了一次,但是还剩下一个问题,s5,s6都是父类的实例,没有自己的实例,prototype里面有个contron指明是哪个的实例,而子类的prototype拿的直接是父类的prototype,所以当然拿的是父类的构造函数

/**
* 组合继承的优化2
*/
function Parent5 () {
  this.name = 'parent5';
  this.play = [1,2,3];
}
function Child5 () {
  Parent5.call(this);
  this.type = 'child5'
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;

Object.create方法创建原型对象,Parent5.prototype就是create方法的一个参数,一层一层往上找实现了继承,同时完成了继承,这个就是实现继承的完美方式

js面向对象 继承的更多相关文章

  1. js面向对象继承

    前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...

  2. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  3. js 面向对象 继承

    继承方式有四种: 1.call 2.apply 3.prototype 4.for in call 和 apply 的主要区别: call 传参数只能一个一个的传, apply 因为是用数组,所以可以 ...

  4. JS 面向对象 ~ 继承的7种方式

    前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...

  5. js 面向对象 继承机制

    根据w3cschool上的描述:共有3种继承方法(对象冒充,原型链,混合) 1.对象冒充:构造函数ClassA使用this关键字给所有属性和方法赋值,使ClassA构造函数成为ClassB的方法,调用 ...

  6. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  7. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. js面向对象之继承那点事儿根本就不是事

    继承 说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且 ...

  9. 捋一捋js面向对象的继承问题

    说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...

随机推荐

  1. Ionic3,懒加载(二)

    Ionic懒加载: 普通的ionic项目中,创建好每一个Component页面后,都需要在app.module.ts中进行declaration(声明)后才能进行调用,而这样的声明方式,及在APP加载 ...

  2. Java 继承初探

    Java继承的基础 Java中,被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) 继承一个类,只需要用关键字 extends 把一个类的定义合并到另一个类中就可以了. 例子中 ...

  3. scala 列表的子集判断

    val list1=List.range(0,5) val list2=List.range(0,2) val list3=List(0,6) list1.contains(2) list1.cont ...

  4. linux系统优化基础

    linux系统优化基础 tags: linux 优化 kingle---### 1, 查看centos版本:cat etc/redhat-release 看看centos架构信息:uname -m 查 ...

  5. setContentView和inflate区别

    一般用LayoutInflater做一件事:inflate inflate这个方法总共有四种形式(见下面),目的都是把xml表述的layout转化为View对象.其中有一个比较常用,View infl ...

  6. JQuery脚本-通过禁用按钮防止表单重复提交

    <script type="text/javascript"> /* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...

  7. oracle 报错:ORA-02019 未找到数据库的连接说明

    一.问题描述 我之前连的是别的数据库,现在更换了数据库的连接,然后就报了如下的错误: 我使用的是NHibernate,我找到映射文件后发现我用了dblink,代码中table="COM_OR ...

  8. ASP.NET 使用 AjaxPro 实现前端跟后台交互

    使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句 ...

  9. python数据类型(数字\字符串\列表)

    一.基本数据类型——数字 1.布尔型 bool型只有两个值:True和False 之所以将bool值归类为数字,是因为我们也习惯用1表示True,0表示False. (1)布尔值是False的各种情况 ...

  10. JavaScript入门几个概念

    JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...