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 条评论
登录 后参与评论

相关文章

  • 手写apply、call、bind

    各位宝宝,马上就要过中国年了,已经开启了放假模式了吗?放假了就好好的休息哈,该玩的时候玩、该学的时候学,就对了~

    用户3258338
  • 原型链

    每个实例对象(object)都有一个私有属性(__proto__)指向其构造函数的原型对象(prototype)。该原型对象也有自己的原型对象,层层向上直到一个...

    用户3258338
  • this怎么那么难呢?

    今天是2019年12月17年,星期三。今天北京是个大晴天,我下楼遛弯的时候看到天灰常的蓝。2019年还有不到15天就结束了,各位宝宝年初的目标实现了几个呢?em...

    用户3258338
  • JavaScript 面向对象继承详解

    由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,一般都是基于原型链的方式;

    书童小二
  • es6类和继承的实现原理

    javascript使用的是原型式继承,我们可以通过原型的特性实现类的继承, es6为我们提供了像面向对象继承一样的语法糖。

    ConardLi
  • Vue自定义弹窗组件(二)发包测试

    在node_modules中新建rty-prompt-dialog文件(模拟已发布包,最后会提交发布)

    RtyXmd
  • Flutter Wrap & Chip

    一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

    Flutter笔记
  • 竟然可以用 effect 玩水?Cocos Creator 3D !

    最近逛论坛时,看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦!

    白玉无冰
  • 数据结构于JS也可以成为CP(二)列表

    Hello小伙伴们~上次分享有小伙伴在后台留言说程序就是一个数据结构,怎么说呢,我觉得这是片面的,在生产中,我们往往会尽量避免在前端写业务逻辑,因为有些不安全,...

    萌兔IT
  • React Async Rendering

    React放出Fiber(2017/09/26发布的v16.0.0带上去的)到现在已经快1年了,到目前(2018/06/13发布的v16.4.1)为止,最核心的...

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券