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

相关推荐
同学小张1 小时前
【端侧AI 与 C++】1. llama.cpp源码编译与本地运行
开发语言·c++·aigc·llama·agi·ai-native
踢球的打工仔2 小时前
PHP面向对象(7)
android·开发语言·php
J***Q2924 小时前
Vue数据可视化
前端·vue.js·信息可视化
汤姆yu4 小时前
基于python的外卖配送及数据分析系统
开发语言·python·外卖分析
Yue丶越4 小时前
【C语言】字符函数和字符串函数
c语言·开发语言·算法
翔云 OCR API5 小时前
人脸识别API开发者对接代码示例
开发语言·人工智能·python·计算机视觉·ocr
V***u4535 小时前
MS SQL Server partition by 函数实战二 编排考场人员
java·服务器·开发语言
ttod_qzstudio5 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
这是程序猿5 小时前
基于java的ssm框架旅游在线平台
java·开发语言·spring boot·spring·旅游·旅游在线平台
芳草萋萋鹦鹉洲哦5 小时前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui