第六讲_JavaScript原型

JavaScript原型

  • 1. 原型的概念
  • 2. 原型继承
    • 2.1 原型链
  • 3. class类的原型对象

1. 原型的概念

原型JavaScript 对象相互继承特性的机制。

  • 每个函数都有一个 prototype 属性,这个属性指向一个对象,这个对象称为原型对象
  • 每个对象都有一个 [[Prototype]] 属性,这个属性指向原型对象
  • 原型对象都有一个constuctor属性,这个属性指向构造函数。

在这里插入图片描述
在这里插入图片描述

function Person(head, eyes) {this.head = head;this.eyes = eyes;
}let person = new Person(1, 2);// 每个对象都有一个[[Prototype]]属性,这个属性指向原型对象
// 对象的[[Prototype]]属性,需要通过__proto__读取
console.log(person.__proto__ === Person.prototype)// 原型对象都有一个constuctor属性,这个属性指向构造函数
console.log(Person.prototype.constructor === Person)

2. 原型继承

function Person() {this.eyes = 2;this.head =1;
}function Man() {
}// 每个函数都有一个prototype属性
// 将 Man() 函数的prototype指向 new Person()对象
Man.prototype = new Person();
// 把原型对象下的constructor再指回原来的构造函数
Man.prototype.constructor = Man;// 创建一个Man对象,man就拥有了Person下的两个属性
const man = new Man();console.log(man)

在这里插入图片描述

2.1 原型链

基于原型对象的继承使得不同构造函数的原型对象关联起来,并且这种关联的关系是一种链状的结构,所以称之为原型链

上述的代码,在调用man对象的head属性时

  • 首先在Man函数自身找head属性
  • 如果没有,再到prototype属性指向的原型对象找head属性,因为它的原型对象是people对象,所以最终就找到了peoplehead属性。

3. class类的原型对象

ES6 class 类的prototype 属性指向不能修改,但提供了extends关键字来实现继承,其底层也是修改了prototype

继承前:

class Person {
}class Man{
}console.dir(Man)

在这里插入图片描述

继承后:

class Person {
}class Man extends Person{
}console.dir(Man)

在这里插入图片描述

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

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

相关文章

网络原理-TCP/IP(1)

应用层 我们之前编写完了基本的java socket, 要知道,我们之前所写的所有代码都在应用层中,都是为了完成某项业务,如翻译等.关于应用层,后面会有专门的讲解,在此处先讲一下基础知识. 应用层对应着应用程序,是程序员打交道最多的一层,调用系统提供的网络api写出的代码都是应用层…

纯html+js+css个人博客

首页 <!DOCTYPE HTML> <html> <head> <title>博客</title> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta name"viewport" content"widthdevice-width, initial-sca…

隐式内连接(inner join)和LEFT JOIN

隐式内连接和inner join 的关系&#xff1a; 1、隐式内连接&#xff1a;在SQL语句中使用"FROM"关键字连接两个或多个表&#xff0c;而连接条件则写在"WHERE"子句中。这种方式只有在连接条件成立的情况下&#xff0c;才会将两个表中的数据行连接起来。 2、…

[macOS]gcc安装

在MacOS操作系统上安装GCC是开发者们经常遇到的问题之一。GCC是GNU编译器集合&#xff0c;它可以编译C&#xff0c;C&#xff0c;Objective-C和其他一些编程语言。然而&#xff0c;在MacOS上安装GCC并非一件简单的事情。本文将探讨如何在MacOS上安装GCC&#xff0c;以及如何解决…

React hooks子组件暴露方法示例

说明 通常情况下&#xff0c;React 子组件使用父组件的方法或值通过props传递&#xff0c;反过来&#xff0c;父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例&#xff1a; User.tsx import React, { FC, useEffect, useState, useRef } from …

TOP100 矩阵

1.73. 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 提示&#xff1a; m matrix.lengthn matrix[0].length1 < m, n < 200-2^31 < matrix[i][j] < 2^31 - 1 思路&#xf…

SeaTunnel Web安装 一把成

安装相关jar包&#xff0c;以及SeaTunnel 和Web 打成的包&#xff0c;可以直接使用&#xff0c;但是需要安装MySQL客户端的分享&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1qrt1RAX38SgIpNklbQJ7pA 提取码&#xff1a;0kmf 1. 环境准备 环境名称版本系统环境C…

使用EasyPOI模板导出Execl表格(含有图片)

这是生成的文件效果 一、导入依赖 <!--easypoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.2.0</version></dependency><dependency><groupId>cn.aft…

