JavaScript之继承

继承

父类与子类

子类是父类的一个子集

比如:人类和医生类,医生类是人类的子集;人类是父类,医生类是子集

父类与子类在特性(属性和方法)上有什么关系

方法:子类对象可以调用父类原型上的方法

//父类:人
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.breathe = function(){
    console.log(this.name + " is breathing");
}
//子类:医生
function Doctor(name,age,title){
    this.name = name;
    this.age = age;
    this.title = title;
}
//医生作为人的子类,可以调用人原型上的方法
//实现原型的继承
Doctor.prototype.__proto__ = Person.prototype;
var d1 = new Doctor("zhangsan",20,"doctor");
d1.breathe();//正常调用
Doctor.prototype.__proto__ = Person.prototype;

对象访问自己的原型用__proto__

任何对象都有原型。访问方式都是对象.__proto__

Doctor.prototype时医生类的原型对象

可以通过__proto__的方式访问原型对象的原型

把Person类的原型赋值给医生类原型的原型,产生以下效果

1.人类原型上存在方法breathe,即Person.prototype.breathe()

2.赋值后医生类原型的原型就是人类原型,所以存在方法Doctor.prototype.__proto__.breathe()

3.根据规则,存在Doctor.prototype.__proto__.breathe()就一定存在Doctor.prototype.breathe()

4.Doctor实例化出的对象d1存在

d1.__proto__ == Doctor.prototype    //true

5.根据规则存在d1.__proto__.breathe()就一定存在d1.breathe()

综上,通过Doctor.prototype.__proto__ = Person.prototype;可以实现原型的继承,子类对象可以调用父类原型的方法。

Object类

object类的原型上封装类很多基本的方法,如toString等

console.log(object.prototype);

在声明类是,所有类的圆心都自动继承object的原型

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function () {
    console.log(this.name + ":" + this.age);
}
var p = new Person("zhangsan", 18);
console.log(p.toString());//正常调用

Person类在声明时,原型对象自动继承了object的原型

即Person类自动成为了object的子类

p作为子类对象,可以调用父类原型上的方法,即p.toString()

声明Prog类,继承Person类的原型

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

Person.prototype.work = function () {
    console.log("在工作");
}
程序员原型继承人原型
Prog.prototype.__proto__ = Person.prototype;

Prog类在声明时,原型本来也是继承object的原型

但是人为的篡改了继承方式,Prog原型继承了Person的原型

function JsPro(name,age){
    this.name = name;
    this.age = age;
}
JsPro.prototype.__proto__ = Prog.prototype;

var j1= new JsPro("a",20);
console.log(j1.toString());//正常执行

“孙子类”调用“爷爷类”的方法

类之间通过继承,让原型形成了一条“链子”,成为原型链

注:Object原型的原型指向谁(即Object继承谁)?

答:null(原型链的顶端)

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

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

相关文章

Django 反向解析路由

