当前位置: 首页 > news >正文

JavaScript从入门到精通系列第二十一篇:JavaScript中的原型对象详解

文章目录

前言

一:原型对象

1:什么是原型对象

2:原型对象的作用

 3:通过原型对象实现工厂方法

二:原型对象咋说

 1:in和原型对象

2:hasOwnProperty()函数

3:hasOwnProperty()来历

   


前言

        我们讲,尽量不要把全局作用域当中声明变量。将函数在全局作用域中污染了全局作用域的命名空间。

function fun(){alert("hello大家好我是:"+this.name);
}

        定义在全局作用域当中是非常不安全的,后边容易把前边的给覆盖掉。那么我们应该怎么办呢?

一:原型对象

1:什么是原型对象

        我们没创建一个函数对象,解析器都会往函数中添加一个属性prototype。只要是函数,不论是构造函数还是普通函数,都会解析器都会放进去这个东西,每一个函数都会有属于他自己的prototype

        证明一下这个东西:

function Person(){}console.log(Person.prototype)

        这个prototype属性对应了一个对象,他就是一个原型对象。 

2:原型对象的作用

        原型对象是为了构造函数而生,对于普通函数,毛用没有。

       构造函数对象和通过构造函数对象创建出来的任何一个对象,两者prototype属性指向的对象是一个,并且这个属性名称叫__proto__,哈哈,这倒霉名字。

        值得注意的是,构造函数中的指向这个原型对象的属性是prototype,而在基于构造函数创建出来的对象中这个属性是__proto__,这是一个隐藏属性

        也就是说:Person.prototype == per.__proto__   结果为true

        证明这件事情:

function Alibaba(){}var ali = new Alibaba();
console.log(ali.__prototype__ == Alibaba.__prototype__);

        原型对象就相当于这个对象,或者叫这个类的一个公共区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中公共的东西放到这个原型对象当中。

        当我们访问对象的一个属性或者方法时,会先在对象自身中找,如果有则直接使用,如果没有直接去原型对象中找

        证明这件事情:

function Person(){}
Person.prototype.a = 123;console.log(Person.a);

        如果person对象当中也有这个属性呢?那么会直接在对象中找。

        说到这里,我们就非常明显了,我们应该把sayName这个方法放到原型对象当中这个方式是最好的。

 3:通过原型对象实现工厂方法

function Person(){ }Person.prototype.sayName = function (){console.log(this);console.log(this.name)
}function createPerson (name,age,gender){var per = new Person();per.name = name;per.age = age;per.gender = gender;return per;
}
var per = createPerson("悟空",18,1);
per.sayName();

        日后,我们创建构造函数或者叫类的时候,我们可以将这些对象共有的属性和方法统一添加到构造函数的原型对象当中,这样不会为了每一个对象添加,也不会影响全局作用域,就可以让每一个对象都可以使用这些属性和方法了。

二:原型对象咋说

 1:in和原型对象

function Person(){}Person.prototype.name = "";var per= new Person();console.log("name" in per);

        使用in检查对象当中是否含有某个属性的时候,如果这个属性在原型对象当中依旧会返回ture。

        证明这件事情:

2:hasOwnProperty()函数

        每个对象都有这个函数。

        使用这个函数可以排除原型对象的干扰,从而检查对象自身的属性

        证明这件事情:

3:hasOwnProperty()来历

        这个函数位于原型对象当中。但是还是有一个问题,原型对象当中我们也没加,那到底是咋进去的呢?

        原型对象也是对象,所以原型对象也有原型对象。当我们使用一个对象的属性或者方法时,会现在自身中进行寻找,如果自身中有则直接使用。如果自身中没有则去原型对象中去寻找。如果原型对象中有则使用,如果原型对象中也没有则去原型对象的原型对象去寻找。        

        直到找到Object对象的原型,Object对象的原型没有原型,如果Object对象的原型中依旧没有,那就返回undefined。

