前端 JS面向对象 继承

news2024/11/14 5:05:01

目录

一、ES5通过prototype来继承

二、ES6 class实现


一、ES5通过prototype来继承

    const Person={
        eyes:2,
        head:1
    }
    function Woman(){

    }
    Woman.prototype=Person
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=Person
    const man=new Man()
    console.log(man)

打印:

不过,上面的写法还是有点问题,并没有制定原来的构造函数是谁,规范书写如下:

    const Person={
        eyes:2,
        head:1
    }
    function Woman(){

    }
    Woman.prototype={
        ...Person,
        //指回原来的构造函数
        constructor:Woman
    }
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=Person
    //指回原来的构造函数W
    Man.prototype.constructor=Man
    const man=new Man()
    console.log(man)

打印:

这里我不难看出,第一种写法也存在一种问题,两个类型继承同一各方法时,修改的原型对象是同一各个导致一些修改上的问题。

由此演进出不会影响修改的更优方案:通过构造函数来实现

    function Person(){
        this.eyes=2
        this.head=1
    }
    function Woman(){

    }
    Woman.prototype=new Person()
    Woman.prototype.constructor=Woman
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=new Person()
    //指回原来的构造函数W
    Man.prototype.constructor=Man
    const man=new Man()
    console.log(man)

打印:效果一样

二、ES6 class实现

直接通过class来标注,并且构造函数同一为constructor(), 允许静态方法,添加extends关键字进行继承。

    class Person{
        //构造函数
        constructor() {
            this.eyes=2
            this.head=1
        }

        eat(){
            console.log("吃东西")
        }

        static isPerson(){
            console.log("是个人")
        }
    }

    const p=new Person()
    p.eat()
    Person.isPerson()

    class Woman extends Person{
        constructor() {
            super()
            console.log("lady")
        }

    }
    const lady=new Woman()
    lady.eat()

打印:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

三菱FX5UPLC以太网Socket通信功能Passive开放的程序示例

Passive开放的通信流程如下所示。 参数设置 示例程序中使用的参数设置如下所示。 [CPU模块】 导航窗口↔[参数]↔[模块型号]↔[模块参数]-[以太网端口]-[基本设置]-[对象设备连接配置设置]↔[详细设置]→[以太网配置(内置以太网端口)]画面 【以太网模块】 [导航]中「参数]→[模…

UniApp 应用、页面与组件的生命周期详解

UniApp 应用、页面与组件的生命周期详解 在uni-app中包含了 应用生命周期、页面生命周期、和组件生命周期&#xff08; Vue.js的&#xff09;函数。 应用生命周期 应用生命周期仅可在App.vue中监听&#xff0c;在其它页面监听无效。 <script>export default {onLaunc…

Optimism掀起发链热潮,还有哪些发链 平台值得关注?

继电子巨头索尼在OP上发布L2 Soneium之后&#xff0c;10月29日&#xff0c;再质押协议巨头Swell宣布迁移至Optimism超级链&#xff0c;通过OP Stack构建Rollup加入OP生态系统。据DeFilama数据显示&#xff0c;Swell的TVL最高曾超过30亿美元&#xff0c;目前为13.4亿美元&#x…

0. 0:《跟着小王学Python·新手》

《跟着小王学Python新手》系列 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握Python的核心概念。通过开发游戏、构…

如何优化Kafka消费者的性能

要优化 Kafka 消费者性能&#xff0c;你可以考虑以下策略&#xff1a; 并行消费&#xff1a;通过增加消费者组中的消费者数量来并行处理更多的消息&#xff0c;从而提升消费速度。 批量消费&#xff1a;配置 fetch.min.bytes 和 fetch.max.wait.ms 参数来控制批量消费的大小和…

Golang | Leetcode Golang题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; func nextGreaterElement(n int) int {x, cnt : n, 1for ; x > 10 && x/10%10 > x%10; x / 10 {cnt}x / 10if x 0 {return -1}targetDigit : x % 10x2, cnt2 : n, 0for ; x2%10 < targetDigit; x2 / 10 {cnt2}x x2%10 -…

AscendC从入门到精通系列(一)初步感知AscendC

1 什么是AscendC Ascend C是CANN针对算子开发场景推出的编程语言&#xff0c;原生支持C和C标准规范&#xff0c;兼具开发效率和运行性能。基于Ascend C编写的算子程序&#xff0c;通过编译器编译和运行时调度&#xff0c;运行在昇腾AI处理器上。使用Ascend C&#xff0c;开发者…

unity基础,点乘叉乘。

简单记录下点乘叉乘&#xff0c;要不每次用完就忘&#xff0c;忘了又查。 using System.Collections; using System.Collections.Generic; using UnityEngine;public class TestCrossDot : MonoBehaviour {/// <summary>/// 原点/// </summary>public Transform t…

AI写作(二)NLP:开启自然语言处理的奇妙之旅(2/10)

一、NLP 的基本概念与任务 &#xff08;一&#xff09;自然语言处理的研究对象 自然语言处理&#xff08;NLP&#xff09;处于计算机科学、人工智能和语言学的交叉领域。它所聚焦的人类社会语言信息是无比丰富和复杂的&#xff0c;包括口语、书面语等各种形式。这种语言信息在…

Windows 局域网IP扫描工具:IPScaner 轻量免安装

IPScaner是一款258KB的工具&#xff0c;具备快捷修改IP、批量扫描、地址计算等功能&#xff0c;自动识别本机IP网段&#xff0c;快速查看IP使用情况&#xff0c;适用于监控维护、企业IT运维等场 软件功能介绍&#xff1a; 1&#xff09;快捷修改本地IP、IP批量扫描、IP地址计算…

【3D Slicer】的小白入门使用指南二

3D Slicer中DICOM数据加载和三维可视化 任务 数据集下载和解压缩 加载和查看DICOM数据 1)将第一个数据集文件夹,整个往3Dslicer左侧拖动即可 得到 2)选中右侧patient 1就可显示出该患者的基本信息 (第二行蓝色是研究信息;第三行蓝色是序列信息)

