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

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

---

主要思路

1. 创建三个轮盘（reels）实例 ：我们需要创建3个独立的轮盘对象，它们都委托（delegate）到基础的reel对象。这可以通过Object.create(reel)来实现，创建新对象并将其原型指向reel。

2. 实现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，但拥有自己的position
                var 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原型继承的

---