JS进阶-原型

原型

原型就是一个对象,也称为原型对象

构造函数通过原型分配的函数是所有对象所共享的

JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象

这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存

作用:可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法

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

实例对象可直接访问原型对象中函数与分析

先找实例对象属性或函数,再找原型对象中属性或函数

构造函数和原型对象里面的this指向实例化的对象

console.dir()方法可以在控制台显示指定javascript对象的属性。打印出该对象的所有属性和属性值
    function Star(uname, age) {this.uname = unamethis.age = age}Star.prototype.sing = function () {console.log('唱歌')}const ldh = new Star('刘德华', 55)const zxy = new Star('张学友', 58)ldh.sing()zxy.sing()console.log(ldh.sing === zxy.sing)//true

 公共的属性写到构造函数里面,公共的方法写到原型对象身上。

案例:数组扩展方法

    const arr = [1, 2, 3]Array.prototype.sum = function () {return this.reduce((prev, item) => prev + item, 0)}console.log(arr.sum())

constructor属性

每个原型对象和对象原型__proto__里面都有个constructor属性(constructor构造函数)

作用:该属性指向该实例对象/原型对象的构造函数,简单理解就是指向我的爸爸,我是有爸爸的孩子

使用场景:如果有多个对象的方法,我们可以给原型对象采取对象形式赋值。

但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不再指向当前构造函数了

此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数

    function Star() { }Star.prototype = {constructor: Star,sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')}}

对象原型__proto__

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在。

注意:

__proto__在实例对象里面

__proto__是JS非标准属性

[[prototype]]和__proto__意义相同

只读的,只能获取不能赋值

用来表明当前实例对象指向哪个原型对象prototype

__proto__对象原型里面也有一个constructor属性,指向创建该实例对象的构造函数

原型继承

继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性。字面量对象继承,构造函数实例化对象继承

    const Person = {eyes: 2,head: 1}function Man() {}Man.prototype = PersonMan.prototype.constructor = Manconst pink = new Man()console.log(pink)

问题:继承方法时会混乱,会覆盖不独立

    function Person() {this.eyes = 2this.head = 1}function Woman() {}Woman.prototype = new Person()Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('宝贝')}const red = new Woman()console.log(red)

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结果关系称为原型链。__proto__属性链状结构

查找规则

1.当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。

2.如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)

3.如果还没有就查找原型对象的原型(Object的原型对象)

4.依次类推一直找到Object为止(null)

5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线

6.可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

Array instanceof Object //true,万物皆为对象

案例:模态框封装

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><button id='delete'>删除</button><button id='login'>登录</button><script>function Model(title = '', message = '') {this.modelBox = document.createElement('div')this.modelBox.className = 'model'this.modelBox.innerHTML = `<div class="header">${title}<i>x</i></div><div class="body">${message}</div>`console.log(this.modelBox)}//new Model('温馨提示', '您没有删除权限')//new Model('友情提示', '您还没登录呢')Model.prototype.open = function () {const box = document.querySelector('.model')box && box.remove()document.body.append(this.modelBox)this.modelBox.querySelector('i').addEventListener('click', () => {this.close()})}document.querySelector('#delete').addEventListener('click', () => {const del = new Model('温馨提示', '您没有删除权限')del.open()})document.querySelector('#login').addEventListener('click', () => {const login = new Model('友情提示', '您还没登录呢')login.open()})Model.prototype.close = function () {this.modelBox.remove()}</script>
</body>

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

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

相关文章

