js继承,原型链继承,构造函数继承,组合式继承,原型式继承,寄生式继承,组合寄生式继承,extends继承

继承的理解,复用父类的属性和方法并增加新的属性和方法

目录

1. 原型链继承:

2. 构造函数继承

3. 组合式继承

4. 原型式继承

 5. 寄生式继承

6. 组合寄生式继承

7. extends继承


1. 原型链继承:

父类构造函数的实例赋值给子类原型

 function Parent(age){
            this.age=age
            this.color=['green']
        }

        function Child(){

        }
        Child.prototype=new Parent()
        let child = new Child()
        let child1 = new Child()
        child.color.push('red')
        console.log(child.color,child1.color)//两个输出都是['green', 'red']

2. 构造函数继承

子类通过call调用父类的构造函数,解决原型链继承的两个问题,其一是共享父类引用类型的属性,其二是子类不能向父类传参

但是带来问题是每创建一个实例都会执行一次父类构造函数,相当于把父类的实例属性复制给子类

不能复用,并且不能继承原型链上属性和方法

function Parent(age){
            this.age=age
            this.color=['green']
        }

        function Child(age){
Parent.call(this,age)
        }
        Child.prototype=new Parent()
        let child = new Child()
        let child1 = new Child()
        child.color.push('red')
        console.log(child.color,child1.color)//第一个输出是['green', 'red'],第二个输出是green

3. 组合式继承

结合构造函数继承来 继承实例属性和方法,利用 原型链继承 继承原型链属性和方法

function Parent(age) {
                this.age = age;
                this.color = ['green'];
            }

            function Son(age) {
                Parent.call(this, age); // 借用构造函数继承实例属性
            }

            // 使用 Object.create 优化原型链继承
            Son.prototype = new Parent()
            Son.prototype.constructor = Son;

            // 进一步添加原型方法,以验证继承效果
            Parent.prototype.sayAge = function () {
                console.log(this.age);
            };

            Son.prototype.sayHello = function () {
                console.log('Hello');
            };

            // 测试代码
            let son1 = new Son(10);
            let son2 = new Son(20);

            son1.color.push('red');

            console.log(son1.color); // ['green', 'red']
            console.log(son2.color); // ['green']

            son1.sayAge(); // 10
            son2.sayAge(); // 20

            son1.sayHello(); // Hello
            son2.sayHello(); // Hello

4. 原型式继承

利用es5里的object.create,就是 通过已有对象创建新对象,让新对象原型链指向已有对象

通过已有的对象作为新对象的原型,生成一个新的对象实例

选择性修改新对象属性

他的缺点和原型链继承一样

let person = {

 firstname:'John',
lastname:'foe',
fullname:function(){
return this.firstname+""+this.lastname
}

}

let person1 = Object.create(person)
let person2 = Object.create(person)

//已有对象生成新对象,已有对象作为新对象的原型生成新实例
//person1和person2都是创建出来的实例
person1.firstname='Jane'
console.log(person1.fullname())//jane foe
console.log(person2.fullname())//john foe



//体现缺点的代码:


let person={
            firstname:'li',
            lastname:['green'],
            fullname:function(){
                return this.firstname+""+this.lastname
            }
        }

        let person1 = Object.create(person)
        let person2 = Object.create(person)
        person1.lastname.push('red')
        console.log(person1.fullname(),person2.fullname())//ligreen,red ligreen,red

模拟object.create:

function objectfactory(o){

function F(){}
F.prototype=o
return new F()
}

 5. 寄生式继承

可以添加新的属性和方法, 使用现有对象作为原型创建一个新对象,增强这个对象,添加新属性或方法,返回这个对象

同样难以重用

let person={
            firstname:'li',
            lastname:['green'],
            fullname:function(){
                return this.firstname+""+this.lastname
            }
        }

        function jisheng(o){
          let clone=Object.create(o)
          clone.newfunc=function(){
            console.log('haha')
          }
          return clone
          //千万别忘了返回值
        }
        let child1 = jisheng(person)
        let child2 = jisheng(person)
        console.log(child1.newfunc(),child2.newfunc())

