简单介绍一下js中的构造函数、原型对象prototype、对象原型__proto__、原型链

构造函数
	function Star (uname, age){this.uname = unamethis.age = agethis.sing = function(){ log('唱歌~') }}let xzq = new Star('薛之谦', 30)let ldh = new Star('刘德华', 20)log(ldh) // { uname: '刘德华', age: 20, sing: f }ldh.sing() // 唱歌~log(ldh.sing === xzq.sing) // false
# 实例成员:构造函数内部,通过this添加的成员,如上面的:uname、age、sing实例成员,只能通过实例化的对象来访问,如:ldh.sing()才行,Star.sing()就不行# 静态成员:在构造函数本身上,添加的成员,如:Star.sex = '男'静态成员只能通过构造函数访问,如:log(Star.sex) // 男不能通过实例化对象来访问(ldh.sex就不行)# 构造函数 new 的执行过程1、new构造函数,可以在内存中创建一个空的对象2、this就会指向刚才创建的空对象3、执行构造函数里面的代码,就给这个空对象添加属性、方法4、返回这个对象(所以构造函数里面不用return)

prototype 原型对象
# js规定,每一个构造函数都有一个prototype属性,这个prototype就是一个对象所以,我们可以把'公共的方法'添加到这个'原型对象prototype上'(原型对象prototype的作用就是共享方法)所以:公共的属性,定义到,构造函数里面公共的方法,定义到,原型对象prototype上
	function Star (uname, age){this.uname = unamethis.age = age}Star.prototype.sing = function(){ log('唱个歌') }let ldh = new Star('刘德华', 20)let xzq = new Star('薛之谦', 30)log(ldh.sing === xzq.sing) // true# console.log( ldh ) // 系统会自动,在对象的身上,添加一个'__proto__',指向构造函数的原型对象# prototypeconsole.log( ldh.__proto__ === Star.prototype ) // true
方法的查找规则:
	首先看`ldh对象`,它身上是否有sing()方法,如果有,就执行它的这个方法如果没有这个方法,但因为`__proto__`存在,就去`构造函数的原型对象prototype上`去找这个sing()方法
proto:对象原型
	每个对象身上都有一个`__proto__`对象原型,指向`指向构造函数的原型对象prototype`之所以,对象可以使用`构造函数的原型对象prototype`上的属性、方法是因为,对象有`__proto__(对象原型)`的存在`__proto__对象原型` 和 `构造函数的原型对象prototype`是等价的`__proto__对象原型`的意义:在于为对象的查找机制提供一个方向,或者说一条线路,但它是一个非标准属性,因此实际开发中,不可用使用这个属性,它只是内部指向原型对象prototype

原型链
	function Star(uname, age){this.uname = unamethis.age = age}let ldh = new Start('刘德华', 123)log( ldh.__proto__ === Star.prototype ) // truelog( Star.prototype.__proto__ === Object.prototype ) // truelog( Star.prototype.__proto__ ) // null

在这里插入图片描述

原型链的查找规则
	当访问一个对象的属性(方法)时,首先看这个对象本身有没有该属性,如果没有,就查找它的原型(也就是`__proto__对象原型`,指向的是,`prototype原型对象`)如果还没有,就查找,原型对象的原型(Object的原型对象)依次类推,直到找到Object为止(null)`_proto_对象原型`的意义:在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype

可以通过原型对象,为JavaScript的(原来的)内置对象,进行扩展自定义的方法

