JS 1.如何实现继承 2.原型和原型链

1_使用class实现继承

/** 继承 */
class Person { 
  constructor(name) { 
    this.name = name;
  }
  drink() { 
    console.log('喝水')
  }
}

class Student extends Person{ 
  constructor(name, score) { 
    // new Person
    super(name);
    this.score = score;
  }
  introduce() { 
    console.log(`我是${this.name},考了${this.score}分`)
  }
}
const student = new Student('张三', 99);
console.log('student', student);
student.introduce();
student.drink();

class Teacher extends Person{ 
  constructor(name, subject) { 
    super(name);
    this.subject = subject;
  }
  introduce() { 
    console.log(`我是${this.name},教了${this.subject}分`)
  }
}
const teacher = new Teacher('哈默', '前端开发');
console.log('teacher', teacher);
teacher.introduce();
teacher.drink();

继承的实现方式:

  • 原型链继承
  • 构造函数继承
  • 组合继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

  

2_原型

_proto_ 隐式原型

 

student._proto_   隐式原型 === Student.prototype  显式原型

 

 3_原型链 顺着原型链继续去寻找对应的元素

 4_使用instanceof 作类型判断

const object = {};
const array = [];

console.log('result object(typeof) -', typeof object);
console.log('result array(typeof) -', typeof array);

const flagObject = object instanceof Array;
const flagArray = array instanceof Array;
console.log('result object(typeof) -', typeof flagObject);
console.log('result array(typeof) -', typeof flagArray);

 原型和原型链总结                                                                                                                

 

 每个对象的__proto__都是指向它的构造函数的原型对象prototype

person1.__proto__ === Person.prototype

构造函数是一个函数对象,是通过 Function 构造器产生的

Person.__proto__ === Function.prototype

原型对象本身是一个普通对象,而普通对象的构造函数都是Object

Person.prototype.__proto__ === Object.prototype

刚刚上面说了,所有的构造器都是函数对象,函数对象都是 Function 构造产生的

Object.__proto__ === Function.prototype

Object 的原型对象也有__proto__属性指向nullnull是原型链的顶端

Object.prototype.__proto__ === null

下面作出总结:

  • 一切对象都是继承自Object对象,Object 对象直接继承根源对象 null

  • 一切的函数对象(包括 Object 对象),都是继承自 Function 对象

  • Object 对象直接继承自 Function 对象

  • Function对象的__proto__会指向自己的原型对象,最终还是继承自Object对象

  

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

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

相关文章

RISCV Reader笔记_4 乘除,浮点扩展

乘法和除法指令 前面了解过 RV32I不带乘除。扩展的RV32M里面有。 mul 较简单。div 是商,rem 是余数。 指令格式都差不多,基本就是靠 func 码确定变体。 因为两个32位数乘积是64位数,一条指令处理会比较复杂,因此分为两个指令计算…

vue+css中通过一个div的hover触发另一个的样式变化

思路 通过触发父div&#xff0c;除了改变父div的背景色外&#xff0c;还同时改变div中i标签的颜色 效果图 原本 hover触发后 html代码 <div class"user_addfrid"><i class"iconfont icon-friend-add"></i> </div> css代码 …

使用Xshell服务器跑程序,用pycharm连接服务器远程开发

目标&#xff1a; 1.使用Xshell在服务器上创建自己项目需要的虚拟环境 2.用pycharm实现远程服务器的连接&#xff08;这样就可以在本地debug或者写代码&#xff0c;然后再用xshell在服务器上跑&#xff09; 一、使用Xshell在服务器上创建自己项目需要的虚拟环境 1.打开Xshe…

LangChain-Agent自定义Tools类 ——输入参数篇(二)

给自定义函数传入输入参数&#xff0c;分别有single-input 参数函数案例和multi-input 参数函数案例&#xff1a; from langchain.agents import Tool from langchain.tools import BaseTool from math import pi from typing import Union from math import pi from typing …

利用nginx/apache代理wss 实现 小程序 端口 反向代理

除了用Workerman自身的SSL&#xff0c;也可以利用nginx/apache作为wss代理转发给workerman 我就是栽在这大坑里&#xff08;nginx/apache代理wss&#xff0c;workerman部分就不要设置ssl&#xff0c;否则将无法连接&#xff0c;两个方法2选1&#xff09;官方推荐用nginx/apach…

Oracle VM VirtualBox添加磁盘

文章目录 1、Oracle VM VirtualBox添加磁盘 1、Oracle VM VirtualBox添加磁盘 1.关闭正在启动的Oracle VM VirtualBox 2、选择存储 3、点击最右边 4、选择创建 直接下一步&#xff1a; 直接下一步&#xff1a; 调整需要的大小–创建即可: 此时此刻磁盘加载成功&#xff0…

