js对象的继承

2023-11-13

学无止境,望君把握时间

首先我们需要定义一个类:
// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

原型链继承:

核心:将父类的实例作为子类的原型。
function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
特点:
1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例
2.父类新增原型方法/原型属性,子类都能访问到
3.简单,易于实现

缺点:
1.要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中
2.无法实现多继承
3.创建子类实例时,无法向父类构造函数传参

2.构造继承:

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点:
1.可以实现多继承(call多个父类)
2.创建子类实例时,可以向父类传递参数。
3.解决了1中,子类实例共享父类引用属性的问题

缺点:
1.只能继承子类的实例和属性,不能继承原型属性和方法
2.无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
3.实例并不是父类的实例,只是子类的实例

3实例继承:

核心:为父类实例添加新特性,作为子类实例返回
function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
特点:
1.不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点:
1.实例是父类的实例,不是子类的实例
2.不支持多继承

拷贝继承:

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点:
支持多继承

缺点:
1.效率较低,内存占用高(因为要拷贝父类的属性)
2.无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

组合继承:

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 感谢 @学无止境c 的提醒,组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
特点:
1.弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
2.既是子类的实例,也是父类的实例
3.不存在引用属性共享问题
4.可传参
5.函数可复用

缺点:
1.调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

寄生组合继承:

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
特点:
1.堪称完美

缺点:
1.实现较为复杂

学无止境,望君把握时间

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js对象的继承 的相关文章

  • python14异常处理

    1 错误 有的错误是程序编写有问题造成的 比如本来应该输出整数结果输出了字符 串 这种错误我们通常称之为 bug bug 是必须修复的 有的错误是用户输入造成的 比如让用户输入 email 地址 结果得到一个空字 符串 这种错误可以通过检查
  • 克鲁斯卡尔算法(kruskal)

    我自己感觉 克鲁斯卡尔算法比普利姆算法更好理解 它就两个要点 排序和判断是否成环 排序 我们把两两相邻的边根据边的权值 从小到大依次排序 这个十大排序算法可以自己选一个去实现下 刚好还可以回忆下以前的算法 下面我们使用冒泡来实现边的排序 是
  • CentOS8搭建Web服务器笔记1 Nginx+Php8基础环境

    CentOS8搭建Web服务器笔记1 Nginx Php8基础环境 1 Nginx 1 1 Yum工具安装 1 1 1 查询Yum默认安装源版本 1 1 2 配置最新安装源 1 1 3 yum安装nginx 1 1 4 启动nginx服务
  • 4.4 Go语言中的单元测试

    基本概念 上一节提到 代码完成的标准之一还包含了单元测试 这部分也是很多开发流程中不规范的地方 写过单元测试的开发人员应该理解 单元测试最核心的价值是为了证明 为什么我写的代码是正确的 也就是从逻辑角度帮你检查你的代码 但是另外一方面 如果
  • 谈谈古典的《拆掉思维里的墙》

    写在前面 这是考完高考 拿到深圳大学录取通知书之后 年级发布的第一个作业 就是看一篇年级推荐的书写一篇读后感 不过写完回校之后年级居然把这事给忘记了 写了文章没人看不是很好 于是就放上C站呆着 留点痕迹 也许算正文 距离上一次写读后感已经不
  • 决策树(Decision Tree)

    文章目录 1 决策树简介 2 决策树原理 2 1 引例 2 2 生成算法 2 2 1 ID3 信息增益 2 2 2 C4 5 信息增益率 2 2 3 CART 基尼指数 2 3 三种算法的对比 2 4 剪枝处理 2 4 1 预剪枝 2 4
  • 怎么让VSCode标签栏只展示一个窗口

    怎么让VSCode标签栏只展示一个窗口 问题 解决方法 参考 问题 我们希望VSCode窗口的标签栏是这么分开显示标签的 但是 偶尔重启该应用 会突然发现变成了只显示一个标签 不会再分开展示了 变成了一个文件名加路径了 这种情况下原来的标签
  • Oracle 表空间、段、区、块概述

    文章目录 图示 表空间 tablespace 数据段 segment 区 extent 数据块 block 图示 修改中 请稍等 段 存在于 表空间 中 段 是 区 的集合 区 是 数据块 的集合 数据块 会映射到 磁盘块 以实体 关系图的
  • Request_获取请求参数通用方式介绍

    1 获取请求参数通用方式 不论get还是post请求方式都可以使用下列方法来获取请求参数 1 String getParameter String name 根据参数名称获取参数值 username zs password 123 2 St
  • 除了Midjourney和Stable Diffusion,还有哪些AI模型可以使用

    Midjourney是一款广受设计师和艺术家欢迎的人工智能图像生成器 然而 最近它停止提供免费试用 让许多用户开始寻找替代品 在本文中 我们为您编制了一个2023年可尝试的十大Midjourney替代品列表 我们包括了免费和付费选项 让您可
  • [台服公主链接]修改ROOT检测

    类路径 Project smali jp co cygames androidroot CheckApp smali 原始代码 method public static isRootUser Z locals 7 prologue cons
  • CSS Flex相关属性(自我总结)

    把容器做成flex弹性盒 display flex 容器属性 1 flex direction 项目排列方向 主轴方向 row 左对齐 横向排列 默认 row reverse 右对齐 反转横向排列 column 纵向排列 column re
  • JAVA 计算日期属于当月第几周(日期周计算)

    JAVA 计算日期属于当月第几周 日期周计算 本文周计算时间方式为 当月第一个周一为第一周 计算 获取月第一个周一 从当月第一天开始找 第一个周一时间与 sourceTime 传入时间对比 sourceTime在第一个周一时间之前 表示属于
  • Twitter开发者账号及开发者APPs的创建 2019.05

    转自 https towardsdatascience com access data from twitter api using r and or python b8ac342d3efe Access Data from Twitter
  • screen / nohup 实现后台运行程序

    通常我们在运行程序时 会通过终端登录服务器 然后使用shell命令运行程序 这种方式对于运行时长较短的程序没问题 但是对于深度学习中训练网络等耗时较长的程序来说很容易出问题 例如一旦机器死机 断网 不小心关闭终端等种种情况都会导致程序终止运
  • JSP中include指令的功能简介说明

    转自 JSP中include指令起什么用呢 下文讲述JSP中include指令的功能简介说明 如下所示 JSP中include指令的功能说明 用于将不同的文件插入到当前JSP页面的指定位置 JSP指令的语法 相关说明 include指令 用
  • 现代大学英语精读第二版(第四册)学习笔记(原文及全文翻译)——1A - Thinking as a Hobby(把思考作为爱好)

    Unit 1A Thinking as a Hobby Thinking as a Hobby William Golding While I was still a boy I came to the conclusion that th
  • @RefreshScope详解

    要说清楚RefreshScope 先要了解Scope Scope org springframework beans factory config Scope 是Spring 2 0开始就有的核心的概念 RefreshScope org s
  • React 性能优化

    React 的工作流程是什么 我们可以在哪些阶段进行性能优化呢 如果 React 项目中出现了卡顿 我们可以采用哪些性能优化技巧 如何通过 React Profiler 定位性能问题 React Profiler 包含哪些阶段的信息 大纲
  • 信息熵、条件熵、信息增益率

    1 1 数学分布 分布可能指代不同的东西 比如数据分布或概率分布 这两种分布其实没有本质的区别 可以将x看做随机点 某一数据分布P为目标分布 概率分布f为x落在P上的概率值 形式化表示为f x 假设我们是一组正在广袤无垠的太空中进行研究的科

