js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)

news2024/11/26 0:29:24

1.原型链继承

实现原理:子类的原型指向父类实例。子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承

缺点:

  • 子类创建时不能传参(即没有实现super()的功能);
  • 父类实例的修改会影响子类所有实例
        function Parent(name){
            this.name = "父级的name";
        }

        Parent.prototype.getName = function(){
            console.log("getName:"+this.name);
        }
    
        function Child(){

        }

        // 子类原型指向父类的实例
        Child.prototype = new Parent();
        Child.prototype.constructor = Child;//这句话和原型链继承没有关系,只是根据原型链规则绑定constructor

        // 测试
        var child = new Child();
        console.log(child.name);//父级的name
        child.getName();//getName:父级的name
        // 缺点:不能传参;父类实例改变子类所有实例也改变

2.构造函数继承

实现原理:子类构造函数中执行父类的构造函数,并且为父类构造函数绑定子类的this,父类的构造函数把成员属性和方法都挂到子类的this上去,这样既能避免实例之间共享一个原型实例,又能向父类构造方法传参

缺点:无法继承父类原型上的属性和方法

        // 构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name){
            Parent.call(this, name);
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        // 不能继承父类原型上的方法和属性
        child.getName();//报错,child.getName is not a function

3.组合式继承

实现原理:原型链继承+构造函数继承

缺点:父类构造函数会执行两次(Parent.call()和new Parent()),这不影响子类对父类的继承,但是每次创建子类实例时原型中都会有两份相同的属性和方法

        // 组合式继承:原型链继承+构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + name);
        }

        function Child(name) {
            Parent.call(this, this.name);
        }
        Child.prototype = new Parent();
        Child.prototype.constructor = Child;

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

 

4.寄生式组合继承

实现原理:父类构造函数会执行两次(Parent.call()和new Parent()),那么在原型链继承时就只继承父类的原型,就不会执行两次父类构造函数  Child.prototype = Parent.prototype;

