42.原型对象 prototype

news2024/11/23 9:00:43

目录

1  面向对象与面向过程

2  原型对象 prototype

3  在内置对象中添加方法

4  constructor 属性

5  实例对象原型 __proto__

6  原型继承

7  原型链与instanceof

7.1  原型链

7.2  instanceof

8  案例-模态框


1  面向对象与面向过程

编程思想有 面向过程 与 面向对象,我们举个把大象从冰箱中拿出来的例子

面向过程就是 开冰箱门->把大象拿出来->关冰箱门 这三个步骤的代码自己写

面向对象就是 找一个会 开冰箱门->把大象拿出来->关冰箱门 的人,写代码的时候只写找人这一步(封装有可能得自己封装)

简单理解就是 面向对象将过程封装成一个整体,每次使用的时候使用整体。面向过程每次使用的时候使用若干个过程

面向对象有三个特性,封装性,继承性,多态性

我们通过下面这个图可以简单理解一下

面向过程与面向对象各有千秋,前端主要用面向过程

2  原型对象 prototype

prototype是构造函数的一个属性,实例对象中没有prototype

JS中通过构造函数体现面向对象的封装性

在构造函数中封装方法会造成内存浪费,因为用构造函数中创造的每个对象都是独立的,创建了两个对象就会有两个方法占用两个内存空间,创建了十个对象就会占用十个内存空间

原型可以让相同的方法放在同一个内存空间中,JS规定每一个构造函数都有一个prototype属性,这个属性指向的是一个对象,所以我们称其为原型对象

我们可以将方法挂载在prototype中,这样方法就会存放在相同的内存空间中

构造函数和原型中的this指向的都是实例化对象

3  在内置对象中添加方法

我们之前用的方法,比如str.split()实质上是str.prototype.split(),我们现在想在内置对象Array添加sum()方法,以便让数组中所有的数字都加起来

4  constructor 属性

每一个实例对象都有constructor属性,constructor属性指向该实例对象的构造函数

constructor是实例对象的一个属性。

构造函数也有constructor,构造函数也是被构造出来的,我们写的构造函数的constructor同样指向上一级构造函数。

原型对象(prototype)也有constructor属性,他的属性内容与实例对象的属性内容相同,都指向实例对象的构造函数

constructor属性可以帮助我们批量增加构造函数中的函数,如果我们不适用constructor,我们可以这样写

上面的写法在创造多个方法的时候会很麻烦,也可以下面这样写

上面那样写很方便,但是会丢失掉constructor属性

我们可以这样写添加construcor属性

这样就可以做到无丢失属性添加方法了

5  实例对象原型 __proto__

__proto__是实例对象的一个属性,构造函数也有__proto__,构造函数也是被构造出来的,我们写的构造函数的__proto__同样指向上一级的对象原型

在实例对象中都有一个属性__proto__指向构造函数的prototype原型对象,这个是 实例对象 可以使用 原型属性与方法的原因

  • 有时候我们会看到 [[prototype]],[[prototype]]与__proto__意义相同

实例对象的__proto__与构造函数的prototype相同

__proto__只能读取不能修改

6  原型继承

我们现在有一个对象Person,然后创建一个构造函数Man,将Person赋值给Man的原型对象,然后再加一个属性

其中eays与head都是从Person中继承的属性,放在__proto__中。name是自己的属性

像上面那样写,如果你再创建一个对象,对象a与对象b,彼此不相互影响

原型继承不只有这一种方式,但大体上功能差不多

7  原型链与instanceof

7.1  原型链

原型链实际就是继承顺序,最大的是Object,Object再使用proto向上指会得到null,其余的原型对象使用proto均会得到上一级的原型对象

在使用属性的时候,代码会先找你当前级有没有这个属性,如果没有就去你的父类里找,如果都没有才会报错

7.2  instanceof

instanceof的左侧是 类a(或实例对象),右侧是 类b(不能是实例对象)。意思是 类a属不属于类b

我们再搞一个不属于的例子

下面这个是true

下面这个是false,这个我也不清楚为什么是false

下面这个是true

8  案例-模态框