6. 组合寄生式继承

优化了组合继承中需要 父类构造函数被调用两次,一次在创建子类原型,一次在子类构造函数

基于object.create

接受两个参数,子类构造函数和父类构造函数
第一步创建父类原型的副本
然后 返回的p对象设置constructor属性,解决由于重写原型导致默认constructor丢失的问题,最后将新创建的对象赋值给子类型的原型

function inherit(subtype,supertype){

let p = Object.create(supertype)
p.constructor=subtype
subtype.prototype=p

}

原型式继承,寄生继承和寄生组合都使用object.create

7. extends继承

利用es6类和构造函数实现继承

class Parent{
 constructor(age){
this.age=age
}
s(){

 console.log('hello')
 
}

}


class Son extends Parent{

t(){
console.log('you')
}


}

let son1 = new Son(30)
son1.s()
son1.t()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/714519.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

纷享销客常见问题FAQ

运维和安全职责边界 应用专属是部署在客户私有云或者客户公有云租户的IT环境中的,由纷享销客与客户共同维护系统的稳定性。一般来说客户主要负责维护IT基础环境和账号权限的管理而纷享销客则负责在客户环境中进行应用系统的部署、优化和日常运维工作。在安全方面&am…

OrangePi AIpro 机器人仿真与人工智能应用测评

系列文章目录 前言 本篇文章分为2个部分,第一部分主要搭建了机器人的仿真环境(ROS2 MuJoCo等),运行了机械臂及移动机器人相关示例程序;第二部分运行了OrangePi AIpro系统自带的示例程序及昇腾社区官方的示例程序&#…

马克·雷伯特访谈:机器人的未来及波士顿动力的创新之路

引言 机器人技术作为现代科技的前沿领域,始终吸引着大量的关注与研究。波士顿动力公司作为这一领域的领军者,其创始人兼前CEO马克雷伯特(Marc Raibert)近日在主持人莱克斯弗里德曼(Lex Fridman)的播客节目…

机器学习笔记 - 用于3D点云数据分割的Point Net的训练

一、数据集简述 ​在本教程中,我们将学习如何在斯坦福 3D 室内场景数据集 ( S3DIS )上训练 Point Net 进行语义分割。S3DIS 是一个 3D 数据集,包含来自多栋建筑的室内空间点云,占地面积超过 6000 平方米。Point Net使用整个点云,能够执行分类和分割任务。如果你一直在关注 …

【归并排序】| 详解归并排序核心代码之合并两个有序数组 力扣88

🎗️ 主页:小夜时雨 🎗️专栏:动态规划 🎗️如何活着,是我找寻的方向 目录 1. 题目解析2. 代码 1. 题目解析 题目链接: https://leetcode.cn/problems/merge-sorted-array/description/ 本道题是归并排序的…

SNAT和DNAT策略

1、SNAT策略及应用 SNAT应用环境:局域网主机共享单个公网IP地址接入Internet(私有不能在Internet中被正常路由) SNAT原理: 修改数据包的源地址。 SNAT转换前提条件: 局域网各主机已正确设置IP地址、子网掩码、默认…

库的制作 与 使用 (Linux下)

目录 动静态库的制作 前置知识 库的基本构造 问题 分析 要给什么文件 如何更好的让别人使用 库的生成 静态库的生成 makefile参考 动态库的生成 makefile参考(包含动态库和静态库生成) 库的使用 法一:放入系统路径 弊端 法二…

Android开发系列:高性能视图组件Surfaceview

一、Surfaceview概述 在Android应用开发领域,面对视频播放、游戏构建及相机实时预览等高性能需求场景,直接操控图像数据并即时展示于屏幕成为必要条件。传统View组件在此类情境下显现局限性: 性能瓶颈:传统View的绘制任务由UI主…