如下:通过数组的原型对象,添加求和的方法

	Array.prototype.sum = function(){console.log(this) // 指向它的调用者let sum = 0for(let i=0; i<this.length; i++){sum += this[i]}return sum}let arr = [1, 2, 3] // let arr = new Array(1,2,3)console.log(arr.sum()) // 6

constructor 指回 原来的原型对象

// 定义一个构造函数Starfunction Star(uname, age) {this.uname = unamethis.age = age}Star.prototype.sing = function () {console.log('唱歌~~')}// 对象.xxx:这样是向对象添加xxx属性,并不会覆盖这个对象Star.prototype.song = function () {console.log("我会唱歌")}Star.prototype.dance = function () {console.log("我会跳舞")}// 对象 = {}:这样是重新给对象赋值,会把原来的对象覆盖掉// 其实这里就是把 构造函数Star 的原型对象prototype 覆盖了,但是并不会影响uname、age在构造函数中定义的属性Star.prototype = {aaa() { console.log("我会唱歌aa") },bbb() { console.log("我会唱歌bbb") },// ....// ....// ....}// 手动用 constructor 指回原来的原型对象Star.prototype = {constructor: Star, // 指回原来的原型对象ccc() { console.log("我会唱歌ccc") },ddd() { console.log("我会唱歌ddd") },// ....// ....// ....}let ldh = new Star('刘德华', 123)console.log('ldh=', ldh) // ldh= Star {uname: '刘德华', age: 123}console.log('ldh.uname=', ldh.uname) // ldh.uname= 刘德华console.log('ldh.age=', ldh.age) // ldh.age= 123// ldh.sing() // Uncaught TypeError: ldh.sing is not a functionldh.song() // Uncaught TypeError: ldh.song is not a function// ldh.aaa() // Uncaught TypeError: ldh.aaa is not a function// ldh.bbb() //  Uncaught TypeError: ldh.bbb is not a functionldh.ccc() // 我会唱歌ccc.ldh.ddd() // 我会唱歌ddd

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

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

相关文章

MYSQL基础之【创建数据表,删除数据表】

文章目录 前言MySQL 创建数据表通过命令提示符创建表使用PHP脚本创建数据表 MySQL 删除数据表在命令提示窗口中删除数据表使用PHP脚本删除数据表 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博主…

5 个适用于 Windows 的顶级免费数据恢复软件

对于计算机来说&#xff0c;最重要的是用户数据。除了您的数据之外&#xff0c;有关计算机的其他所有内容都是可替换的。这三个是数据丢失的最常见原因&#xff1a; 文件/文件夹删除丢失分区分区损坏 文件/文件夹删除 文件/文件夹删除是最常见的数据丢失类型。大多数时候&am…

Proteus仿真--高仿真数码管电子钟

本文介绍基于数码管的高仿真电子钟&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 本设计中80C51单片机作为主控&#xff0c;用74LS138作为数码管显示控制&#xff0c;共有4个按键&#xff0c;其中分别用于12/24小时显示切换、时间设置、小时加减控制和…

BUUCTF [MRCTF2020]Ez_bypass 1

题目环境&#xff1a;F12查看源代码 I put something in F12 for you include flag.php; $flagMRCTF{xxxxxxxxxxxxxxxxxxxxxxxxx}; if(isset($_GET[gg])&&isset($_GET[id])) { $id$_GET[id]; $gg$_GET[gg]; if (md5($id) md5($gg) && $id ! $gg) { …

快速压缩:迅速减小PDF文件大小的步骤与技巧

虽然png图片格式是一种无损压缩格式&#xff0c;但是png图片的内存大小也是比较大的&#xff0c;而且兼容性上也没有jpg图片好&#xff0c;许多平台推荐的也都是jpg格式&#xff0c;所以当我们需要把png转jpg格式的时候&#xff0c;就需要用到图片格式转换器&#xff0c;今天推…

【数据结构】树与二叉树(廿五):树搜索指定数据域的结点(算法FindTarget)

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲3. 搜索指定数据域的结点a. 算法FindTargetb. 算法解析c. 代码实现a. 使用指向指针的指针b. 直接返回找到的节点 4. 代码整合 5.3.1 树的存储结构 5.…

openEuler Linux 部署 FineBi

openEuler Linux 部署 FineBi 部署环境 环境版本openEuler Linux22.03MySQL8.0.35JDK1.8FineBi6.0 环境准备 升级系统内核和软件 yum -y updatereboot安装常用工具软件 yum -y install vim tar net-tools 安装MySQL8 将 MySQL Yum 存储库添加到系统的存储库列表中 sudo…

DeepWalk代码实战-维基百科词条图嵌入可视化

准备工作&#xff1a; 从爬虫网站中爬取维基百科See also关联词条&#xff1a;https://densitydesign.github.io/strumentalia-seealsology/ 维基百科网站&#xff1a;https://www.wikipedia.org/ 爬取过程&#xff1a; 下载 tsv 文件&#xff1a; import networkx as nx # 图…

用友NC word.docx接口存在任意文件读取漏洞 附POC

@[toc] 用友NC word.docx接口存在任意文件读取漏洞 附POC 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使…

【anaconda】numpy.dot 向量点乘小技巧

假设向量A[1,1], 向量B[2,3]。如果想知道他们的内积就可以输入如下代码: 当然&#xff0c;如果是两个列向量相乘&#xff0c;肯定是不对的 但是如果没有维度也一样可以求得内积&#xff0c;而且结果不会套在列表里

二年级 最少需要几个刻度?

娃二年级题目&#xff1a;请你设计一把尺子&#xff0c;用这把尺子一次能画出 1~8厘米八条不同长度的线段。最少需要几个刻度&#xff1f; 答&#xff1a;最少需要 5 个刻度&#xff1b; 方案有&#xff1a; 0, 1, 2, 5, 8 0, 1, 3, 7, 8 0, 1, 4, 6, 8 0, 1, 5, 6, 8 0, 1, 5…

Java中的异常语法知识居然这么好玩!后悔没有早点学习

学习异常后&#xff0c;发现异常的知识是多么的吸引人&#xff01;不仅可以用来标记错误&#xff0c;还可以自己定义一个异常&#xff0c;用来实现自己想完成的业务逻辑&#xff0c;接下来一起去学习吧 目录 一、异常的概念及体系结构 1.异常的概念 2.异常的体系结构 3.异常…