JS实现继承的方式

概述

1. JS实现继承的方式

  • 构造函数继承
  • 原型继承
  • 组合(构造函数+原型)继承
  • Class继承

构造函数继承

构造函数继承的关键:在Child构造函数中执行Parent.call(this)。

function Patent(name){
  this.name = name;
  this.hobby = [];
  this.speak = function(){
    console.log("Parent speak")
  } 
}
//  缺点:new多个Child时,
// Parent构造函数中的方法会在每个Child中拷贝一份
// 浪费内存
Parent.prototype.say = function(){
  console.log("Parent say")
} 
// 缺点:Parent原型对象上的方法不会被Child继承
function Child(name, type){
  Parent.call(this, name);
  this.type = type;
}

原型继承

原型继承的关键:设置Child原型指向Parent,Child.prototype = new Parent();

function Parent(name){
  this.name = name;
  this.hobby = []; 
  // 缺点:Parent的引用属性会被所有Child实例共享,相互干扰
}
Parent.prototype.say = function(){
  console.log("Parent say");
}
function Child(type){
  this.type = type;
}
Child.prototype = new Parent()  
// 原型继承的关键

组合继承

组合继承的关键:

1.属性使用构造函数继承 - 避免了原型继承中Parent引用属性被所有Child实例共享的缺陷。

2.方法使用过原型继承 - 避免了构造函数继承中方法重复拷贝、浪费内存的缺陷

function Parent(){
  this.name = name;
  this.hobby = []; 
  //  属性放在构造函数中
}
Parent.prototype.say = function(){
  //  方法放在原型中
  console.log("Parent say")
}

function Child(name, type){
  Parent.call(this, name);
  this.type = type;
}
Child.prototype = Object.creat(Parent.prototype);
// Child继承Parent方法(原型继承)
Child.prototype.speak = function(){
  console.log("Child speak")
}
Child.prototype.constructor = Child;
// 修复Child的constructor指向,
// 否则Child的constructor会指向Parent

补充:

1. obj2 = Object.create(obj1);

Object.create()方法创建一个新对象,使用现有对象(obj1)来提供新创建对象(obj2)的__proto__.

2. 对于组合继承代码中的Child.Prototype = Object.create(Parent.prototype),还有两种常见的类似写法是Child.prototype = Parent.prototype 和 Child.prototype = new Parent(),但有缺陷需要避免:

  • Child.prototype = Parent.prototype 修改Child.prototype就等于修改了Parent.prototype, 会干扰所有Parent实例
  • Child.prototype = new Parent(),Parent构造函数重复调用两次(另一处调用是Child构造函数中的Parent.call(this)),降低效率,且如果Parent构造函数有副作用,重复调用可能造成不良后果。

Class继承

class继承用extends实现继承

class Person{
  constructor(skin,language){
    this.skin = skin;
    this.language = languagge;
  }
  say(){
    console.log("I am a Person")
  }
}

1.子类没有constructor时

class American extend Person{
  aboutMe(){
    console.log(this.skin +' '+ this.language)
  }
}

子类没有定义constructor,则默认添加一个,并在constructor中调用super函数。调用super函数是为了在子类中获得父类的this,调用之后this指向子类。

2.子类有constructor

class Chinese extend Person{
  constructor(skin, language, position){
    super(skin, language);
    this.position = position;    
  }
  aboutMe(){
    console.log(this.x+ ' ' + this.y+' ' + this.position);
  }
}

子类必须在constructor方法中调用super方法,否则new实例时会报错。因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super函数,子类就得不到this对象。super()作为父类的构造函数,只能出现在子类的constructor()中。

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://segmentfault.com/a/1190000016525951


当我们不再需要外在的认可来证明自己时

才能获得真正的自由

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js实现继承的几种方式

    js作为一个面向对象的弱类型语言,继承也是其非常强大的特性之一。一般情况下会出现下面的6中继承方式。

    OECOM
  • 第201天:js---实现继承的5种方式

    半指温柔乐
  • 深入浅出js实现继承的7种方式

      有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ i...

    TimothyJia
  • Js继承的实现方式

    继承是面向对象软件技术当中的一个概念,与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。

    WindrunnerMax
  • JS中继承方式2

    贵哥的编程之路
  • JavaScript实现继承的6种方式

      许多面向对象语言都支持两种继承的方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。在 JavaScript 中由于函数没有签名也...

    Leophen
  • JS原型继承和类式继承

    类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继...

    庞小明
  • js各种继承方式汇总

    js中的各种继承实现汇总 首先定义一个父类: function Animal(name) { this.name = name || '动物' this...

    用户1141560
  • JS 继承的多种方法

    学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口继承和实现继承,接口继承只继承方法签名,而实现继承则继承实...

    grain先森
  • day018: JS如何实现继承?继承一定是好的设计吗?​

    这样写的时候子类虽然能够拿到父类的属性值,但是问题是父类原型对象中一旦存在方法那么子类无法继承。那么引出下面的方法。

    用户3806669
  • JS入门难点解析12-继承的实现方式与优缺点

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • JS 原生方法原理探究(四):如何实现继承的几种方式?

    这是JS 原生方法原理探究系列的第四篇文章。本文会介绍如何实现 JS 中常见的几种继承方式,同时简要它们的优缺点。

    Chor
  • JS继承核心(1)第一种方式

    贵哥的编程之路
  • javascript 面向对象(实现继承的几种方式)

     1、原型链继承 核心: 将父类的实例作为子类的原型 缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function...

    柴小智
  • JavaScript继承的实现方式:原型语言对象继承对象原理剖析

    对象的继承:A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。

    周陆军
  • JavaScript实现继承

    本文不准备深入细节,主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结,毕竟好记性不如烂笔头。文末会附带一张神图,搞清楚这张图,原型...

    leocoder
  • Lua实现继承

    原文链接:https://www.jianshu.com/p/fefe11d4544e

    bering
  • JavaScript实现继承

    众所周知,JavaScript 这门语言在 ES6 出来之前是没有类(class)这一概念的,所以 JavaScript 中的类都是通过原型链来实现的。同样,使...

    疯狂的技术宅
  • JavaScript实现继承

    使用class继承非常简单。子类使用extends关键字表明继承于哪个类,并在子类中调用super(),这相当于使用call()改变this的指向。

    不作声

扫码关注云+社区

领取腾讯云代金券