在移动硬盘中创建vue项目 报错

如图所示&#xff0c;在U盘或者移动硬盘当中 创建vue项目&#xff0c;报错 如图所示&#xff0c; 这个问题与 Git 的安全设置有关&#xff0c;尤其是在跨用户或跨文件系统的环境下&#xff08;例如&#xff0c;移动硬盘或不同账户&#xff09;。Git 检测到当前项目的文件夹 的…

qt QDockWidget详解

1、概述 QDockWidget是Qt框架中的一个窗口部件&#xff0c;它提供了一个可停靠的面板&#xff0c;该面板可用于显示和编辑各种内容。QDockWidget可以在主窗口中创建并停靠在不同的位置&#xff0c;如左侧、右侧、顶部或底部。此外&#xff0c;QDockWidget还具备浮动功能&#…

Android 开发指南:初学者入门

Android 是全球最受欢迎的移动操作系统之一&#xff0c;为开发者提供了丰富的工具和资源来创建各种类型的应用程序。本文将为你提供一个全面的入门指南&#xff0c;帮助你从零开始学习 Android 开发。 目录 1. 了解 Android 平台[1]2. 设置开发环境[2]3. 学习基础知识[3]4. 创…

每日小练:Day2

1.乒乓球筐 题目链接&#xff1a;乒乓球筐__牛客网 题目描述&#xff1a; 这道题主要考察B盒是不是A盒的子集&#xff0c;我们可以通过哈希表来做 单哈希表 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public stat…

Java反序列化之CommonsCollections4、5、7 链的学习

一、前言 前面的文章中&#xff0c;基本把CC链的关键部分学习的差不多了&#xff0c;利用过程也是比较清晰了&#xff0c;接下来把 CommonsCollections 4、5、7 利用链学习下&#xff0c;扩展下思路 二、CommonsCollections4 利用链的学习 运行环境&#xff1a; java 1.8.0_71…

A030-基于Spring boot的公司资产网站设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

qt QVideoWidget详解

1. 概述 QVideoWidget是Qt框架中用于视频播放的控件。它继承自QWidget&#xff0c;并提供了与QMediaPlayer等多媒体播放类集成的功能。QVideoWidget可以嵌入到Qt应用程序的用户界面中&#xff0c;用于显示视频内容。它支持多种视频格式&#xff0c;并提供了基本的视频播放控制…

PG逻辑复制的REPLICA IDENTITY几种设置

前两天同事问了一个PG的错误&#xff0c;创建一张普通表&#xff0c;insert插入正常&#xff0c;但是执行update和delete时&#xff0c;提示这个错误&#xff0c; 代码语言&#xff1a;javascript 复制 SQL 错误 [55000]: ERROR: cannot delete from table "temp_tb&qu…

Flutter 小技巧之 Shader 实现酷炫的粒子动画

在之前的《不一样的思路实现炫酷 3D 翻页折叠动画》我们其实介绍过&#xff1a;如何使用 Shader 去实现一个 3D 的翻页效果&#xff0c;具体就是使用 Flutter 在 3.7 开始提供 Fragment Shader API &#xff0c;因为每个像素都会过 Fragment Shader &#xff0c;所以我们可以通…