随机推荐

  • imx6 reboot指令无法重启 & kernel 停留在start kernel ......

    reboot指令无法重启 log root imx6dlsabresd reboot Thesystem is going down for reboot NOW d ttymxc0 Tue Oct 11 06 41 03 2016 INI
  • UE4中实现鼠标拖动游戏中的物体

    一 显示鼠标光标 启用鼠标点击事件 可以在关卡蓝图中或者游戏模式中加入下面代码 二 点击物体进入选中状态 三 根据通道获取命中结果 通过这个函数可以获取当前鼠标光标下接触的actor 重新设定actor位置即可 这里可以将类型转换去掉 就可
  • VBS中WScript.Shell对象的run和exec的使用及区别

    VBS中WScript Shell对象的run和exec的使用及区别 方法声明 Function Exec ByVal Command As String As WshExec Function Run ByVal Command As S
  • YARN 删除所有ACCEPTED任务的命令

    删除所有ACCEPTED任务的命令 for i in yarn application list grep w ACCEPTED awk print 1 grep application do yarn application kill i
  • 方差、协方差和协方差矩阵

    上次写了相关系数 其实很类似的一个概念是协方差 要说协方差 先复习下基本的统计内容 1 均值 2 方差 标准差 标准方差 或者写为 简单来说 标准差是一组数值自平均值分散开来的程度的一种测量观念 一个较大的标准差 代表大部分的数值和其平均值
  • SPA(单页应用)知多少

    单页面应用程序将所有的活动局限于一个Web页面中 在该Web页面初始化时加载相应的HTML JavaScript 和 CSS 一旦页面加载完成 单页面应用不会因为用户的操作而进行页面的重新加载或跳转 取而代之的是利用 JavaScript
  • JAVA JBDC连接MySql数据库示例心得一

    gt 下载MySql数据库驱动解压获得JAR文件导入编写的Java程序中 下图中1是复制过来的驱动文件 2是导入的文件 要导入才可以用 gt 连接数据库 数据查询 数据更新 A是数据库对应的数据类如下 package com jdbc pu
  • 反转字符串

    题目来源 力扣 LeetCode 链接 https leetcode cn com problems reverse words in a string iii 给定一个字符串 s 计算具有相同数量0和1的非空 连续 子字符串的数量 并且这
  • GD32F303 Keil 5.33 开发环境搭建流程

    目录 1 资源准备 2 Keil5安装流程 第一步 解压缩包 第二步 安装Keil5 第三步 安装GD32芯片支持包环境 总结 1 资源准备 Keil 5 33安装包 注册机 支持包 固件库 这里作者已经帮大家准备好了 见链接 百度网盘ht
  • 常用的el-input文本正则限制

    1 只能输入英文字母和数字 不能输入中文
  • 静态时序分析——多周期、半周期和伪路径

    一 多周期 multicycle paths 在一些情况下 如下图所示 两个寄存器之间的组合电路传输的逻辑延时超过一个时钟周期 在这样的情况下 这个组合路径被定义为多周期路径 multicycle path 尽管后一个寄存器会在每一个的时钟
  • Kubernetes详解(三十七)——PV与PVC

    今天继续给大家介绍Linux运维相关知识 本文主要内容是Kubernetes PV与PVC 一 PV和PVC详解 当前 存储的方式和种类有很多 并且各种存储的参数也需要非常专业的技术人员才能够了解 在Kubernetes集群中 放了方便我们
  • 闲鱼x-sign, x-mini-wua算法签名接口调用

    远程调用x sign x mini wua算法接口链接 xxxxx 5000 xianyu sign mim wua itemId 649780866851 x sign 结算结果需要传入的参数值 deviceId utdid appKey
  • 逗号运算符

    逗号运算符是指在C语言中 多个表达式可以用逗号分开 其中用逗号分开的表达式的值分别结算 但整个表达式的值是最后一个表达式的值 在前端的一些笔试中也可以看到逗号运算符的存在 作为C语言中的运算级别最低的一员 逗号运算符 结合的方向是 从左往右
  • dat文件

    DAT 数字录音带 是一种用于磁带数字录音的专业品质级别的标准媒体和技术 DAT设备就是一个数字磁带录音器 具有与录像机相似的旋转型磁头 大多数的DAT设备都能以44 1千赫 CD音频标准 以及48千赫的采样率来录音 DAT已经成为掌握录音
  • 在Java中如何判断字符串的编码格式

    最近 我一直试图寻找一种判断Java程序中字符串编码格式的方法 同时 也查找了很多资料 设计了一个的程序 美中不足的是该方法对仅含有数字和英文字母的字符串无效 原理 ASCII GBK UTF 8对数字和英文字母的编码相同 对其它字符编码不
  • GD32F105的CAN通讯,可以发送数据,但接收不到数据

    项目简介 使用的芯片型号GD32F105VC 芯片资源CAN1 波特率500k 调试过程中发现发送数据正常 但是接收不到数据 总结几点注意事项如下 1 需要设置滤波器 若未设置滤波器 则接收不到数据 傻傻的认为滤波器配置问题 以为注释掉滤波
  • vue-vuetify-admin案例讲解

    vue vuetify admin案例讲解 1 Introduction 1 1 directory structure 1 2 vue cli 1 3 vuex 1 3 1 在store目录创建index js 1 3 2 在main j
  • 队列(一种遵循先进先出原则的数据结构)

    目录 1 队列 Queue 2 队列的抽象数据类型 队列ADT 3 队列接口 4 利用数组实现队列 4 1 队列的实现 4 2 利用数组实现队列的优势与缺点 5 利用单链表实现队列 5 1 队列的实现 5 2 利用单链表实现队列的优势与缺点
  • js对象的继承

    学无止境 望君把握时间 首先我们需要定义一个类 定义一个动物类 function Animal name 属性 this name name Animal 实例方法 this sleep function console log this