零、环境搭建

之前一直玩python的&#xff0c;由于工作需要C版的opencv&#xff0c;故借此寒假闲暇时间&#xff0c;进行简单了解学习。 主要用到的IDE是Visual Studio和OpenCV 一、Visual Studio下载安装 我这里没找到之前的2017版本&#xff0c;就拿目前最新的2023社区版下载&#xff1a…

30款跨平台开发方案,总有个一个适合你!

1、Qt FluentUI CEF 可以覆盖所有需求 2、.NET Avalonia(SukiUI) CEF 可以覆盖所有需求 3、.NET DevExpress跨平台产品 CEF 可以覆盖所有需求 4、JavaFx(Swing) flatlaf WebView 可以覆盖所有需求 5、Java Qt &#xff08;qtjambi&#xff09; CEF 可以覆盖所有需…

2024谷歌SEO入门指南

SEO自然搜索&#xff0c;也被称为有机搜索、非付费搜索或算法搜索&#xff0c;基本上就是你在 Google 的搜索框中输入关键词后&#xff0c;看到的搜索结果。&#xff08;当然&#xff0c;还有付费搜索结果&#xff0c;此处暂且略过&#xff09;这些结果并非由于广告投放或付费推…

C++对象模型和this指针,const修饰成员函数详解

目录 1.成员变量和成员函数分开存储 2.this指针 1.this指针概念 ​编辑 2.this指针用途 3.空指针访问成员函数 ​编辑 4.const修饰成员函数 mutable声明 1.成员变量和成员函数分开存储 空对象占用内存空间为1字节&#xff0c;这样是为了区分不同的空对象占内存的位置 …

【学习笔记】Vue3源码解析:第一部分-实现vue3环境搭建

课程地址&#xff1a;【已完结】全网最详细Vue3源码解析&#xff01;&#xff08;一行行带你手写Vue3源码&#xff09; 第一部分&#xff1a;实现vue3环境搭建&#xff08;对应课程的第1-3节&#xff09; VUE2与VUE3的对比&#xff1a; 也即vue2的痛点&#xff1a; 对TypeSc…

【Spring连载】使用Spring访问 Apache Kafka(二十)----测试应用

【Spring连载】使用Spring访问 Apache Kafka&#xff08;二十&#xff09;----测试应用Testing Applications 一、KafkaTestUtils二、JUnit三、配置主题Configuring Topics四、为多个测试类使用相同的broker&#xff0c;Using the Same Broker(s) for Multiple Test Classes五、…

微信小程序遮罩层滚动穿透的问题

常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 发生滚动穿透 处理方法是添加 <page-meta page-style"{{ showPolish ? overflow: hidden; : }}" /> page-meta必须在第一个节点

【bug】在子组件中watch监听父组件传过来的值,监听不到,已解决

bug复现&#xff1a; 父组件需要传参数autoinputFs&#xff0c;autoinputFs为true的时候&#xff0c;子组件中的输入框&#xff08;只有一个&#xff09;自动聚焦&#xff0c;很多组件复用mp3Search&#xff0c;有些页面不需要&#xff0c;所以定义了autoinputFs控制输入框是否…

开发一个Android App,在项目中完成添加联系人的功能,通过ContentResolver向系统中添加联系人信息。

实现步骤&#xff1a; &#xff08;1&#xff09;添加动态联系人的权限。 &#xff08;2&#xff09;创建Activity和布局文件&#xff0c;添加输入框和按钮等控件。 &#xff08;3&#xff09;完成添加联系人的功能。 代码文件如下&#xff1a; activity_main.xml文件 <!…

Java - 遍历实体类字段值

当从数据库查询出一列数据&#xff0c;需要比对各列字段的最大值或者取不为空的值时&#xff0c;需要遍历字段操作。 示例数据 项目1月成交数量2月成交数量3月成交数量4月成交数量电脑15141019手机223519导管311001418 对应实体类 Data public class ProVo {// 项目private…

sv program module

为了避免races&#xff0c;在验证中引入program&#xff1b; Similarities between program and module block A program block can instantiate another program block in the way how the module is instantiated another module block.Both can have no or more inputs, …

2024.1.29 寒假训练记录(12)

昨天大半夜开了一道2000的组合数学&#xff0c;吗的忘记看场次&#xff0c;根本搜不到啥题解&#xff0c;只能对着别人代码一点点琢磨&#xff0c;终于看明白了&#xff0c;搞了套组合数取模的板子&#xff0c;还行 训练赛剩下的题目明天补 文章目录 CF 1912B Blueprint for S…