学习记录之原型,原型链

devtools/2025/1/22 19:48:25/

构造函数创建对象

Person和普通函数没有区别,之所以是构造函数在于它是通过new关键字调用的,p就是通过构造函数Person创建的实列对象

	function Person(age, name) {this.age = age;this.name = name;}let p = new Person(18, '张三');

prototype

prototype n. 原型;雏形;最初形态
在JavaScript中,prototype属性是每个函数对象自带的一个属性,它是一个指针,在内存中保存的是这个对象的引用,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。当通过构造函数创建一个新的对象时,新对象内部会有一个内部属性([[Prototype]]),[[Prototype]]被设置为构造函数的prototype属性所指向的对象,也就是说jsp.__proto__ === Person.prototype为true

构造函数与原型

当定义了一个函数并且打算用它作为构造函数来创建对象时,这个函数的prototype属性就变得很重要了,所有通过这个构造函数创建的对象都会共享prototype对象上的属性和方法
在构造函数的prototype属性上添加到属性和方法,所有由这个构造函数创建的对象实例都可以访问这些属性和方法

	function Person(age, name) {this.age = age;this.name = name;}Person.prototype.say = function(){console.log(`i am ${this.name},age: ${this.age}`)}let p = new Person(18, '张三');let p1 = new Person(34, '李四');console.log(p,p1)console.log(p.say === p1.say)//true

在这里插入图片描述

原型链

JavaScript使用原型链实现了继承,每个对象都有一个内部链接到它的原型对象,而原型对象本身也是一个对象 ,也有自己的原型,这种链式关系一直持续到一个原型为null的对象为止,这标志着原型链的终点

__proto__与[[prototype]]与prototype

__proto__:每个JavaScript对象都有的一个属性,它指向该对象的原型,它是一个访问器属性(getter/setter),它提供了对对象内部属性的访问,指向对象的原型
prototype:每个函数对象都有的属性,它指向一个对象,这个对象会被分配给所有通过这个函数创建的对象的__proto__
[[prototype]]:是每个对象内部的一个属性,指向该对象的原型

实例与原型

当在实例上寻找一个属性没找到时,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,直到顶层为null为止

	function Person(age, name) {this.age = age;this.name = name;}Person.prototype.say = function(){console.log(`i am ${this.name},age: ${this.age}`)}Person.prototype.a = 100let p = new Person(18, '张三');p.a = 'a property'console.log(p.a, 'first')delete p.aconsole.log(p.a,'second')

console.log(p.a, ‘first’)打印的a是字符串’a property’,因为这个属性存在于这个实例本身,console.log(p.a,‘second’)打印的a是100,因为上一句代码删除了实例的a属性,所以在这个实例本身是找不到的,所以会去这个实例的原型p.__proto__上找,找到了a属性,打印,如果没找到就到原型的原型上去找

原型的原型

打印的p.proto,可以看到对象的原型也是一个对象,既然是对象就可以通过new Object()的方式创建,其实原型对象就是通过Object构造函数生成的,而实例的__proto__指向构造函数的prototype

在这里插入图片描述

Object.getPrototypeOf()

返回指定对象的原型,所以就有

	function Person(age, name) {this.age = age;this.name = name;}Person.prototype.say = function(){console.log(`i am ${this.name},age: ${this.age}`)}Person.prototype.a = 100let p = new Person(18, '张三');console.log(Object.getPrototypeOf(p) == Person.prototype)

http://www.ppmy.cn/devtools/152671.html

相关文章

(RAG系列) FastGPT通过API调用工作流问答

FastGPT通过API调用工作流问答 版本使用说明代码模板 版本 fastgpt v4.8.10 使用说明 注意两个参数 stream 是否流式输出 detail 是否体现工作流过程细节 代码模板 import requests import pandas as pddef get_completion(question):# Define the URL and headersurl …

PC端自动化测试实战教程-1-pywinauto 环境搭建(详细教程)

1.简介 之前总有人在群里或者私信留言问:Windows系统安装的软件如何自动化测试呢?因为没有接触过或者遇到过,所以说实话宏哥当时也不清楚怎么实现,怎么测试。然而在一次偶然的机会接触到了Python的一个模块说是它可以实现Microso…

【WPF】WPF设置自定义皮肤主题

在 WPF 中,自定义皮肤主题通常是通过 ResourceDictionary 来实现的。资源字典可以包含控件样式、颜色、字体和其他 UI 元素的定义。为了创建一个自定义皮肤主题,你可以按照以下步骤进行: 1. 创建资源字典(ResourceDictionary&…

PHP语言的语法糖

PHP语言的语法糖 引言 在现代编程语言中,语法糖(Syntactic Sugar)是指一些改善用户体验的语言特性,使得某些语法更加简洁、易用。PHP作为一种广泛使用的服务器端脚本语言,自然也不例外。它大量引入了语法糖&#xff…

Ubuntu 24.04 LTS 服务器折腾集

目录 Ubuntu 更改软件源Ubuntu 系统语言英文改中文windows 远程链接 Ubuntu 图形界面Windows 通过 openssh 连接 UbuntuUbuntu linux 文件权限Ubuntu 空闲硬盘挂载到 文件管理器的 other locationsUbuntu 开启 SMB 服务,并通过 windows 访问Ubuntu安装Tailscale&am…

怎么创建一个能在线测试php的html5网页?

代码示例: 一、搭建服务器环境 首先,你需要在服务器上搭建 PHP 运行环境。如果你使用的是 Linux 服务器,可以使用 Apache 或 Nginx 作为 Web 服务器,并安装 PHP 解释器。对于 Windows 服务器,可以使用 WAMP&#xff08…

大模型GUI系列论文阅读 DAY3:《GPT-4V(ision) is a Generalist Web Agent, if Grounded》

摘要 近年来,大型多模态模型(LMMs)的发展,特别是 GPT-4V(ision) 和 Gemini,迅速扩展了多模态模型的能力边界,不再局限于传统任务如图像描述和视觉问答。在本研究中,我们探讨了 LMMs&#xff08…

【JavaEE进阶】实现简单的加法计算器和用户登录

目录 🎍序言 🌳加法计算器 🚩准备工作 🚩约定前后端交互接口 🚩后端服务器代码的书写 🌴用户登录 🚩准备工作 🚩约定前后端交互接口 🏀需求分析 🏀…