不标准的 json 格式的字符串如何转为标准的(json字符串属性名不带双引号如何转

背景 不规范的 json 字符串例如 属性名不带双引号 {name:"abc"}属性名带单引号而不是双引号 {name:"abc"}属性值该用双引号的时候用了单引号 {"name":abc}还有一种情况就是以上情况的混合 所谓规范的json字串就是属性名要用双引号&#xf…

【Linux】信号屏蔽与信号捕捉的原理与实现(附图解与代码)

这一篇的篇幅可能有点长&#xff0c;如果已经了解了以下两个知识点的同学可以自行跳到第三部分——信号屏蔽的实现。 不太了解的同学希望你们能够静下心来看完&#xff0c;相信一定会有不小的收获。那么话不多说&#xff0c;我们这就开始啦&#xff01;&#xff01;&#xff0…

代码随想录算法训练营第四十六天 | 518. 零钱兑换 II、377. 组合总和 Ⅳ

518. 零钱兑换 II 视频讲解&#xff1a;动态规划之完全背包&#xff0c;装满背包有多少种方法&#xff1f;组合与排列有讲究&#xff01;| LeetCode&#xff1a;518.零钱兑换II_哔哩哔哩_bilibili 代码随想录 &#xff08;1&#xff09;代码 377. 组合总和 Ⅳ 视频讲解&…

JOSEF约瑟 闭锁继电器 LB-7 YDB-100 100V 50HZ 控制断路器的合闸或跳闸

闭锁继电器LB-7导轨安装名称:闭锁继电器型号:LB-7闭锁继电器额定电压100V功率消耗≤10VA触点容量220V1.5A40W返回系数≥0.8 LB-1A、LB-1D、DB-1、HBYB-102/D YDB-100、HLO、DB-100、LB-7型闭锁继电器 一、用途 LB-7型闭锁继电器(以下简称继电器)用于发电厂及变电所内高压母线…

Electron笔记

基础环境搭建 官网:https://www.electronjs.org/zh/ 这一套笔记根据这套视频而写的 创建项目 方式一: 官网点击GitHub往下拉找到快速入门就能看到下面这几个命令了 git clone https://github.com/electron/electron-quick-start //克隆项目 cd electron-quick-start //…

提取歌曲伴奏?用对软件一键帮你搞定~

相信大家经常想获取某首歌曲的伴奏&#xff0c;但是不知从何下手&#xff0c;今天这篇教程给大家分享一个超神奇软件&#xff0c;一键提取歌曲伴奏&#xff01; 第一步&#xff1a;打开【音分轨】APP&#xff0c;进入首页点击【人声分离】 第二步&#xff1a;选择导入方式&…

SpringBoot 中使用JPA

最近忙里偷闲&#xff0c;想写一点关于JPA的东西&#xff0c;另外也加深下对JPA的理解&#xff0c;才有了此篇博文。 一、JPA JPA &#xff08;Java Persistence API&#xff09;Java持久化API&#xff0c;是一套Sun公司Java官方制定的ORM 规范&#xff08;sun公司并没有实现…

为什么mac上有的软件删除不掉?

对于Mac用户来说&#xff0c;软件卸载通常是一个相对简单的过程。然而&#xff0c;有时你可能会发现某些软件似乎“顽固不化”&#xff0c;即使按照常规方式尝试卸载&#xff0c;也依然存在于你的电脑上。这到底是为什么呢&#xff1f;本文将探讨这一问题的可能原因。 1.卸载失…

C#制做一个 winform下的表情选择窗口

能力有限&#xff0c;别人可能都是通过其他方式实现的&#xff0c;我这里简单粗暴一些&#xff0c;直接通过点击按钮后弹出个新窗体来实现。 1、先在form1上增加一个toolstrip控件&#xff0c;再增加个toolstripbutton按钮&#xff0c;用来点击后弹出新窗体&#xff0c;如图&a…

智能井盖传感器:城市安全卫士

随着城市人口的不断增加和城市基础设施的不断发展&#xff0c;井盖作为城市道路和排水系统的重要组成部分&#xff0c;承担着确保城市安全和便利性的关键角色。然而&#xff0c;井盖在日常使用中常常面临倾斜、水浸和翻转等问题&#xff0c;这些问题可能导致交通阻塞、行人坠井…

小谈设计模式(20)—组合模式

小谈设计模式&#xff08;20&#xff09;—组合模式 专栏介绍专栏地址专栏介绍 组合模式对象类型叶节点组合节点 核心思想应用场景123 结构图结构图分析 Java语言实现首先&#xff0c;我们需要定义一个抽象的组件类 Component&#xff0c;它包含了组合节点和叶节点的公共操作&a…

Windows配置ADB工具

一、目的 在进行嵌入式开发时&#xff0c;我们经常使用ADB工具登录到开发板上进行命令操作&#xff0c;本篇我们介绍如何在windows平台配置ADB环境。 二、实战 1.下载adb工具包​​​​​​​https://developer.android.com/studio/releases/platform-tools?hlzh-cnhttps://d…

任务工单发送失败重试方案设计

需求背景&#xff1a; 该系统为一个工单系统&#xff0c;其中任务工单为该系统中的一个模块&#xff1b;任务工单它是需要周期性调度的一种任务类型&#xff1b;可以按照用户配置的时间周期定时性触发的。由于任务需要发送到对应的工作人员上&#xff0c;所以这里需要先对员工进…

DM宣传单制作,利用在线模板,快速替换文字

如果你需要制作一批宣传单&#xff0c;但是时间很紧&#xff0c;而且没有专业的设计人员协助&#xff0c;那么你可以选择使用在线模板来快速制作宣传单。本文将介绍如何使用乔拓云平台&#xff0c;快速制作宣传单的方法。 步骤一&#xff1a;选择适合的在线制作工具 首先&…

Leetcode hot 100之前缀和、差分数组、位运算

目录 差分数组-区间增减 和为K的子数组&#xff1a;前缀和 哈希表优化 除自身以外数组的乘积&#xff1a;前后缀区间 位运算 异或&#xff1a;同为0&#xff0c;不同为1 136. 只出现一次的数字&#xff1a;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现2次…

【Unity3D编辑器开发】Unity3D编辑器开发基础性框架结构【全面总结】

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 嗨&#xff0c;大家好&#xff0c;我是恬静的小魔龙。 同学们…

Spring MVC 中的国际化和本地化

Spring MVC 中的国际化和本地化 国际化&#xff08;Internationalization&#xff0c;简称i18n&#xff09;和本地化&#xff08;Localization&#xff0c;简称l10n&#xff09;是构建多语言应用程序的重要概念。Spring MVC提供了丰富的支持&#xff0c;使开发人员能够轻松地处…

Spark基础

一、spark基础 1、为什么使用Spark Ⅰ、MapReduce编程模型的局限性 (1) 繁杂 只有Map和Reduce两个操作&#xff0c;复杂的逻辑需要大量的样板代码 (2) 处理效率低 Map中间结果写磁盘&#xff0c;Reduce写HDFS&#xff0c;多个Map通过HDFS交换数据 任务调度与启动开销大 (…

前后端通信到底是怎样一个过程

前后端通信是怎样 前言&#xff1a;Http协议 超文本传输协议 规定&#xff1a;每一次前后端通信&#xff0c;前端需要主动向后端发出请求&#xff0c;后端接收到前端的请求后&#xff0c;可以给出响应 1、Http报文 浏览器向服务器发送请求时&#xff0c;请求本身就是信息&…

【gcc】RtpTransportControllerSend学习笔记 1

本文是woder大神 的文章的学习笔记。主要是大神文章: webrtc源码分析(8)-拥塞控制(上)-码率预估 的学习笔记。大神的webrtc源码分析(8)-拥塞控制(上)-码率预估 详尽而具体,堪称神作。因为直接看大神的文章,自己啥也没记住,所以同时跟着看代码。跟着大神走一遍,不求甚解,…