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

构造函数
	function Star (uname, age){
		this.uname = uname
		this.age = age
		
		this.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 = uname
		this.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__',指向构造函数的原型对象
	
	# prototype
		console.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 = uname
		this.age = age
	}
	let ldh = new Start('刘德华', 123)
	
	log( ldh.__proto__ === Star.prototype ) // true
	
	log( Star.prototype.__proto__ === Object.prototype ) // true
	
	log( Star.prototype.__proto__ ) // null

在这里插入图片描述

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


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

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

	Array.prototype.sum = function(){
		console.log(this) // 指向它的调用者
		let sum = 0
		for(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 指回 原来的原型对象

// 定义一个构造函数Star
  function Star(uname, age) {
    this.uname = uname
    this.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 function
  ldh.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 function

  ldh.ccc() // 我会唱歌ccc.
  ldh.ddd() // 我会唱歌ddd

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年c语言程序设计大赛

7-1 这是一道送分题 为了让更多的同学参与程序设计中来&#xff0c;这里给同学们一个送分题&#xff0c;让各位感受一下程序设计的魅力&#xff0c;并祝贺各位同学在本次比赛中取得好成绩。 注&#xff1a;各位同学只需将输入样例里的代码复制到右侧编译器&#xff0c;然后直…

【2023传智杯】第六届传智杯程序设计挑战赛AB组-ABC题解题分析详解【JavaPythonC++解题笔记】

本文仅为第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记,个人解题分析记录。 本文包含:第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解 文章目录 一.前言二.比赛题目(AB俩组)A题题目B题题目C题题目三.解题代码A题解题思路解题代码【J…

Qt 串口编程-从入门到实战

1. Qt 串口通信流程解析 1.1 串行通信和并行通信对比 并行通信适合距离较短的通信&#xff0c;且信号容易受干扰&#xff0c;成本高串口通讯-设备&#xff08;蓝牙&#xff0c; wifi&#xff0c; gprs&#xff0c; gps&#xff09; 1.2 Qt 串口通信具体流程 1. 创建 QSerial…

redis运维(二十一)redis 的扩展应用 lua(三)

一 redis 的扩展应用 lua redis加载lua脚本文件 ① 调试lua脚本 redis-cli 通过管道 --pipe 快速导入数据到redis中 ② 预加载方式 1、错误方式 2、正确方式 "案例讲解" ③ 一次性加载 执行命令&#xff1a; redis-cli -a 密码 --eval Lua脚本路径 key …

从程序员到解决方案工程师:一次跨界的职场冒险

在科技行业里&#xff0c;程序员和解决方案工程师是两个非常常见的职业。虽然这两个职业都需要一定的行业理解和问题解决能力&#xff0c;但它们的工作内容和职责却有很大的不同。 那么&#xff0c;如果一名程序员决定转行做一名解决方案工程师&#xff0c;他会经历怎样的体验…

03 _ 系统设计目标(一):如何提升系统性能?

提到互联网系统设计&#xff0c;可能听到最多的词就是“三高”&#xff0c;也就是“高并发”“高性能”“高可用”&#xff0c;它们是互联网系统架构设计永恒的主题。这里将整体探讨下高并发系统设计的目标&#xff0c;然后在此基础上&#xff0c;探讨下&#xff1a;如何提升系…

如何使用 WordPress搭建一个博客?详细搭建教程

域名服务器环境WordPress程序个人博客或企业官网等 前言&#xff1a;域名服务器是需要一些费用域名是一年服务器需要租赁3个月以上的才有备案码推荐购买一年,WordPress主题和插件有免费和付费的看自己需求 一、环境已经安装好了已经在运营项目咋就跳过从建站开始 二、进入根目录…

曲线拟合:走进数据建模中的艺术与科学

在现代科学和工程领域&#xff0c;曲线拟合是一项重要的数据分析技术&#xff0c;它可以通过数学模型来近似描述实际数据中的复杂关系。本文将详细介绍曲线拟合的基本概念、方法和应用领域&#xff0c;并探究其在数据建模中的艺术与科学。 第一节&#xff1a;曲线拟合的基本概…

IBM X3650M4安装ESXI6.5卡在/lsl_mr3.v00

环境&#xff1a;IBM X3650M4服务器双盘配置raid1&#xff0c;通过rufus制作启动U盘&#xff0c;安装VMware Vsphere 5.5系统 问题&#xff1a;卡在/lsi_mr3.v00界面无法往下运行&#xff08;两台配置一样的机器遇到同样的问题&#xff09; 解决方案&#xff1a; 直接在U盘根…

远程安全访问JumpServer:使用cpolar内网穿透搭建固定公网地址

文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 4A 规范的专业运维安全审计系统。JumpS…

pop链反序列化 [MRCTF2020]Ezpop1

打开题目 网站源码为 Welcome to index.php <?php //flag is in flag.php //WTF IS THIS? //Learn From https://ctf.ieki.xyz/library/php.html#%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E9%AD%94%E6%9C%AF%E6%96%B9%E6%B3%95 //And Crack It! class Modifier {protected …

【问题思考总结】多维随机变量函数的分布的两种情况的计算方法【离连/连连】

问题 今天做李六第一套的时候发现&#xff0c;有的时候&#xff0c;面对这种第二问的题&#xff0c;很自然地就想到了Fz&#xff08;z&#xff09;&#xff0c;然后进行化简&#xff0c;但是有的时候&#xff0c;像这道题&#xff0c;就突然发现P{XY<z}是一个非常复杂的形式…

【java】-D参数使用

在开发过程中我们使用开源工具经常会用到在启动命令时候加入一个 -Dxxx 类型的参数。到底-Dxxx是干什么用的了。 官方文档 地址&#xff1a;文档地址 java命令使用 下面是来源于官方文档&#xff1a; java [options] classname [args] java [options] -jar filename [args…

VUE留言板

效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>作业</title><styl…

Element-UI Upload 手动上传文件的实现与优化

文章目录 引言第一部分&#xff1a;Element-UI Upload 基本用法1.1 安装 Element-UI1.2 使用 <el-upload> 组件 第二部分&#xff1a;手动上传文件2.1 手动触发上传2.2 手动上传时的文件处理 第三部分&#xff1a;性能优化3.1 并发上传3.2 文件上传限制 结语 &#x1f38…

【Linux】常见指令及周边知识(一)

【Linux】常见指令及周边知识&#xff08;一&#xff09; 一、初始Linux操作系统1.Linux背景2.如何使用Linux 二、学习Linux之前的预备周边知识&#xff08;重点&#xff09;&#xff1a;1.什么叫做文件&#xff1f;2. Linux下的路径分隔符3.在Linux中为什么会存在路径&#xf…

了解抽象思维的应用与实践

目录 一、快速了解抽象思维 &#xff08;一&#xff09;抽象思维的本质理解 &#xff08;二&#xff09;系统架构中的重要性 &#xff08;三&#xff09;软件开发中抽象的基本过程思考 意识和手段 抽象的方式 抽象层次的权衡 二、业务中的应用实践 &#xff08;一&…

百度AI布局:从财报看百度的核心竞争力和未来发展方向

百度是中国最大的搜索引擎&#xff0c;也是全球领先的人工智能&#xff08;AI&#xff09;公司。百度在2023年第三季度业绩中&#xff0c;展示了其在AI领域的强劲表现和广阔前景。 百度财报透露了关于AI业务的哪些重要信息&#xff1f; 百度在2023年第三季度的财报中&#xf…

Eclipse安装EvoSuite插件

Eclipse安装EvoSuite插件 EvoSuite自动为Java类生成JUnit测试套件,针对分支覆盖率等代码覆盖率标准。为了提高可读性,生成的单元测试被最小化,并且捕获被测试类的当前行为的回归断言被添加到测试中。 EvoSuite的GitHub地址:https://github.com/EvoSuite/evosuite 📕Ecl…

MobileNets发展与总结

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 引言MobileNetsMobileNet - V1思想代码实现 MobileNet - V2思想代码实现 MobileNet - …