function Person(){}Person.prototype.name = "";var per= new Person();console.log(per.__proto__.hasOwnProperty("hasOwnProperty"));
console.log(per.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
console.log(per.__proto__.__proto__.__proto__);

           per.__proto__是Object类型的对象。per.__proto__.__proto__是这个Object对象的原型对象,这样操作原型对象也就原型到头了

相关文章:

JavaScript从入门到精通系列第二十一篇:JavaScript中的原型对象详解

文章目录 前言 一:原型对象 1:什么是原型对象 2:原型对象的作用 3:通过原型对象实现工厂方法 二:原型对象咋说 1:in和原型对象 2:hasOwnProperty()函数 3:hasOwnProperty()来…...

app.json: [“usingComponents“][“van-icon“]: “@vant/weapp/icon/index“ 未找到

维护一个微信小程序的项目,运行报错如下: app.json: ["usingComponents"]["van-icon"]: "vant/weapp/icon/index" 未找到解决办法 我只说我用到的,如果解决不了你的问题,详细的可以参照官方文档&…...

Kotlin中循环语句

在Kotlin中,循环语句有多种形式,包括while循环、do-while循环、for循环等。下面将逐个说明每种形式的使用。 while循环: var n: Int 5 while (n > 0) {println("n$n")n-- }上述代码中,使用while循环打印n的值&…...

Java String之正则表达式

Java String之正则表达式 导言 最近做项目时,遇到了限制输入字符格式的问题,采用了Java String的正则表达式,下面针对正则表达式使用进行概述 正则表达式 正则表达式类似可以通俗的理解为字符模板,通过符号的方式进行表述&…...

Kotlin 协程再探之为什么使用协程反而更慢了?

前言 在几个月前,我曾经写了一篇文章,Kotlin 协程中的并发问题:我明明用 mutex 上锁了,为什么没有用?,讲述在某次 debug 某个问题时,发现同事写的 Koltin 协程某个不恰当的地方,并最…...

Hadoop3教程(十六):MapReduce中的OutputFormat

文章目录 (105)OutputFormat概述(106)自定义OutputFormat案例需求分析(107/108)自定义OutputFormat案例实现自定义Mapper自定义Reducer自定义OutputFormatDriver 参考文献 (105)Outp…...

通过表查询 sm37 排程运行情况 JOB 数据保存在表TBTCP 和 TBTCO中

sm36 设置排程 sm37 查看排程 se11 查表 Values for TBTCO-STATUS: A - Cancelled F - Completed P - Scheduled R - Active S - Released JOB 数据保存在表TBTCP 和 TBTCO中 参考 https://blog.51cto.com/u_15680210/5757746?articleABtest0 https://answers.sap.co…...

append_ocr_trainf

read_image (Image, D:/图像文件/字符识别/1-1.bmp) access_channel (Image, Image1, 1) * draw_rectangle2 (3600, Row, Column, Phi, Length1, Length2) gen_rectangle2 (Rectangle, 96.0436, 715.9526, 0.0173917050943654, 110.186941, 18.041084) reduce_domain (Image1, …...

小程序原生代码转uniapp

写了一份小程序原生代码,想转为uniapp 再转为其他平台发布 1、在命令行里,运行【 npm install miniprogram-to-uniapp -g 】进行安装,因为这个包是工具,要求全局都能使用&#x…...

云原生微服务 第五章 Spring Cloud Netflix Eureka集成负载均衡组件Ribbon

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 文章目录 系列文章目录[TOC](文章目录) 前言1、负载均衡1.1、服务端负载均衡1.2、…...

七大排序 (9000字详解直接插入排序,希尔排序,选择排序,堆排序,冒泡排序,快速排序,归并排序)

一:排序的概念及引入 1.1 排序的概念 1.1 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 稳定性:假定在待排序的记录序列中,存在…...

一、nginx配置

一、nginx配置 配置简介 1)nginx相关目录 工作目录:/etc/nginx 执行文件:/usr/sbin/nginx 日志目录:/var/log/nginx 启动文件:/etc/init.d/nginx web目录:/var/www/html/,首页文件是index.ng…...

win32汇编-LEA指令是将一个内存地址加载到一个寄存器中

LEA (Load Effective Address) 指令是用来将一个内存地址加载到一个寄存器中的指令。 其语法为: lea destination, source 其中,destination 是目标寄存器,source 是一个内存地址(即一个存储器操作数)。 举个例子…...

leetcode做题笔记189. 轮转数组

给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6,7,1,2,3,4…...

数据库第七章作业

本篇用于日常记录和分享 第7章作业.xls 题量: 25 满分: 100 一. 单选题(共25题) 1. (单选题)二级封锁协议不能保证消除( )这一不一致现象。 A. 读取脏数据B. 死锁C. 不可重复读D. 丢失修改 我的答案: C :不可重复读; 2. (单…...

使用服务器训练模型的注意事项

一、图像展示 1.1、用VS Code远程连接服务器时,当我们想用matplotlib库来进行图像展示的时候,需要设置DISPLAY变量。 # 用终端工具(XShell)SSH远程服务器,在终端上输入下列语句 # 如果使用了anaconda的虚拟环境&…...

Linux性能优化--性能追踪3:系统级迟缓(prelink)

12.0 概述 本章包含的例子说明了如何用Linux性能工具寻找并修复影响整个系统而不是某个应用程序的性能问题。阅读本章后,你将能够: 追踪是哪一个进程导致了系统速度的降低。用strace调查一个不受CPU限制的进程的性能表现。用strace调查一个应用程序是如…...

SpringBoot2.x简单集成Flowable

环境和版本 window10 java1.8 mysql8 flowable6 springboot 2.7.6 配置 使用IDEA创建一个SpringBoot项目 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.…...

微信小程序一键获取位置

需求 有个表单需要一键获取对应位置 并显示出来效果如下&#xff1a; 点击一键获取获取对应位置 显示在 picker 默认选中 前端 代码如下: <view class"box_7 {{ showChange1? change-style: }}"><view class"box_11"><view class"…...

Linux性能优化--使用性能工具发现问题

9.0 概述 本章主要介绍综合运用之前提出的性能工具来缩小性能问题产生原因的范围。阅读本章后&#xff0c;你将能够&#xff1a; 启动行为异常的系统&#xff0c;使用Linux性能工具追踪行为异常的内核函数或应用程序。启动行为异常的应用程序&#xff0c;使用Linux性能工具追…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...