javascript 常见的继承方式

继承是基于"类"的,在没有es6前,一个用来new 的函数就充当了"类"的构造函数,构造函数的prototype上面的属性就等于实例的共享属性。

这篇文章主要记录使用函数实现常见的2种继承方式,理解了这2种继承方式,其他的都不再难理解了

1.原型链继承

复制代码
function Parent(name){
        this.name=name;
}
Parent.prototype.myname=function(){
    console.log("name:"+this.name)
}

function Child(){}
//直接引用
Child.prototype=Parent.prototype;
var child=new Child("小明");
console.log("child",child)
child.myname();//undefined
优点:

直接引用,Parent的prototype属性变化时候也会被变化

弊端:

无法调用"父类"的构造函数,导致无法初始化实例属性

2.构造函数继承

复制代码
function Parent(name){
        this.name=name;
}
 Parent.prototype.myname=function(){
            console.log("name:"+this.name)
}

function Child(...arg){
//直接牵复制
    
   Parent.call(this,...arg)
}
var child=new Child("小明");
console.log("child",child.name)
弊端:

无法继承父类的prototype方法

3.组合模式

结合原型链和构造函数继承的优点

复制代码
function Parent(name){
        this.name=name;
}
 Parent.prototype.myname=function(){
            console.log("name:"+this.name)
}

function Child(...arg){
//直接牵复制
    
   Parent.call(this,...arg)
}
Child.prototype=Parent.prototype;
var child=new Child("小明");
console.log("child",child)
child.myname();

4.es6 的class extends

参考:extends - JavaScript | MDN

相关推荐
小天呐16 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou16 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
车口16 小时前
滚动加载更多内容的通用解决方案
javascript
Yaavi16 小时前
一个基于markdown的高性能博客模板
前端·开源·源码
艾小码17 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
幸福摩天轮17 小时前
npm发布包
前端
前端AK君17 小时前
Gitlab 线上合并冲突的坑
前端
ze_juejin17 小时前
ES6 Module 深入学习
前端
章丸丸17 小时前
Tube - Studio Videos
前端·后端
上位机付工17 小时前
C#与倍福TwinCAT3进行ADS通信
开发语言·c#