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

相关推荐
90后的晨仔13 分钟前
uni-app Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
mqiqe14 分钟前
AgentScope Java 2.0 集成 Chat Completions Web:一行依赖让你的 Agent 变身 OpenAI 兼容服务
java·开发语言·前端
程序员小八77714 分钟前
后端开发初学TypeScript
前端·javascript·typescript
90后的晨仔17 分钟前
Puppeteer 与 Playwright 深度实战指南:从零到精通,全面提升开发效率
前端
qq_5896660524 分钟前
Java微服务介绍及应用
java·开发语言·微服务
sunphp开发者24 分钟前
阿里云CDN加速配置问题
前端·阿里云·云计算
小小数媒成员30 分钟前
存储器层级结构
java·服务器·前端
uoKent35 分钟前
c++中的extern关键字
开发语言·c++
牧杉-惊蛰39 分钟前
将数组对象根据自定义排列
java·开发语言·算法
君顾11 小时前
家校托管互通:从需求分析到系统架构的落地实践
java·开发语言·托管