当前位置：首页 > news >正文

【JavaScript】原型链 prototype 和 this 关键字的练习（老虎机）

news 来源：原创 2025/9/3 5:40:22

这个老虎机练习主要考察JavaScript中的原型链（prototype）和this关键字的使用。

主要思路

创建三个轮盘（reels）实例：我们需要创建3个独立的轮盘对象，它们都委托（delegate）到基础的reel对象。这可以通过Object.create(reel)来实现，创建新对象并将其原型指向reel。
实现display()方法：这是最复杂的部分，需要显示3×3的网格：
- 每个轮盘需要显示三个位置：当前位置、上方位置和下方位置
- 行显示（水平方向）：以"|"分隔的三个轮盘符号
- 列显示（垂直方向）：每个轮盘的三个位置（上中下）

实现代码

function randMax(max) {return Math.trunc(1E9 * Math.random()) % max;
}var reel = {symbols: ["♠", "♥", "♦", "♣", "☺", "★", "☾", "☀"],spin() {if (this.position == null) {this.position = randMax(this.symbols.length); }this.position = (this.position + 100 + randMax(100)) % this.symbols.length;},display() {if (this.position == null) {this.position = randMax(this.symbols.length);}return this.symbols[this.position];}
};var slotMachine = {reels: [Object.create(reel),Object.create(reel),Object.create(reel)],spin() {this.reels.forEach(reel => {reel.spin();});},display() {// 获取每个轮盘上方、当前和下方的符号var lines = [];// 创建三行（上、中、下）for (let linePos = -1; linePos <= 1; linePos++) {let line = this.reels.map(reel => {// 创建一个临时对象，委托到reel，但拥有自己的positionvar slot = Object.create(reel);// 调整position以显示上方/当前/下方的符号slot.position = ((reel.position + linePos) + reel.symbols.length) % reel.symbols.length;return slot.display();});lines.push(line.join(" | "));}// 打印结果console.log(lines.join("\n"));}
};slotMachine.spin();
slotMachine.display();slotMachine.spin();
slotMachine.display();

代码解析

循环创建三行：使用-1、0、1作为偏移量，分别表示上、中、下行
显示每个位置的符号：
- 为每个位置创建一个临时对象（使用Object.create(reel)）
- 调整临时对象的position属性，考虑到循环（使用模运算）
- 调用临时对象的display()方法获取符号
处理循环边界问题：当计算上方位置（特别是当前位置为0时），需要加上reel.symbols.length来确保结果为正，然后再取模
格式化输出：组合所有符号，map生成的行数组用"|“分隔转换成字符串后加入lines数组，lines数组用换行符”\n"分隔转换成字符串。
spin()方法有两个主要作用：
1. 初始化位置：如果轮盘的position属性为null（比如第一次使用时），它会为轮盘设置一个初始随机位置。
2. 改变轮盘位置：每次调用spin()都会使轮盘旋转一定数量的位置（至少100个位置加上0-99的随机数），然后通过取模确保最终位置在有效范围内。
  
  在示例代码中：
```
slotMachine.spin();
slotMachine.display();
// 显示第一组结果slotMachine.spin();
slotMachine.display();
// 显示第二组结果
```
  两次结果不同，正是因为中间调用了spin()方法，改变了每个轮盘的位置。如果删除第二个spin()调用，两次display()会显示完全相同的结果。
  
  所以spin()方法是整个老虎机机制的核心部分之一，它模拟了真实老虎机拉杆后轮盘旋转的过程，而这个旋转直接决定了最终显示的符号组合。
reel原型对象
1. reels数组中的对象：
```
reels: [Object.create(reel),Object.create(reel),Object.create(reel)
]
```
  这里创建了三个独立的对象，每个都作为slotMachine的一个轮盘。这些对象在整个slotMachine的生命周期中持续存在，并且每个都维护自己的position属性状态。当我们调用slotMachine.spin()时，这三个对象的position属性会被更新。
2. display()方法中的临时对象：
```
var slot = Object.create(reel); // 这个是个临时对象，不是reels中的元素
```
  这是在display()方法内部创建的临时对象，它在每次显示时创建，用完即丢弃。这个临时对象不是用来替代轮盘的，而是用来临时保存修改后的位置，以便显示上方或下方的符号，而不影响原始轮盘的position属性。
  
  理解这一点很关键：slot是通过原型链委托到reel对象的，而reels数组中的每个元素是通过原型链委托到同一个reel对象的独立对象。
  
  因此，它们在内存中是完全不同的对象，只是共享相同的原型。这种结构让我们能够在不改变原始轮盘位置的情况下，显示每个轮盘的上方、当前和下方位置的符号。
理解参数reel的来源：
1. this.reels.map(function getSlot(reel){...}) 中的reel参数是map方法传入的，它代表的是this.reels数组中的每个元素，也就是我们在slotMachine初始化时创建的那三个轮盘对象。
2. 然后，我们基于这个轮盘对象创建一个临时对象：var slot = Object.create(reel)，这个临时对象的原型是当前遍历到的轮盘对象，而不是原始的reel对象。
3. 这样，我们可以通过reel.position访问到当前轮盘的位置，并在临时对象中设置调整后的位置：slot.position = ...。
简单来说，这里存在三层委托关系：
- slot对象委托到reels数组中的特定轮盘对象
- 那个轮盘对象又委托到原始的reel对象
- 当我们调用slot.display()时，会使用slot自己的position，但方法本身是从reel原型继承的

【JavaScript】原型链 prototype 和 this 关键字的练习（老虎机）

这个老虎机练习主要考察JavaScript中的原型链（prototype）和this关键字的使用。主要思路创建三个轮盘（reels）实例：我们需要创建3个独立的轮盘对象，它们都委托（delegate）到基础的ree…...

编程日记 2025/9/3 5:40:22

Windows强制删除任何你想删除的文件和文件夹

Windows强制删除任何你想删除的文件和文件夹本教程适用于 Windows 10/11 系统，工具和命令均经过验证。为什么删除会失败？ 权限不足：文件或文件夹可能需要管理员权限才能删除。文件被占用：某个程序正在使用目标文件&#xff0c…...

编程日记 2025/8/30 6:58:13

【MySQL数据库】锁机制

概述锁：是计算机协调多个进程或者线程并发访问某一资源的机制。在数据库中，除了传统的计算资源（CPU、RAM、IO）的争用以外。数据也是一种供多用户共享的资源。如何保证数据的并发访问的一致性、有效性是所有数据库必须解决的一个…...

编程日记 2025/9/3 5:38:18

JS dom修改元素的style样式属性

1通过样式属性修改第三种 toggle有就删除没就加上...

编程日记 2025/9/3 5:35:33

搜索树——AVL、红黑树、B树、B+树

目录二叉搜索树 AVL树 2-3-4树红黑树旋转操作概念讲解旋转节点操作（左旋） 插入节点删除节点 B树和B树 B树 2.5.2 B树 https://www.cs.usfca.edu/~galles/visualization/Algorithms.html 难度高，如果想要了解红黑树的增加、…...

编程日记 2025/9/3 5:34:24

2007-2019年各省地方财政交通运输支出数据

2007-2019年各省地方财政交通运输支出数据 1、时间：2007-2019年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区、年份、地方财政交通运输支出 4、范围：31省 5、指标说明：地方财政交通运输支出是指地方…...

编程日记 2025/9/1 13:16:32

LeetCode算法题(Go语言实现)_29

题目给你一个链表的头节点 head 。删除链表的中间节点 ，并返回修改后的链表的头节点 head 。长度为 n 链表的中间节点是从头数起第 ⌊n / 2⌋ 个节点（下标从 0 开始），其中 ⌊x⌋ 表示小于或等于 x 的最大整数。对于 n 1、2…...

编程日记 2025/8/29 10:07:30

MINIQMT学习课程Day6

学习安装qmt 安装好后，点击启动国金qmt系统之后将xtquant包手动安装到python中的site_package中，之后使用pycharm打开文件，创建本地命令文件。具体的xtquant安装包以及qmt模拟环境，以及模拟账号密码，可以加我私信沟…...

编程日记 2025/8/26 2:24:34

WinForm真入门(7)——Button控件详解

WinForm Button 控件详解 Button（按钮）是 WinForm 中最基础的交互控件，用于触发操作（如：点击登录按钮进入系统）或提交数据（如：写好请假申请后，点击提交，把申…...

编程日记 2025/8/28 4:14:47

035-Windows抓屏-GDI

Windows抓屏-GDI 一、技术原理 GDI（Graphics Device Interface）抓屏基于Windows系统提供的图形设备接口，通过设备上下文（DC） 实现屏幕内容捕获。核心流程如下： 获取桌面窗口句柄：通过 //获取…...

编程日记 2025/8/27 20:50:36

复古优雅感涂鸦手绘喷漆街头艺术字体 Enter Sonic Graffiti

Enter Sonic Graffiti 是 Rvq Typefoundry 的新字体，具有优雅感的字符集。要创建漂亮的组合，只需混合大写和小写，然后与其他字符形混合即可。新的 Graffiti 字体样式和 .我将这款字体献给我正在与癌症作斗争的母亲。我希望我的母亲和所有受癌…...

编程日记 2025/8/25 5:17:30

4.4 代码随想录第三十五天打卡

121. 买卖股票的最佳时机 (1)题目描述: ， (2)解题思路: class Solution { public:int maxProfit(vector<int>& prices) {int len prices.size();if (len 0) return 0;vector<vector<int>> dp(len, vector<int>(2));dp[0][0] - pr…...

编程日记 2025/9/2 17:45:32

PyTorch 深度学习实战（34）：神经架构搜索（NAS）实战

在上一篇文章中，我们探讨了联邦学习与隐私保护技术。本文将深入介绍神经架构搜索（Neural Architecture Search, NAS）这一自动化机器学习方法，它能够自动设计高性能的神经网络架构。我们将使用PyTorch实现基于梯度优化的DARTS方法&…...

编程日记 2025/8/27 21:02:02

【python】速通笔记

Python学习路径 - 从零基础到入门环境搭建安装Python Windows: 从官网下载安装包 https://www.python.org/downloads/Mac/Linux: 通常已预装，可通过终端输入python3 --version检查配置开发环境推荐使用VS Code或PyCharm作为代码编辑器安装Python扩展插件创建第…...

编程日记 2025/9/1 8:11:40

简易Minecraft python

废话多说以下是一个基于Python和ModernGL的简化版3D沙盒游戏框架。由于代码长度限制，这里提供一个核心实现（约500行），您可以通过添加更多功能和内容来扩展它： python import pygame import moderngl import numpy a…...

编程日记 2025/8/29 16:19:04

Linux信号处理解析：从入门到实战

Linux信号处理全解析：从入门到实战一、初识Linux信号：系统级的"紧急电话" 信号是什么？ 信号是Linux系统中进程间通信的"紧急通知"，如同现实中的交通信号灯。当用户按下CtrlC（产生SIGINT信号&…...

编程日记 2025/8/28 15:27:43

2025-04-04 Unity 网络基础5——TCP分包与黏包

文章目录 1 分包与黏包2 解决方案2.1 数据接口2.2 定义消息2.3 NetManager2.4 分包、黏包处理 3 测试3.1 服务端3.2 客户端3.3 直接发送3.4 黏包发送3.5 分包发送3.6 分包、黏包发送3.7 其他 1 分包与黏包分包、黏包指在网络通信中由于各种因素（网络环境、API …...

编程日记 2025/9/2 18:44:01

Ubuntu 安装 JMeter：为你的服务器配置做好准备

Apache JMeter 是一个开源的负载测试工具，可以用于测试静态和动态资源，确定服务器的性能和稳定性。在本文中，我们将讨论如何下载和安装 JMeter。安装 Java（已安装 Java 的此步骤可跳过） 要下载 Java，请遵…...

编程日记 2025/8/31 20:56:34

一、闭包或block 1.1、swift 闭包表达式作为参数的形式一、闭包的定义 func exec(v1: Int, v2: Int, fn: (Int, Int) -> Int) { print(fn(v1, v2)) } 二、调用 exec(v1: 10, v2: 20, fn: { (v1: Int, v2: Int) -> Int in return v1 v2 }) 1.2、swift 闭包表达式作为…...

编程日记 2025/9/1 20:04:04

【数据结构】_队列

hello 友友们~ 今天我们要开始学习队列啦~ 话不多说，让我们开始吧！GO! 1.队列的概念及结构队列：只允许在一端进行插入数据操作，在另一端进行删除数据操作的特殊线性表。队列具有先进先出FIFO(First In First Out) 入队列&#x…...

编程日记 2025/8/28 15:17:48

【软考中级软件设计师】数据表示：原码、反码、补码、移码、浮点数

数据表示一、数据表示1、整数的表示(1) 原码(2) 反码(3) 补码：(4) 移码 2、浮点数的表示（IEEE 754标准） 一、数据表示计算机使用的是二进制，也就是0和1的组合。所有的数据，无论是数字、文字还是图片、声音&#xff…...

编程日记 2025/8/30 9:48:56

Linux（十二）信号

今天我们就要来一起学习信号啦！！！还记得小编在之前的文章中说过的ctrlc吗？之前小编没有详细介绍过，现在我们就要来学习啦！！！ 一、信号的基本介绍首先，小编带领大家先一…...

编程日记 2025/8/26 4:27:25

迪杰斯特拉+二分+优先队列+拓扑+堆优化（奶牛航线Cowroute、架设电话线dd、路障Roadblocks、奶牛交通Traffic）

原文地址 https://fmcraft.top/index.php/Programming/2025040402.html 主要算法迪杰斯特拉Dijkstra 题目列表 P1：奶牛航线Cowroute 题目描述题目描述 Bessie已经厌倦了农场冬天的寒冷气候，她决定坐飞机去更温暖的地方去度假。不幸的是&#xf…...

编程日记 2025/8/30 5:20:26

【数据结构】树的介绍

目录一、树1.1什么是树？1.2 树的概念与结构1.3树的相关术语1.4 树形结构实际运用场景二、二叉树2.1 概念与结构2.2 特殊的二叉树2.2.1 满二叉树2.2.2 完全二叉树个人主页，点击这里~ 数据结构专栏，点击这里~ 一、树 1.1什么是树&#xff1…...

编程日记 2025/9/2 13:13:01

【CF】Day24——Codeforces Round 994 (Div. 2) D

D. Shift Esc 题目： 思路： 典DP的变种如果这一题没有这个变换操作，那么是一个很典型的二维dp，每一个格子我们都选择上面和左边中的最小值即可而这题由于可以变换，那我们就要考虑变换操作，首先一个显然…...

编程日记 2025/8/28 20:07:43

Python 字典

Python 字典字典的介绍字典不仅可以保存值，还能对值进行描述使用大括号来表示一个字典，不仅有值 value ，还有值的描述 key字典里的数据都是以键值对 key-value 的形式来保留的key 和 value 之间用冒号 : 来连接多个键值对之间用逗号 , 来…...

编程日记 2025/9/2 1:12:45

yolov12检测聚类轨迹运动速度

目录分割算法api版：分割算法： yolo_kmean.py 优化版：第1步，检测生成json 第2步骤聚类：分割算法api版： import json import os from glob import globimport cv2 import imageio import numpy as np from scipy.ndimage import gaussian_filter1d from scipy.s…...

编程日记 2025/8/28 19:32:50

【Lua】pcall使用详解

目录基本语法核心作用基础示例示例 1：捕获一个简单错误示例 2：调用不存在的函数高级用法1. 传递多个参数和接收多个返回值2. 捕获带 error 主动抛出的错误3. 匿名函数与 pcall 使用场景注意事项总结在 Lua 中，pcall（Protected …...

编程日记 2025/8/29 6:46:35

Floyd 算法 Java

图论算法实践：使用 Floyd 求任意两点最短路（Java 实现） 在图论算法中，Floyd-Warshall 算法是一个经典的动态规划算法，用于在一个加权图中寻找所有点对之间的最短路径。场景描述假设我们有一个包含 n 个点的无向图&…...

编程日记 2025/9/2 10:10:01

List结构之非实时榜单实战

像京东、淘宝等电商系统一般都会有热销的商品榜单，比如热销手机榜单，热销电脑榜单，这些都是非实时的榜单。为什么是非实时的呢？因为完全实时的计算和排序对于资源消耗较大，尤其是当涉及大量交易数据时。一般来说&…...

编程日记 2025/8/29 22:10:58

OCR的备份与恢复

1.简介在Oracle RAC环境中，ASM（Automatic Storage Management）管理的OCR（Oracle Cluster Registry）是集群的关键组件，存储集群配置和状态信息。 OCR的备份一般指物理备份，系统默认每4个小时自…...

编程日记 2025/8/26 4:27:16

算法思想之双指针(一)

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之双指针(一) 发布时间：2025.4.4 隶属专栏：算法目录双指针算法介绍对撞指针：快慢指针： 例题移动零题目链接题目描述算法思路代码实现复写零题目链接题目描…...

编程日记 2025/8/26 4:27:15

Pascal语言的设备管理

Pascal语言的设备管理引言在计算机科学中，设备管理是操作系统的重要组成部分之一。设备管理指的是操作系统对外部设备的控制和协调，实现对各种设备的有效利用。Pascal语言作为一种教育性编程语言，虽然最初并不是为了直接进行设备管理而设…...

编程日记 2025/8/29 7:05:10

【MySQL】DML：添加-修改-删除数据 (数据操作语言) 学习笔记

DML (数据操作语言) 学习笔记 1. 数据表结构首先创建员工表 employee： CREATE TABLE employee (id int unsigned NOT NULL AUTO_INCREMENT COMMENT ID,username varchar(20) NOT NULL COMMENT 用户名,password varchar(32) DEFAULT 123456 COMMENT 密码,name va…...

编程日记 2025/8/29 11:07:24

React编程高级主题：背压（Backpressure）处理

文章目录 **5.1 背压（Backpressure）概述****5.1.1 缓冲（Buffer）****1. 基本概念****2. 缓冲的实现方式****3. 适用场景****4. 潜在问题** **5.1.2 丢弃（Drop）****1. 基本概念****2. 丢弃的实现方式****3. 适…...

编程日记 2025/8/30 18:47:07

Spring IoCDI

IoC容器前⾯我们提到IoC控制反转， 就是将对象的控制权交给Spring的IOC容器 ，由IOC容器创建及管理对象。也就是bean的存储. 在类上⾯添加 RestController 和 Controller 注解, 就是把这个对象交给Spring管理 , Spring 框架启动时就会加载该类. 把对象…...

编程日记 2025/8/30 3:21:14

COBOL语言的数据库交互

COBOL语言的数据库交互引言随着信息技术的不断发展，数据库管理系统（DBMS）已经成为现代应用程序中不可或缺的组成部分。在众多编程语言中，COBOL（Common Business-Oriented Language）以其在商业应用中的稳…...

编程日记 2025/9/2 16:44:04

【C++11（中）】—— 我与C++的不解之缘（三十一）

一、可变参数模版基本语法： C11支持可变参数模版，简单来说就是支持可变数量参数的函数模版或者类模版； 可变数目的参数被称为参数包，存在两种参数包：模版参数包(表示0个或者多个模版参数)，函数参数包(表示…...

编程日记 2025/9/2 16:53:14

JavaScript学习19-事件类型之鼠标事件

1. 2. 3....

编程日记 2025/8/30 12:22:42

文件或目录损坏且无法读取：数据恢复的实战指南

在数字化时代，数据的重要性不言而喻。然而，在日常使用电脑、移动硬盘、U盘等存储设备时，我们难免会遇到“文件或目录损坏且无法读取”的提示。这一提示如同晴天霹雳，让无数用户心急如焚，尤其是当这些文件中存储着重要的…...

编程日记 2025/8/26 4:27:14

python爬虫：小程序逆向实战教程

根据我之前发表的文章，我们进行延伸实战https://blog.csdn.net/weixin_64809364/article/details/146981598?spm1001.2014.3001.5501 1. 想要爬取什么小程序，我们进行搜索 2. 找到我们vx小程序的文件地址，我们就可以进行破解破解步骤强看…...

编程日记 2025/9/3 1:32:40

第二十节课：python实例五：身体质量指数BMI计算

python实例五：身体质量指数BMI计算一、问题分析 BMI计算公式： BMI 体重(kg) / 身高(m)^2国际与国内标准对比分类国际标准国内标准偏瘦<18.5<18.5正常18.5-2518.5-24偏胖25-3024-28肥胖≥30≥28 二、实现要点输入处理 # 同时接收身高体重…...

编程日记 2025/9/1 16:04:18

八、重学C++—动态多态（运行期）

上一章节： 七、重学C—静态多态（编译期）-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/146999362?spm1001.2014.3001.5502 本章节代码： cpp/dynamicPolymorphic.cpp CuiQingCheng/cppstudy - 码云 - 开源中…...

编程日记 2025/8/31 1:55:03

思维链 Chain-of-Thought（COT）

思维链 Chain-of-Thought（COT）：思维链的启蒙 3. 思维链 Chain-of-Thought（COT）存在问题？2. 思维链 Chain-of-Thought（COT）是思路是什么？1. 什么是思维链 Chain-of-Thoug…...

编程日记 2025/8/28 9:55:45

React框架的Fiber架构

以下是关于 Fiber 架构的系统梳理：一、Fiber 架构的出现背景 React 15 及之前的问题同步递归渲染：虚拟DOM的diff过程不可中断，导致主线程长时间阻塞。掉帧问题：复杂组件树渲染时，用户交互无法及时响应。无法实现增量渲染：无法拆分任务优先级，无法利用浏览器空闲时间。…...

编程日记 2025/8/30 0:58:39

PCI与PCIe接口的通信架构是主从模式吗？

PCI（Peripheral Component Interconnect）总线在通信架构上本质是主从模式，但其具体实现和角色分配在不同版本（如传统PCI与PCI Express）中存在差异。以下是详细分析： 传统PCI总线的主从模式 (1) 基本架构主…...

编程日记 2025/8/29 13:18:23

【2011】【论文笔记】THz保护文化遗产——

前言类型太赫兹 + 文化保护太赫兹 + 文化保护太赫兹+文化保护期刊 I E E E T R A N S A C T I O N S O N T E R A H E R...

编程日记 2025/8/26 6:03:36

状态机思想编程练习

状态机实现LED流水灯本次实验，我们将利用状态机的思想来进行Verilog编程实现一个LED流水灯，并通过Modelsim来进行模拟仿真，再到DE2-115开发板上进行验证。首先进行主要代码的编写。 module led (input sys_clk,input sys_…...

编程日记 2025/8/31 12:56:51

三部门新政力推智能家居居然智家数智化转型迎利好东风

2025年3月，工业和信息化部、教育部、市场监管总局联合印发《轻工业数字化转型实施方案》，明确提出重点培育智能家居、智能穿戴、智能骑行、智慧养老等消费端场景，深化人工智能技术在家电、家具等领域的应用，推动产业链供应链智能化…...

编程日记 2025/8/26 6:03:33

CCF GESP C++编程七级认证真题 2025年3月

C 七级 2025 年 03 月题号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 答案 B A B C B B B A D D A C B B D 一、单选题第 1 题下列哪个选项是C中的关键字？ A. function B. class C. method D. object 第 2 题下面代码输出的是（） int main()…...

编程日记 2025/8/29 7:08:59

主要思路

实现代码

代码解析

相关文章：