这里我们使用面向对象的思想,这种思想也就是前端框架中组件的思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .Tip_window {
            position: relative;
            width:200px;
            height:100px;
            margin:100px auto;
            border:1px solid gray;
            padding:5px;
        }
        .Tip_header button {
            position: absolute;
            right:3px;
            top:0px;
            font-size:20px;
            border:1px solid transparent;
            background-color: transparent;
        }
        .Tip_body {
            margin-top:20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="delete">删除</button>
    <button id="login">登录</button>
</body>
<script>
    function Tip_window(Tip_header_content='',Tip_body_content='') {
        this.Tip_window = document.createElement('div')
        this.Tip_window.className = 'Tip_window'
        this.Tip_window.innerHTML = `
            <div class="Tip_header">${Tip_header_content}<button>x</button></div>
            <div class="Tip_body">${Tip_body_content}</div>
            
        `
    }
    Tip_window.prototype.open = function() {
        document.body.append(this.Tip_window)
        this.Tip_window.querySelector('.Tip_header button').addEventListener('click',() => {
            this.close()
        })
    }
    Tip_window.prototype.close = function() {
        this.Tip_window.remove()
    }

    document.querySelector('#delete').addEventListener('click',function() {
        const del_Tip_window = new Tip_window('温馨提示','您没有权限删除操作')
        del_Tip_window.open()
    })

    document.querySelector('#login').addEventListener('click',function() {
        const login_Tip_window = new Tip_window('友情提示','您还没有注册')
        login_Tip_window.open()
    })
</script>
</html>

这里使用了箭头函数,箭头函数是this指向上一级的this,由于我们的open使用function写的,所以箭头函数的this一直往上找,找到open的this,也就是Tip_window 就停了

如果使用了function,那么this则指向函数的使用者,也就是 .Tip_header button

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

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

相关文章

几何-九种二次曲面类型

&#xff08;一&#xff09;椭圆锥面 &#xff08;1&#xff09;把z平方看成一个一直变大的常数&#xff0c;那么可以看出延z方向&#xff0c;是一个一直变大的椭圆。 &#xff08;2&#xff09;把一个x或y赋予0&#xff0c;显然是一个两条关于原点对称的直线。 由上即可判断…

不小心删除了文件能恢复吗 误删除文件怎么找回

电脑是我们平时工作或者生活、学习中使用频率非常高的电子设备&#xff0c;已经成为了我们日常生活中不可或缺的一部分。删除文件是电脑使用过程中常见的一种操作&#xff0c;因为电脑的储存空间是有限的&#xff0c;我们需要对电脑数据进行清理&#xff0c;避免电脑储存空间占…

视觉检测相比于人工目视检测有哪些优势

技术的发展可以给我们带来好的结果。 是其中之一。 这在现代工业生产中非常常见。 视觉检测设备可以更好地检测生产中的错误和产品质量问题&#xff0c;提高工业生产的效率和自动化水平&#xff0c;提高工业生产的准确性&#xff0c;加快工作进度&#xff0c;节约时间&#xff…

docker too many open files解决方式

1&#xff1a;问题描述 今天在环境上执行docker ps命令失败&#xff0c;如下提示 [rootcontrol02 ~]# docker ps -a lgrep nginx Cannot connect to the Docker daemon at unix:///var/run/docker.sock, Is the docker daemon running?2&#xff1a;查看节点docker状态 看信…

【Arduino 和 HC-12 远程无线通信模块】

【Arduino 和 HC-12 远程无线通信模块】 1. 概述2. HC-12 无线通信模块3. Arduino 和 HC-123.1 原理图3.2 示例 01 – Arduino 代码3.3 AT 命令:3.4 例子 023.5 代码说明:4. HC-12 无线通信:使用加速度计的步进电机控制4.1 原理图4.2 代码说明:1. 概述 在本Arduino教程中,…

Web 开发的一些常用基础——HTTP请求、响应、Cookies、Session

HTTP 请求 进入浏览器的开发者模式下的 Network 监听组件&#xff0c;访问百度 https://www.baidu.com/&#xff0c;输入该 URL 后回车&#xff0c;观察这个过程中发生了怎样的网络请求&#xff1a; 请求&#xff0c;由客户端向服务端发出&#xff0c;可以分为 4 部分内容&…

基于DSP+FPGA的多轴运动控制平台(一)硬件设计

2实验平台总体方案与硬件设计 2.1.1 实验平台的功能需求分析 针对便于多轴运动控制技术的研究&#xff0c;培养此方面技术的人才&#xff0c;实验平台应能 对多轴运动实现高速高精度的控制效果&#xff0c;同时保证系统开放性和兼容多种算法及 参数的运行。 实验过程契合实际工…

4.16--计算机网络之HTTP篇之常见面试题篇--(复习+深入)---好好沉淀,加油呀

1.HTTP 基本概念 1.HTTP 是什么&#xff1f; HTTP 是超文本传输协议 HTTP 是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」。 「HTTP 是用于从互联网服务器传输超文本到本地浏览器的协议」&#xff0c;这种说法正确吗…

Android -- OkHttp的简单使用和封装

OkHttp的封装 由于是封装我们可以吧OKHttp和Gson给结合起来&#xff0c;那么我们在gradle文件添加以下的依赖 1 2 3 compile "com.squareup.okhttp:okhttp:2.4.0" compile com.squareup.okio:okio:1.5.0 compile "com.google.code.gson:gson:2.8.0" ①Ca…

Windows Subsystem for Android (WSA) 下载:在 Windows 11 上运行 Android 应用 (April 2023)

适用于 Android™️ 的 Windows 子系统&#xff0c;2023 年 4 月更新 (April 2023) 请访问原文链接&#xff1a;https://sysin.cn/blog/wsa/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Windows 11 上适用于 Android™ 的 …

在Windbg中设置断点追踪打开C++程序远程调试开关的模块

目录 1、Windbg动态调试 2、在Windbg中设置断点 2.1、在函数入口处设置断点 2.2、在函数内部某一行上设置断点 3、设置断点跟踪对打开远程调试开关接口的调用 3.1、编写演示代码 3.2、在Windbg中设置调用SetRemoteDebugOn接口的断点进行跟踪 4、最后 VC常用功能开发汇总…

这一次,吃了Redis的亏,也败给了GPT

关注【离心计划】&#xff0c;一起离开地球表面 背景 组内有一个系统中有一个延迟任务的需求&#xff0c;关于延迟任务常见的做法有时间轮、延迟MQ还有Redis Zset等方案&#xff0c;关于时间轮&#xff0c;这边小苏有一个大学时候做的demo&#xff1a; https://github.com/JA…

Cacti监控远程linux机器配置(被监控端)

一、被监控机安装snmp yum -y install snmp二、被监控机的配置 vi /etc/snmp/snmpd.conf做以下更改&#xff1a; 1、找到com2sec notConfigUser default public 改为&#xff1a;com2sec notConfigUser 192.168.1.1(改成监控服务器的ip) public 2、找到acce…

【hello Linux】进程概念(上)

目录 1.操作系统&#xff08;OS&#xff09; 2. 进程 2.1 基本概念 2.2 task_struct 内的属性字段 2.3 查看进程 2.4 查看进程的PID及PPID 2.5 杀死进程 2.6 以文件的方式查看进程 2.7 查看退出码 2.8 上下文数据 下面介绍两个较为方便的快捷键&#xff1a; Linux&#x1f337;…

语义分割新范式:上海 AI Lab 联合北邮、商汤提出StructToken

来源&#xff1a;投稿 作者&#xff1a;xin 编辑&#xff1a;学姐 Motivation 本文将当前语义分割的方法分为两类&#xff0c;一类是静态逐像素分类方法&#xff08;static per-pixel classification&#xff09;&#xff0c;另一类为动态逐像素分类方法&#xff08;dynamic p…

Ubuntu备份与恢复

Ref: create-backup-image-of-running-ubuntu Linux中我们有权访问所有系统文件&#xff0c;因此&#xff0c;最简单且直接的备份方法是将整个根目录打包&#xff1a; sudo su tar -cpzf /path/to/backup.tar.gz --exclude/tmp --one-file-system /其中-cpzf 表示建立压缩归档…

MQTT 持久会话与 Clean Session

1. 会话&#xff08;session&#xff09; 我们将从客户端向服务端发起 MQTT 连接请求开始&#xff0c;到连接中断直到会话过期为止的消息收发序列称之为会话。会话是服务端和客户端的一个连接&#xff0c;进行消息交互前必须先建立会话。 2. 会话的生命周期 MQTT v3.1.1会话…

003_螺旋矩阵

力扣54和59题 54.顺时针打印矩阵 题目&#xff1a; 思路&#xff1a;将矩阵分为若干层&#xff0c;首先打印最外层的元素&#xff0c;然后一直往里打印 对于每层&#xff0c;从左上方开始以顺时针的顺序遍历所有元素。假设当前层的左上角位于(top,left)&#xff0c;右下角位于…

Axios请求(对于ajax的二次封装)——Axios取消请求、请求体编码

Axios请求&#xff08;对于ajax的二次封装&#xff09;——Axios取消请求、请求体编码知识回调&#xff08;不懂就看这儿&#xff01;&#xff09;场景复现核心干货axios取消请求AbortControllerCancelToken deprecated请求体编码浏览器qs库编码数据ES6库方法node.jsQuery stri…

【神经网络】tensorflow实验3--NumPy科学计算库

目录 1. 实验目的 2. 实验内容 3. 实验过程 题目一&#xff1a; ① 代码 ② 实验结果 题目二&#xff1a; ① 代码 ② 实验结果 题目三&#xff1a; ​编辑 ① 代码 ② 实验结果 5. 实验小结 ① 实验过程中遇到了哪些问题&#xff0c;你是如何解决的&#xff1f; …