ES5中实现继承

news2024/11/26 8:44:22

  本篇文章主要说明在ES5中最通用最兼容的继承实现方式,继承作为面向对象的三大特性之一,在js中实现继承对代码的简洁性,逻辑的连贯性都有很大的帮助。

实现思路

封装创建中间联系对象的函数

  继承可以简单理解为建立子类和父类之间的联系,从而实现代码和函数的复用,建立子类和父类的联系,也就是建立两个构造函数之间的联系,我们不难想到可以通过原型,原型链来实现,让子类与父类的原型建立联系,就可以达到我们的目的。

  如果我们直接将子类的prototype属性指向父类的原型的话,就会导致继承很多我们并不需要的属性,所以我们通过下图这种方式:

  将创建中间建立联系对象的代码封装成为一个函数,传入的参数p为父类的原型对象,将p赋值给F的原型,并将其实例返回。

封装继承函数

  接下来,我们将createObj返回的实例对象赋值给子类的原型,建立父类和子类的联系,也就是继承关系,实现代码如下图:

  封装成继承函数,将子类和父类作为参数传入,将子类的prototype指向createObj函数返回的实例对象,并在子类原型中添加constructor属性,指向子类的构造函数对象,在需要继承的位置,直接调用inherit函数就能完成继承。

完整代码

function Person(name, age) {
    this.name = name;
    this.age = age;
};

Person.prototype.work = function() {
    console.log("撸起袖子加油干")
}

function Children(name, age, responsibility) {
    Person.call(this, name, age);
    this.responsibility = responsibility;
};


function createObj(p) {
    function F() {};
    F.prototype = p;
    return new F()
}

function inherit(Subtype, Supertype) {
    Subtype.prototype = createObj(Supertype.prototype);
    Object.defineProperty(Subtype.prototype, 'constructor', {
        enumerable: false,
        configurable: true,
        writable: true,
        value: Subtype
    })
}

inherit(Children, Person);

Children.prototype.study = function() {
    console.log("学习");
}

var child = new Children("guanju", 18, "成家立业");
console.log(child);
child.study();
child.work();

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

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

相关文章

NEFTune: 通过简单的噪声提升指令精调效果

NEFTune指的是Noise Embedding Finetuning(噪声嵌入精调),提出自论文:NEFTune: NOISY EMBEDDINGS IMPROVE INSTRUCTION FINETUNING。 NEFTune方法的原理仅使用一句话就可以描述清楚:在finetune过程的词向量中引入一些…

【chatglm3】(4):如何设计一个知识库问答系统,参考智谱AI的知识库系统,

0,视频地址 https://www.bilibili.com/video/BV16j411E7FX/?vd_source4b290247452adda4e56d84b659b0c8a2 【chatglm3】(4):如何设计一个知识库问答系统,参考智谱AI的知识库系统,学习设计理念,…

图形学 -- Geometry几何

隐式 implicit 基于给点归类,满足某些关系的点 缺点:不规则表面难以描述! algebraic surface 直接用数学公式表示:不直观! Constructive Solid Geometry(CSG) 用简单形状进行加减 distance …

Android---Gradle 构建问题解析

想必做 Android App 开发的对 Gradle 都不太陌生。因为有 Android Studio 的帮助,Android 工程师使用 Gradle 的门槛不算太高,基本的配置都大同小异。只要在 Android Studio 默认生成的 build.gradle 中稍加修改,就都能满足项目要求。但是&am…

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap,Kotlin

