当前位置: 首页 > 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性能工具追…...

【Proteus仿真】【STM32单片机】路灯控制系统

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器&#xff0c;使用LCD1602显示模块、人体红外传感器、光线检测模块、路灯继电器控制等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示时间、工作模…...

Flutter笔记:发布一个Flutter头像模块 easy_avatar

Flutter笔记 发布一个头像Flutter模块 easy_avatar 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/1339…...

标准化助推开源发展丨九州未来参编开源领域4项团体标准正式发布

在数字中国及数字经济时代的大背景下&#xff0c;开源逐步成为各行业数字化发展的关键模式。在开源产业迅速发展的同时&#xff0c;如何评估、规范开源治理成为行业极度关注的问题。 近日&#xff0c;中电标2023年第27号团体标准公告正式发布&#xff0c;九州未来作为起草单位…...

ChatGPT对于留学生论文写作有哪些帮助?

2022年11月&#xff0c;OpenAI公司的智能聊天产品ChatGPT横空出世&#xff0c;并两个月之内吸引了超过1亿用户&#xff0c;打破了TikTok&#xff08;抖音国际版&#xff09;9个月用户破亿的纪录。 划时代的浪潮 ChatGPT的火爆立即引起了全球关注并成为热门话题&#xff0c;它…...

【yolov8目标检测】使用yolov8训练自己的数据集

目录 准备数据集 python安装yolov8 配置yaml 从0开始训练 从预训练模型开始训练 准备数据集 首先得准备好数据集&#xff0c;你的数据集至少包含images和labels&#xff0c;严格来说你的images应该包含训练集train、验证集val和测试集test&#xff0c;不过为了简单说…...

【vue+nestjs】gitee第三方授权登录【超详细】

项目场景&#xff1a; 前端使用vue3ts 后端使用nestjs 1.配置gitee第三方设置 1.找到账号设置 2.找到数据管理下的第三方应用 3.点击创建&#xff0c;进入配置 2.代码演示 特别注意: 如果你跟我一样是前后端分离的模式开发的&#xff0c;应用回调地址填写的应该是你的前…...

node 第八天 使用前后端不分离的方式实现cookie登录验证

实现cookie登录, 第一次登录成功后, cookie由服务端设置并保存在客户端, 后续访问在cookie过期前 (过期时间由后端设置) 将不需要登录cookie出现的背景是 HTTP是无连接的&#xff0c;无状态的, 半双工(http2.0以下), 所以需要一个媒介存在http中, 服务端可以操作, 客户端也可以…...

Ubuntu系统如何进行网络连接-连接电脑局域网-物联网开发-Ubuntu系统维护

一、前言 在Ubuntu系统的维护中&#xff0c;我们常常需要对VMware中的Ubuntu虚拟机配置网络连接&#xff0c;以连接服务器下载或安装软件包以及进行网络通信等。 基于上述问题&#xff0c;本文将着重分享Ubuntu配置网络链接的若干方法。 二、网络连接模式 打开VM&#xff0c;右…...

STL库——Vector常见使用接口

一、介绍 1. vector是表示可变大小数组的序列容器&#xff0c;就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素 进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的&#xff0…...

将文件(File 对象)分割成多个块

如果要将文件&#xff08;File 对象&#xff09;分割成多个块&#xff0c;可以使用 JavaScript 中的 Blob 和 File 构造函数以及数组的 slice 方法。以下是一个示例&#xff1a; // 创建一个 File 对象&#xff0c;例如从文件输入框获取的文件 const file document.getElemen…...

网站首页关键字方案/百度seo引流怎么做

一&#xff0e;创建一张HTML页面 初学者创建一张html页面建议借助工具&#xff0c;例如Dreamweaver可视化编辑器。 二&#xff0e;<Script>标签解析 <script>xxx</script>这组标签&#xff0c;是用于在html页面中插入js的主要方法。它主要有以下几个属性&…...

动易网站建设/有哪些网络推广平台

概述&#xff1a;点语法的作用&#xff0c;property synthesize 如何使用&#xff0c;编译器如何对其进行展开&#xff0c;property的其它属性1&#xff09;点语法的作用&#xff1a;个人觉得点语法的引入就是为了方便不写[]&#xff0c;以下面代码为切入点&#xff0c;介绍int…...

网站排名软件推荐/免费网站推广软件下载

根据 3 月 2 日&#xff0c;Hired 发布的《2019 软件工程师状态》报告中指出&#xff0c;具有 Go 经验的候选人是迄今为止最具吸引力的&#xff0c;平均每位求职者会收到9 份面试邀请。 海风教育在线辅导0元一对一试听课等你来领取&#xff0c;领取课程方法&#xff1a; 1、私…...

青岛网站搭建公司/蔡甸seo排名公司

TSP旅行售货员问题-回溯法 最近比较颓废&#xff0c;考试实在是太多了&#xff0c;月考简直了。对转专业的学生太不友好了。一大堆公共课简直消磨了我对编程的热情。 今天刚好去听了节一直逃课的晚课&#xff0c;老师找我谈了谈&#xff0c;没有怪我。我也开始思考我目标是什么…...

网站备案人授权/谷歌浏览器最新版本

1安装包解压 2解压后&#xff0c;打开setup.exe文件&#xff0c;选择安装&#xff0c;显示如图&#xff1a; 3选择全新安装或向现有安装添加功能 4点确定 5输入 企业版序列号&#xff1a;R88PF-GMCFT-KM2KR-4R7GB-43K4B 6点我接受许可条款&#xff0c;点下一步 7点安装&#xf…...

h5网站建设哪家好/六种常见的网络广告类型

众所周知&#xff0c;windows 2003远程终端服务基于默认端口3389。入侵者一般先扫描主机开放端口&#xff0c;一旦发现其开放了3389端口&#xff0c;就会进行下一步的入侵&#xff0c;所以我们只需要修改该务默认端口就可以避开大多数入侵者的耳目。 步骤&#xff1a;打开“开始…...