JavaScript 原型

JavaScript 的原型(Prototype)是其面向对象编程模型的核心概念之一,它决定了对象如何继承属性和方法。通过理解 JavaScript 的原型,你可以更好地理解对象之间的关系以及如何扩展对象功能。


核心概念

  1. [[Prototype]](内部属性)

    • 每个 JavaScript 对象都有一个隐藏的内部属性,称为 [[Prototype]]
    • 这个属性通常指向另一个对象,也就是该对象的原型。
  2. Object.prototype

    • 所有普通对象都最终继承自 Object.prototype,除非手动更改。
    • Object.prototype 是原型链的顶端,它的 [[Prototype]]null
  3. __proto__

    • 这是一些浏览器(如 Chrome 和 Firefox)中提供的访问 [[Prototype]] 的非标准方式。
    • 它主要用于调试,不推荐在实际代码中使用。
    • 现代的方式是使用 Object.getPrototypeOf(obj)Object.setPrototypeOf(obj, prototype)
  4. 构造函数与 .prototype

    • 每个函数(作为构造函数)都有一个 prototype 属性。
    • 当用构造函数创建一个对象时,该对象的 [[Prototype]] 会被设置为该构造函数的 prototype

示例

1. 创建对象与原型链
function Person(name) {this.name = name;
}Person.prototype.sayHello = function () {console.log(`Hello, my name is ${this.name}`);
};const person1 = new Person("Alice");
person1.sayHello(); // Hello, my name is Aliceconsole.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null
2. 使用 Object.create 创建对象
const proto = {greet() {console.log("Hello!");},
};const obj = Object.create(proto);
obj.greet(); // Hello!
console.log(Object.getPrototypeOf(obj) === proto); // true
3. 修改原型
function Dog(name) {this.name = name;
}const dog = new Dog("Rex");// 修改原型
Dog.prototype.bark = function () {console.log(`${this.name} says Woof!`);
};dog.bark(); // Rex says Woof!

原型链

JavaScript 通过原型链实现继承。如果对象在自身没有找到属性或方法,会沿着原型链向上查找,直到顶端的 Object.prototype,若仍未找到,则返回 undefined

示例:

const obj = {};
console.log(obj.toString()); // "[object Object]" 来自 Object.prototype

原型链结构:

  • objObject.prototypenull

注意点

  1. 避免循环引用
    修改原型链时要小心,避免导致无限循环。

    const a = {};
    a.__proto__ = a; // 不推荐,可能导致错误
    
  2. 性能问题
    频繁访问深层次的原型链可能会导致性能问题。

  3. 现代方法
    使用 class 语法可以更优雅地操作原型。

    class Animal {speak() {console.log("Animal speaks");}
    }class Dog extends Animal {bark() {console.log("Dog barks");}
    }const dog = new Dog();
    dog.speak(); // Animal speaks
    dog.bark();  // Dog barks
    

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

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

相关文章

【qt】控件3