app2.urls.py from django.urls import path, re_path from . import viewsurlpatterns [path(index, views.index, nameindex),path(url_reverse, views.url_reverse, nameapp2_url_reverse), # 使用reverse()方法反向解析 ,name对于视图的reverse("app2_url_reverse&…

LeetCode每日一题【54.螺旋矩阵】

思路&#xff1a;模拟&#xff0c;初始化上下左右4个方向的边界&#xff0c;逐步收缩&#xff0c;注意要及时判断元素是否已经放满&#xff0c;否则会放入多余元素 class Solution { public:vector<int> spiralOrder(vector<vector<int>>& matrix) {int…

Linux:Gitlab:16.9.2 (rpm包) 部署及基础操作(1)

1.基础环境 我只准备了一台gitlab服务器&#xff0c;访问就用真机进行访问&#xff0c;接下来介绍一下详细配置 centos7 内网ip:192.168.6.7 外网ip:172.20.10.4 运行内存&#xff1a;4G CPU:4核 先去配置基础环境 关闭防火墙以及selinux 再去下载基础的运行…

【Unity动画】Unity如何导入序列帧动画(GIF)

Unity 不支持GIF动画的直接播放&#xff0c;我们需要使用序列帧的方式 01准备好序列帧 02全部拖到Unity 仓库文件夹中 03全选修改成精灵模式Sprite 2D ,根据需要修改尺寸&#xff0c;点击Apply 04 创建一个空物体 拖动序列上去 然后全选所有序列帧&#xff0c;拖到这个空物体…

Kafka:分布式消息队列

1. 简介 介绍 Kafka 的概述、优势和劣势&#xff0c;以及应用场景。 2. 基本概念 2.1 架构 一个典型的 Kafka 体系架构包括若干 Producer、若干Broker、若干 Consumer&#xff0c;以及一个ZooKeeper集群。 ZooKeeper是Kafka用来负责集群元数据的管理、控制器的选举等操作的…

java的成员变量和局部变量

1、什么是成员变量和局部变量&#xff1f; 2、成员变量和局部变量区别 区别 成员变量 局部变量 类中位置不同 类中方法外 方法内或者方法声明上 内存中位置不同 堆内存 栈内存 生命周期不同 随着对象的存在而存在&#xff0c;随着对象的消失而消失 随着方法的调用而…

Kali Linux 更换优质国内源

文章目录 环境说明1 Kali Linux 源简介2 Kali Linux 更换国内源 环境说明 操作系统&#xff1a;kali-linux-2024.1-installer-amd64 1 Kali Linux 源简介 所谓的 Kali Linux 源&#xff0c;你可以将它理解为软件仓库&#xff0c;系统通过它安装和更新软件&#xff1b;源的服务…

人事管理系统|基于JSP+ Mysql+Java+ B/S结构的人事管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…

vue3 reactive丢失响应式

问题 使用 reactive 构造响应式对象时&#xff0c;当对其进行重新赋值后&#xff0c;会导致原有变量失去响应式&#xff0c;页面不会发生联动更新 例如&#xff1a; 1、使用 reactive 定义一个响应式的对象变量 let data1 reactive({name: 小李,date: 2024-03-18,address: xx…

使用JAXB生成XML的Java对象

文章目录 标题使用JAXB生成XML的Java对象根据xml生成xsd文件&#xff1a;下载trang.jar&#xff1a;使用trang.jar生成xml的xsd文件&#xff1a; 使用JAXB的xjc生成java对象&#xff1a; 标题使用JAXB生成XML的Java对象 根据xml生成xsd文件&#xff1a; 下载trang.jar&#x…

Unity UGUI之Toggle基本了解

在Unity中&#xff0c;Toggle一般用于两种状态之间的切换&#xff0c;通常用于开关或复选框等功能。 它的基本属性如图&#xff1a; 其中&#xff0c; Interactable&#xff08;可交互&#xff09;&#xff1a;指示Toggle是否可以与用户交互。设置为false时&#xff0c;禁用To…

【Selenium(一)】

简介 Selenium是一个开源的自动化测试工具&#xff0c;主要用于Web应用程序的自动化测试。它支持多种浏览器&#xff0c;包括Chrome、Firefox、Internet Explorer等&#xff0c;以及多种编程语言&#xff0c;如Java、Python、C#、Ruby等&#xff0c;使得它成为Web自动化测试中…

学习笔记Day11:初探Linux

Linux系统初探 Linux系统简介 发行版本Ubuntu/centOS&#xff0c;逻辑一样&#xff0c;都可以用。 服务器 本质是一台远程电脑&#xff0c;大多数服务器是Linux系统&#xff0c;通常使用命令行远程访问而不是桌面操作。LInux服务器允许多用户同时访问。NGS组学测序数据上游…

Redis 7.0.X 在Windows下编译支持TLS连接,遇坑埋坑

微信公众号&#xff1a;数据库杂记 个人微信: iiihero 我是iihero. 也可以叫我Sean. iiheroCSDN(https://blog.csdn.net/iihero) Sean墨天轮 (https://www.modb.pro/u/16258) 数据库领域的资深爱好者一枚。 水木早期数据库论坛发起人 db2smth&#xff0c;早期多年水木论坛数…

VSCode创建用户代码片段-案例demo

示例 - 在线生成代码片段 Vue3代码片段 {"vue3": {scope": "javascript,typescript,html,vue","prefix": "vue3","body": ["<template>","$1","</template>",""…

Java后端面试:框架篇高频面试(Spring、SpringMVC、SpringBoot、MyBatis)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Java后端面试&#xff1a;MySQL面试篇&#xff08;底层事务、SQL调优&#xff09; &#x1f4da;订阅专栏&#xff1a;Java后端面…

HQYJ 3-18 整理

1.OSI七层体系结构&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 TCP/IP四层结构&#xff1a;网络接口层、网际层、传输层、应用层 五层结构&#xff1a;物理层、数据链路层、网络层、传输层、应用层 2.一帧数据的说明&#xff1a;大小为64-1518…

解决访问站外图片403(referrer)问题

问题 我们在使用站外图片的时候&#xff0c;访问图片403&#xff0c;但是浏览器直接访问图片链接可以打开&#xff0c;这是为什么呢&#xff1f; 原因 http请求体的header中有一个referrer字段&#xff0c;用来表示发起http请求的源地址信息&#xff0c;这个referrer信息是可…

WPS制作甘特图

“ 甘特图&#xff08;Gantt chart&#xff09;又称为横道图、条状图&#xff08;Bar chart&#xff09;&#xff0c;通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。” 设置基础样式 设置行高 设置宽度 准备基础数据 计算持续时间 …

解决Android Studio Flamingo创建项目时出现的问题

问题1 使用Android Studio Flamingo创建项目时&#xff0c;IDE默认下载Gradle 8.0&#xff0c;但是下载速度特别慢&#xff0c;或者直接下载失败 解决办法-手动安装Gradle 第一步&#xff1a;使用浏览器下载gradle-8.0-bin.zip 下载地址&#xff1a;https://services.gradle…