缺点:操作子类原型对象,会影响到父类原型对象,例如给Child.prototype增加一个getName()方法,那么会导致Parent.prototype也增加或被覆盖一个getName()方法

        // 寄生式组合继承:原型链继承(只继承父类原型)+构造函数继承
        function Parent(name) {
            this.name = name;
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

4.1解决寄生式组合继承的缺点(使用Object.create()进行继承) 

如下,对Child.prototype.getName子类中原型上属性或方法进行修改时,父类也被修改

        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("父类getName");
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        Child.prototype.getName = function(){
            console.log("子类getName");
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();
        var parent = new Parent("李四");
        parent.getName();

 

解决:加上Object.create()方法即可

        // Child.prototype = Parent.prototype;
        Child.prototype = Object.create(Parent.prototype);

 

5.ES6的Class继承

实现原理:ES6新增,是ES5中构造函数+原型链继承组合继承,寄生组合式继承的结合

缺点:兼容性不好

6.扩展——对象的几种创建方式

  • 字面量创建
  • var obj = new Object()创建
  • 构造函数创建
  • Object.create()创建
        // 字面量创建
        let obj1 = {
            name: 'lmf1',
            say() {
                console.log("lmf1 say");
            }
        }

        // new Object()创建
        let obj2 = new Object({
            name: 'lmf2',
            say() {
                console.log("lmf2 say");
            }
        });

        // 构造函数创建
        function Person(name) {
            this.name = name;
        }

        let obj3 = new Person("lmf3");
        Person.say = function () {
            console.log("静态方法");
        }
        Person.prototype.say = function () {
            console.log("lmf3 say");
        }

        // Object.create()创建
        let obj4 = Object.create(obj3);
        console.log(obj1, obj2, obj3, obj4);

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

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

相关文章

现货黄金滑点多少是正常的?

在大家熟悉的现货黄金交易软件MT4上,当订单被投放到市场之后,如果之前想要的价格已经不存在,订单就会以最接近其要求的价格执行,如果最终执行价比预期价格要高,则称为正向滑点,反之则为反向滑点。 从理论上…

【Docker】Docker网络及容器间通信详解

目录 背景 默认网络 1、bridge 网络模式 2、host 网络模式 3、none 网络模式 4、container 网络模式 自定义网络 容器间网络通信 IP通信 Docker DNS server Joined容器 前言 本实验通过docker DNS server和joined 容器两种方法实现Docker容器间的通信。Docker容器间…

12个VIM编辑器的高级玩法

vim 是一个很好用的编辑器,应用十分广泛。但关于 vim,总有一些你不知道的事情,我们需要持续不断的学习。 我经常使用 vim,也经常在各大社区、论坛看到 vim 专家用户分享经验,今天我们就总结其中常用的一部分&#xff…

语音识别whisper的介绍、安装、错误记录

介绍 Whisper是OpenAI于2022年9月份开源的通用的语音识别模型。它是在各种音频的大型数据集上训练的模型,也是一个可以执行多语言语音识别、语音翻译和语言识别的多任务模型。 论文链接:https://arxiv.org/abs/2212.04356 github链接:https:…

4d动感影院座椅5d动感影院体验馆大型7D互动影院

今天来讲一下市场上现在受欢迎的5d7d影院,组成部分,落地方案 5D影院的系统组成部分:1、动感座椅、2、投影幕(银幕)和投影机、3、音箱、4、各种的动感特效、5、5d影院眼镜,很简单的组成硬件,就可以组成一套的5d影院设备…

Windows工业三防平板全功能NFC近距离感应一维/二维扫描

Windows系统工业三防平板电脑是一种在智慧工厂仓储物流、MES数采、车载设备、设备检测、自动化控制等领域广泛应用的先进设备。此外,它还在公共服务领域,如高速交通、物流运输、电力检测、公务执法、银行金融、船舶装备、户外勘测、建筑工程、汽车检测、…

细说晶振元件HC49U的功能、应用及性能特点 | 百能云芯

在电子领域,晶振(Crystal Oscillator)是一种重要的元件,用于产生稳定的时钟信号。HC49U是一种常见的晶振型号,具有广泛的应用范围。云芯将带您深入探讨HC49U晶振的功能、应用领域,以及其性能特点&#xff0…

【算法-回溯法】N皇后问题

一、问题背景 N皇后问题是由八皇后问题引申而来的。八皇后是一个以国际象棋为背景的问题,国际象棋8*8. 怎么去放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行、纵行或斜…

每日汇评:黄金的回调可能会在周五上涨3%之后延续

在连续两天的积极势头下,金价正挑战1880美元的关键水平; 美元跟随美债收益率走低,美联储持谨慎态度,情绪乐观; 黄金价格正处于关键时刻,等待美国通胀数据带来新的方向性走势; 金价正在回撤上周五…

C# OpenCvSharp 利用Lab空间把春天的场景改为秋天

效果 项目 代码 using OpenCvSharp; using System; using System.Diagnostics; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace OpenCvSharp_Demo {public partial class Form1 : Form{public Form1(){InitializeComponent();}st…

安捷伦N8974A分析仪

安捷伦N8974A分析仪 N8974A 是 Agilent 的二手分析仪。分析仪是测试工程、医疗、汽车和技术行业电子设备的关键工具。使用分析仪来监控许多不同类型的电子设备的性能。您可能需要分析仪来测量音频频谱、电压和电流、信号和频率等分量 频率范围:10 MHz 至 6.7 GHz 一…

前端代码优化之从系统区分处理的业务场景看如何优化代码中的if判断

最近有个三端统一的技术场景,主要是以前移动端的 hybrid 网页在不考虑 UI 适配的情况下、期望能够直接在 PC 客户端投放。在评估修改面的时候发现了一段可以深思的代码: if (platform iphone) {location.href iphoneClientUrl; } else {location.href…

白皮书 |得帆云低代码aPaaS X OA全新解决方案,解锁数字化协作新境界

进入正题之前,我们先看两个大厂案例: 10年IBM Lotes OA迁移 -来自国内500强发动机全链路制造公司 主要有如下几个痛点: 系统老旧,扩展性一般,无法集成现有的其他业务系统 随着人员的增加,经常性的出现卡…

linux U盘无法使用,提示“Partition table entries are not in disk order“

问题: U盘在Windows上使用正常,在linux下无法使用fdisk -l 命令提示:Partition table entries are not in disk order $ fdisk -l Disk /dev/sdb: 525 MB, 525336576 bytes 17 heads, 59 sectors/track, 1022 cylinders Units cyl…

ArkTS及openHarmony

补充 padding:内边距,也就是盒子边和盒子内部的距离 margin:外边距,也就是盒子和盒子的距离 openHarmony应用开发及UI界面 常用布局 Row 水平线性布局核心代码 子控件会共享同一行,也就是都在同一行内 Preview C…

扩展市场版图,美格智能5G智能模组SRM955集齐全球主流认证

AIoT时代来临,掀起新一轮智能化终端设备的变革,激发应用领域的新需求。AI等新兴技术应用,成为拉动智能终端产品变革和市场变迁的主要力量。智能模组是AIoT时代中的核心元器件,是实现万物智联的关键。 美格智能作为智能模组的创领…

SpringBoot学习日记

Spring程序与SpringBoot程序对比 SpringBoot程序优点 起步依赖(简化依赖配置)自动装配(简化常用工程相关配置)辅助功能(内置服务器,......) 内嵌Tomcat REST风格 REST简介 REST,表…

2023年主题教育专题组织生活会对照检查材料六个方面发言材料

组织生活会发言材料,很多人还没写完,可能写着写着就不知道怎么继续了,其实写这类材料需要有一个好的写作框架,结合我们的实际情况来写。 只有那些勇敢面对困难的人,才能找到成功的道路。生活并非总是一帆风顺&#xff…

ant design pro v6如何引入第三方js?如腾讯地图等!

由于ant pro隐藏.html,需要通过他们约定的方式引入即可。 1.配置config文件 /config/config.tsheadScripts: [// 解决首次加载时白屏的问题{ src: /scripts/loading.js, async: true },{ src: "https://map.qq.com/api/gljs?v1.exp&keyOB4BZ-D4W3U-B7VV…