1.setToolTip和setToolTipDuration setToolTip这个函数用来设置提醒内容 setToolTipDuration这个函数用来设置提醒时间 Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->help->setToolTip("按下这个按键就可以提…

STM32 使用 STM32CubeMX HAL库实现低功耗模式

STM32 使用 HAL 库的低功耗模式测试使用 ...... 矜辰所致前言 上次画了一个 STM32L010F4 最小系统的板子,也做了一些基本测试,但是最重要的低功耗一直拖到现在,以前在使用 STM32L151 的时候用标准库做过低功耗的项目,现在都使…

js实现导航栏鼠标移入时,下划线跟随鼠标滑动

话不多说&#xff0c;上代码&#xff1a; html代码&#xff1a; <div class"nav clearfix"><div class"bottomLine"></div><ul class"clearfix"><li class"nav__item"><a href"./index.html&…

React教程第二节之虚拟DOM与Diffing算法理解

1、什么是虚拟DOM 虚拟DOM 是javascript的一个对象&#xff0c;是内存中的一种数据结构&#xff0c;以树的形式存储UI的状态&#xff0c;树中的每个节点都代表着真实的DOM&#xff0c;用来描述我们希望在页面看到的 HTML结构&#xff1b; 现在的MVVM 框架&#xff0c;大多使用…

多线程4:线程池、并发、并行、综合案例-抢红包游戏

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

【WPF】Prism库学习(一)

Prism介绍 1. Prism框架概述&#xff1a; Prism是一个用于构建松耦合、可维护和可测试的XAML应用程序的框架。它支持WPF、.NET MAUI、Uno Platform和Xamarin Forms等多个平台。对于每个平台&#xff0c;Prism都有单独的发布版本&#xff0c;并且它们在不同的时间线上独立开发。…

通过华为鲲鹏认证发行上市的集成平台产品推荐

华为鲲鹏认证是技术实力与品质的权威象征&#xff0c;代表着产品达到了高标准的要求。从技术层面看&#xff0c;认证确保产品与华为鲲鹏架构深度融合&#xff0c;能充分释放鲲鹏芯片的高性能、低功耗优势&#xff0c;为集成平台的高效运行提供强大动力。在安全方面&#xff0c;…

STM32 ADC --- 任意单通道采样

STM32 ADC — 单通道采样 文章目录 STM32 ADC --- 单通道采样cubeMX配置代码修改&#xff1a;应用 使用cubeMX生成HAL工程 需求&#xff1a;有多个通道需要进行ADC采样&#xff0c;实现每次采样只采样一个通道&#xff0c;且可以随时采样不同通道的功能。 cubeMX配置 这里我们…

web——upload-labs——第十二关——%00截断

查看源码 分析源码我们可以知道&#xff0c;这里是基于白名单过滤&#xff0c;只允许上传jpg,png,gif&#xff0c;但是这里注意第八行&#xff0c;上传路径是可以控制的&#xff0c;所以可以利用%00截断&#xff0c;来达到上传木马的目的。这里要注意一下&#xff0c;%00截断想…

STM32 创建一个工程文件(寄存器、标准库)

首先到官网下载对应型号的固件包&#xff1a; 像我的STM32F103C8T6的就下载这个&#xff1a; 依次打开&#xff1a; .\STM32F10x_StdPeriph_Lib_V3.5.0\STM32F10x_StdPeriph_Lib_V3.5.0\Libraries\CMSIS\CM3\DeviceSupport\ST\STM32F10x\startup\arm 可以看到&#xff1a; 这…

Spark:大数据处理的强大引擎

一、Spark 简介 Apache Spark 是一个专为大规模数据处理而设计的快速、通用、可扩展的大数据分析计算引擎。它诞生于 2009 年&#xff0c;由美国加州伯克利大学的 AMP 实验室开发&#xff0c;2013 年被纳入 Apache 开源项目&#xff0c;并迅速成为顶级项目。 Spark 被认为是 …

鸿蒙HarmonyOS 地图定位到当前位置 site查询等操作

应用服务Map使用 地图定位 地点查询及导航 周边查询 点位标记定义等 地图定位 前提地图已经能正常显示&#xff0c;若不能显示请大家参考之前的那篇如何显示地图的博文 地图相关的api 位置效果图&#xff1a; module.json5配置权限 "requestPermissions": [{&…

编程语言02:语法基础

一、注释 (一)单行注释 java&#xff1a;//&#xff0c;快捷键 Ctrl/ package Summarize;public class L01_01 {public static void main(String[] args) {// 单行注释&#xff0c;快捷键Ctrl/} }python:#,快捷键Ctrl/ # python单行注释 (二)多行注释 java /*java多行注释…

ubuntu24.04网卡配置

vim /etc/netplan/01-netcfg.yaml /24表示子网掩码的长度。这种表示法称为CIDR&#xff08;无类别域间路由&#xff09;记法。CIDR记法将IP地址和它们的子网掩码合并为一个单一的值&#xff0c;其中斜杠/后面的数字表示子网掩码中连续的1的位数。 对于/24&#xff1a; 24表示…

基于普中51单片机开发板的电子门铃设计( proteus仿真+程序+设计报告+讲解视频)

基于普中51单片机开发板的电子门铃设计( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus8.15(有低版本) 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;P17 1. 主要功能&#xff1a; 基于51单片机的电子门铃设计 1、…

HTML and CSS Support HTML 和 CSS 支持

GoTo DevExpress Data Grid 数据网格 HTML and CSS Support HTML 和 CSS 支持 HTML和CSS支持允许您创建完全自定义的UI元素&#xff0c;并消除使用基于属性的UI自定义和CustomDraw事件。您可以构建 HTML 格式的 UI&#xff0c;并使用 CSS 样式自定义 UI 元素的外观设置、大小、…

掌握Golang中的数据竞争检测:runtime/race包全面教程

掌握Golang中的数据竞争检测&#xff1a;runtime/race包全面教程 引言数据竞争问题概述数据竞争的定义数据竞争对程序的影响常见数据竞争场景 Golang runtime/race包概述runtime/race包简介启用数据竞争检测使用 go run使用 go build使用 go test 基本用法与示例单元测试中的使…

Ascend C算子性能优化实用技巧05——API使用优化

Ascend C是CANN针对算子开发场景推出的编程语言&#xff0c;原生支持C和C标准规范&#xff0c;兼具开发效率和运行性能。使用Ascend C&#xff0c;开发者可以基于昇腾AI硬件&#xff0c;高效的实现自定义的创新算法。 目前已经有越来越多的开发者使用Ascend C&#xff0c;我们…

【HCIP]——OSPF综合实验

题目 实验需求 根据上图可得&#xff0c;实验需求为&#xff1a; 1.R5作为ISP&#xff1a;其上只能配置IP地址&#xff1b;R4作为企业边界路由器&#xff0c;出口公网地址需要通过PPP协议获取&#xff0c;并进行CHAP认证。&#xff08;PS&#xff1a;因PPP协议尚未学习&#…

深入理解Redis(七)----Redis实现分布式锁

基于Redis的实现方式 1、选用Redis实现分布式锁原因&#xff1a; &#xff08;1&#xff09;Redis有很高的性能&#xff1b; &#xff08;2&#xff09;Redis命令对此支持较好&#xff0c;实现起来比较方便 2、使用命令介绍&#xff1a; &#xff08;1&#xff09;SETNX SETNX …