如何充分利用 Postgres 的内存设置

为了充分利用 PostgreSQL 的内存设置,你需要调整多个参数以优化数据库性能。这些参数包括共享缓冲区(shared_buffers)、工作内存(work_mem)、维护工作内存(maintenance_work_mem)、有效缓存大小…

命令词:引导行动的语言工具

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

《全职猎人》

《全职猎人》 [1-2]是日本漫画家富坚义博的作品。 1999年版改编电视动画由日本动画公司负责动画制作,于1999年10月16日-2001年3月30日在富士电视台播出,该动画的故事至贪婪之岛篇章结束,全92话。 该作在富坚义博老师天马行空的想…

markupsafe,一个神奇的 Python 库!

更多Python学习内容:ipengtao.com 大家好,今天为大家分享一个神奇的 Python 库 - markupsafe。 Github地址:https://github.com/pallets/markupsafe 在 Web 开发和模版渲染中,处理用户输入的数据时,防止 HTML 注入是至…

【Java】Object、Objects、包装类、StringBuilder、StringJoiner

目录 1.API2.Object类3.Objects类4.包装类4.1包装类概述4.2包装类的其他常见操作 5.StringBuilder 可变字符串5.1概述5.2StringBuilder案例 6.StringJoiner 1.API API:应用程序编程接口,全称application programing interface,即Java已经写好…

3分钟带手把手带你了解 FL Studio v21.2.3.4004 中文免费版(附中文设置教程)安装指南

3分钟带手把手带你了解 FL Studio v21.2.3.4004 中文免费版(附中文设置教程)安装指南,大家我是兔八哥爱分享,今天你带来的安装FL Studio 21破解版,纯正简体中文支持! FL Studio 21 简称FL21,全称Fruity Loops Studio&a…

消息队列-Rabbit运行机制

Producer(生产者) 和 Consumer(消费者) Producer(生产者) :生产消息的一方(邮件投递者)Consumer(消费者) :消费消息的一方(邮件收件人) 消息一般由 2 部分组成:消息头(或者说是标签 Label)和 …

keystone认证服务

keystone认证服务 1、keystone管理用户 1-1、简介: 在OpenStack云计算平台中,Keystone是一个核心组件,主要用于提供统一的认证服务。其功能包括: 身份验证:Keystone负责验证用户的身份,通常通过用户名和…

记录一个flink跑kafka connector遇到的问题

【报错】 D:\Java\jdk1.8.0_231\bin\java.exe "-javaagent:D:\Program Files\JetBrains\IntelliJ IDEA 2022.2.3\lib\idea_rt.jar56647:D:\Program Files\JetBrains\IntelliJ IDEA 2022.2.3\bin" -Dfile.encodingUTF-8 -classpath D:\Java\jdk1.8.0_231\jre\lib\cha…

本学期嵌入式期末考试的综合项目,我是这么出题的

时间过得真快,临近期末,又到了老师出卷的时候。作为《嵌入式开发及应用》这门课的主讲教师,今年给学生出的题目有一点点难度,最后的综合项目要求如下所示,各位学生朋友和教师同行可以评论一下难度如何,单片…

DataWhale - 吃瓜教程学习笔记(一)

学习视频:第1章-绪论_哔哩哔哩_bilibili 西瓜书对应章节: 第一章 机器学习三观 What:什么是机器学习? 关键词:“学习算法” Why: 为什么要学机器学习? #### 1. 机器学习理论研究#### 2. 机器学习系统开…

[240615] X-CMD 发布 v0.3.11,增加对 elvish 的支持

目录 X-CMD 发布 v0.3.11,增加对 elvish 的支持,并优化对 nushell,fish,xonsh,tcsh 的支持✨ co 模块 - copilot✨ elv 模块✨ hub X-CMD 发布 v0.3.11,增加对 elvish 的支持,并优化对 nushell&…