如何预防DDOS和CC攻击

在当今数字化世界中&#xff0c;网络安全成为各行各业亟需解决的重要问题。最近&#xff0c;由于DDoS&#xff08;分布式拒绝服务&#xff09;和CC&#xff08;恶意咨询&#xff09;攻击事件的频繁发生&#xff0c;网络安全进一步引起了人们的关注。 据可靠消息源透露&#xff…

浅入浅出Java锁

前提 做分布式爬虫时&#xff0c;结合已有的架构&#xff0c;直接对某网站的详情页进行了爬取&#xff1b;尴尬的是&#xff0c;某网站需先采集列表页&#xff0c;之后才能采集详情页&#xff1b;这种防爬手段使用了用户行为监控&#xff0c;行为异常的访问直接就给屏蔽了。 对…

445端口是啥?445端口怎么关闭?

445端口是Windows系统中的SMB协议&#xff0c;用于文件共享和网络打印功能。然而&#xff0c;这个端口也是黑客攻击的重要入口之一。那么&#xff0c;如何关闭445端口&#xff0c;保护自己的计算机安全呢&#xff1f; 关闭445端口的方法 1.在“控制面板”中打开“管理员工具”…

亚马逊云科技通过“逆向工作法”,为客户解决数据库问题

最近,数据库领域发生了一个大事件,可以称得上是一座里程碑。全球最具权威的IT研究公司Gartner最近发布了一个消息:在2022年的全球DBMS市场份额中,亚马逊云科技的数据库超越微软,登顶第一。 亚马逊云科技、微软、Oracle这三巨头近几年一直排名前三,占据了全球DBMS超过三分之二的…

RabbitMQ 2023面试5题(四)

一、RabbitMQ有哪些作用 RabbitMQ是一个消息队列中间件&#xff0c;它的作用是利用高效可靠的消息传递机制进行与平台无关的数据交流&#xff0c;并基于数据通信来进行的分布式系统的集成&#xff0c;主要作用有以下方面&#xff1a; 实现应用程序之间的异步和解耦&#xff1a…

【HTTP 协议2】如何构造 HTTP 请求

文章目录 前言一、地址栏输入二、HTML 特殊标签三、form 表单四、ajax总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结…

JAVA2

文章目录 前言 前言 创建&#xff0c;编译java&#xff08;每4修改一次就要重新编译&#xff01;&#xff09; 第一个程序&#xff1a; 解决中文乱码问题&#xff1a; 效果&#xff1a; 总结&#xff1a;

微信小程序——分页组件的创建与使用

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

volatile关键字和ThreadLocal

作用&#xff1a; 1.线程的可见性&#xff1a;当一个线程修改一个共享变量时&#xff0c;另外一个线程能读到这个修改的值。 2. 顺序一致性&#xff1a;禁止指令重排序。 线程之间的共享变量存储在主内存中&#xff08;Main Memory&#xff09;中&#xff0c;每个线程都一个都…

有哪些做任务赚佣金的平台 做任务挣钱的app

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 做任务赚佣金的平台&#xff1f;做任务赚钱一直是一种流行的赚钱方式。现在有无数的app可以通…

6-js基础-3

JavaScript 基础 - 3 知道什么是数组及其应用的场景&#xff0c;掌握数组声明及访问的语法&#xff0c;具备利用数组渲染柱形图表的能力 今日重点&#xff1a; 循环嵌套数组综合案例 今日单词&#xff1a; 循环嵌套 利用循环的知识来对比一个简单的天文知识&#xff0c;我们…

SQL题型:根据逗号拆分列

例1&#xff1a; 表&#xff1a; 要实现的结果&#xff1a; 代码&#xff1a; select a.id as hyId,substring_index(substring_index(a.ch_ry_mc, ,,b.help_topic_id 1 ),,, - 1) AS CH_RY_ID FROM rsgl_hygl_hyxx a JOIN mysql.help_topic b ON b.help_topic_id < ( l…

python爬虫增加多线程获取数据

Python爬虫应用领域广泛&#xff0c;并且在数据爬取领域处于霸主位置&#xff0c;并且拥有很多性能好的框架&#xff0c;像Scrapy、Request、BeautifuSoap、urlib等框架可以实现爬行自如的功能&#xff0c;只要有能爬取的数据&#xff0c;Python爬虫均可实现。数据信息采集离不…

【算法】区间DP (从记忆化搜索到递推DP)⭐

文章目录 前期知识516. 最长回文子序列思路1——转换问题&#xff1a;求 s 和反转后 s 的 LCS&#xff08;最长公共子序列&#xff09;思路2——区间DP&#xff1a;从两侧向内缩小问题规模补充&#xff1a;记忆化搜索代码 1039. 多边形三角剖分的最低得分从记忆化搜索开始翻译成…