Android BitmapFactory.decodeResource读取原始图片装载成原始宽高Bitmap,Kotlin fun getOriginalBitmap(resId: Int): Bitmap {val options BitmapFactory.Options()options.inJustDecodeBounds true //只解析原始图片的宽高,不decode原始文件装载到内…

C语言--字符串详解(多角度分析,什么是字符串?字符串如何存储?字符串如何应用?字符串常用的库函数有哪些?)

目录 一、前言 💦什么是字符串 💦字符串如何存储? 二、字符串常量和字符数组 💦字符串常量 ✨什么是字符串常量? ✨字符串常量与指针 💦字符数组 ✨字符数组的应用 💦字符串常量与字符数组的…

Nginx 修改server_name后无法访问

问题: 在nginx.conf配置中, server_name 为 localhost 时可以正常访问,但改成自定义的域名后无法访问 解决方法: - Window系统 修改本地hosts文件,一般路径在:C:\Windows\System32\drivers\etc\hosts 在文件最后…

数据库系统概述之数据库分类

你用过或者了解的数据库都有哪些? 数据库最新统计数量约404个(https://db-engines.com/en/ranking) 排名前20的数据库管理系统: 未完待续,喜欢的点赞收藏转发,如有疑问,点击链接加入群聊【信创…

python实现梯度距离平方反比法GIDS

1 梯度距离平方反比法 梯度距离平方反比法(gradient plus inverse distance squared (GIDS))由Nalder和Wein于1988年提出,是一种考虑了气象要素随经纬度和海拔高度变化的反距离权重法,其空间插值计算公式如下: 式中: z z z 表示代…

【C++】数组中出现次数超过一半的数字

代码&#xff1a; class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int整型*/int MoreThanHalfNum_Solution(vector<int>& numbers) {int …

基于ssm+vue员工工资管理系统

基于ssmvue员工工资管理系统 摘要 随着信息技术的不断发展&#xff0c;各行各业对于高效管理和利用数据的需求也日益增长。员工工资管理系统作为企业管理中的一个重要组成部分&#xff0c;对于实现工资信息的精确计算、及时发放和有效管理具有重要意义。本文基于SSM&#xff08…

程序员导航站

探路者 hello.alluniverse.vip 开发者导航 - Pro Developer网站导航 探路者是一款极简导航工具&#xff0c;致力于收录的每个站点都有其独特的作用。同时支持自定义导航&#xff0c;让用户快速实现个性化的导航站点。 特性概述 免费ChatGPT 装机必备 开发工具 Git精选项目 …

Unity 代码控制Text文本换行

Unity 要通过代码控制Text文本换行&#xff0c;实现方法比较简单&#xff0c;无论是传统的Text&#xff0c;还是TMP文本&#xff0c;都是通过在字符串需要换行的地方加上换行符【\n】。 不过在Text属性栏中要确保设置自动换行模式&#xff1a; 如传统的设置如图&#xff1a; …

【AI视野·今日CV 计算机视觉论文速览 第278期】Mon, 30 Oct 2023

AI视野今日CS.CV 计算机视觉论文速览 Mon, 30 Oct 2023 Totally 50 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Image Clustering Conditioned on Text Criteria Authors Sehyun Kwon, Jaeseung Park, Minkyu Kim, Jaewoong Cho, Ernest…

Linux - 文件系统

前言 文件系统 我们先来看两个例子&#xff1a; 这个程序输出&#xff1a; 此时的输出也满足的我们预期。 我们也可以把 程序执行结果&#xff0c;输出重定向到 一个文件当中: 当我们在代码的结尾处&#xff0c;创建了子进程&#xff0c;那么输出应该还是和上述是一样的&…

【打卡】牛客网:

自己写的&#xff1a; 虽然题目要求了排序&#xff0c;但是我没排序也可以通过。 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param num int整型vector * return int整型vector<vec…

Java8Stream快速使用

将List集合存入流中 List<String> list new ArrayList<>();list.add("张一");list.add("张二");list.add("张三");list.add("李四");list.add("赵五");list.add("张六");list.add("王八"…

腾讯云新客户优惠服务器88元/年,540元/3年,另有5年优惠服务器

在选择云服务器时&#xff0c;首先需要考虑的是性能与配置是否与自己的需求相匹配。对于小型网站或者个人博客&#xff0c;轻量应用服务器是一个不错的选择。腾讯云双十一活动中&#xff0c;2核2G轻量应用服务器的活动优惠价为88元/年&#xff0c;2核4G轻量应用服务器的活动优惠…

运行游戏“找不到XINPUTI_3.dll无法继续执行代码,总共有五种解决方案

xinput1_3.dll是Windows操作系统中的一款动态链接库&#xff08;DLL&#xff09;文件&#xff0c;主要作用是为DirectX输入提供支持。DirectX是微软推出的一套多媒体应用程序开发接口&#xff0c;广泛应用于游戏、多媒体制作等领域。xinput1_3.dll文件包含了许多与输入设备相关…

java学习part04

1.进制 计算机底层都是二进制&#xff0c;输出统一十进制 2.算符 3.逻辑算符 4.位运算符 38-变量与运算符-位运算符的使用_哔哩哔哩_bilibili 5.条件运算符