其中黑白妹 1已于 2021 年发售了简中版，DLsite 官方将「妹!せいかつ」这个词直译为了「妹！生活」。出版商 Kagura Games 又于 2024 年初在 Steam 代理发行了这款游戏，将其翻译为「妹相随」。

前言

Steam 游戏 DLC 已于上个月发售，这本应该是件令人兴奋的事，但随之而来的却是各种各样的问题。存档不兼容，就连神乐官方给出的 处理方案，都是删除云存档、并重装游戏，来解决游戏中出现的各种 Bug。

在此之前我有很多存档，在游戏中花费了大量的时间和精力。因不想再次重复枯燥的流程，加上近期加班没有多余的游戏时间，便在一气之下做出了这个修改器。

介绍

修改器在 V1 时仅支持 Steam 平台，现在 V2 使用了 Lua 进行重构与窗口手绘，已经完美兼容 DLsite 和 Steam 双平台。

在此之前，旧版本无法兼容 DLsite，这其实是神乐的问题。我们打开 Steam 的游戏安装目录可以看到有 Game.exe 和 GamePro.exe 两个运行程序。通过 Steam 内部来启动游戏，执行的是 Game.exe 程序，而你手动执行 GamePro.exe 文件也是可以正常启动游戏的，但它们之间的基址并不一致。

DLsite 日语原版只有 GamePro.exe 一个执行文件，Game.exe 是先前老版本使用的启动器，两者就连程序图标都不一样，不清楚为什么神乐要保留并且使用 Game.exe。

下载

你可以 点击这里 开始下载，要是你所在的地区有网络波动，下载文件速度过慢，可以尝试使用 蓝奏云。

如果你的电脑里安装了杀毒软件，可能还要添加白名单来避免被误删。修改器的原理是通过访问游戏的内存实现数据篡改，对于操作系统而言属于敏感操作，误报是正常现象，可以放心使用。

该项目基于 Cheat Engine 开发，所有代码已在 GitHub 开源，如果你想要自定义功能项，可以直接打开 launch.CT 修改对应的脚本。

使用

在打开修改器后，如果你此时还未启动游戏，窗口会开始播放加载动画，当打开游戏之后，如果你听到了那个熟悉的声音，就证明进程已经成功加载了。

道具修改

可以通过顶部菜单栏修改各式各样的角色数值以及道具物品。

功能面板

通过鼠标左键点击窗口面板右侧的区域栏，可以打开与关闭对应功能性，你也能直接使用对应的键盘快捷键。

触手

触手是一个在游戏后期通关大冒险后才能获得的道具，无法通过商店购买，你可以直接在菜单栏解锁。

妹妹心情

妹妹的心情数值在游戏内存里的实际变量是 0–10，对应了六个不同的阶段，下拉栏菜单的数值为双数（0、2、4、6、8、10），也就是说，当妹妹的心情值是单数（1、3、5、7、9）时，下拉栏不会有对应的默认勾选项。

秒 5

需要注意的是，「秒 5」建议在战斗开始前或己方回合时开启，能避免出现一些意料之外的情况。该功能在开启后，只要进入了战斗阶段，不管是对方的回合还是己方的回合，都会直接获得战斗胜利。

部分战斗会有剧情对话，如果此时在对方的回合突然强制获胜，会导致游戏图层异常。例如对话框正常显示，但战斗 UI 还没有消失，不过不会影响游戏运行就是了，会在遇到游戏事件重新绘制 UI 时恢复正常。

如果遇到了战斗无法获胜的场景，先确认游戏内是否已经进入战斗开始阶段（也就是那一句 battle start）。部分剧情在战斗开始前会有一段对话或者引导提示，此时需要鼠标点击一下界面，游戏内才会出现 battle start 的标语。

据 Steam 的部分留言反馈，「秒 5」功能无法正常使用，但我在 Windows 10 和 Windows 11 下都测试过了，无法复现。由于我的使用习惯，电脑系统始终在第一时间保持着最新版本，Windows 也是购买的正版，无法 100% 还原各式各样的运行环境。

为此，我又新增了「AT 力场」功能。如果无法使用修改器直接获得胜利，可以使用该功能避免战败，通过战斗正常取胜。

砸瓦鲁多

时停只会影响在家里的互动时间，公会、逛街等一系列事件会强制切换场景，锁了时间也没用。

无限泡茶

是否喝过茶和是否上过厕所在游戏里是两种不同的状态，该功能只会解除泡茶限制，妹妹只会去一趟厕所。

攻略

在开发反编译的过程中，我发现了许多有意思的事情，虽然算不上什么正经攻略，不过还是希望能多多少少给大家带来一些帮助。

关于隐藏数值

游戏里对妹妹的大部分操作，都会被记录在案（说的就是你，hentai！），例如夜晚叫醒妹妹的次数、喂妹妹喝媚药的次数、闯入厕所的次数，以及各种 H 的开发程度等。这类隐藏数值与 Sex 的次数、射出量等统计数据不同，会影响到妹妹的行为、对话，还有胖次界面的人物介绍。

而这其中有一个 Bug，当在夜袭的时候选择让妹妹趴着用屁股夹住，虽然没有插入，但还是会增加相关 H 的隐藏数值。当该数值达到一定程度时，会解锁很多 Sex 相关剧情，例如在浴室时插入、被早安骑、晚饭时先享用妹妹等，都不会导致破瓜，中出也不会怀孕。

我也有考虑过要不要向作者反馈这个 Bug，但是……吧……我一个给游戏拆了包写修改器的人，跑去联系作者还要求修 Bug，这不太合适吧（

关于避孕药

这其实是翻译闹出的乌龙，在日语原版里，道具的名字是「アフターピル」，而 Steam 英语版里是「After Pill」，已经讲的很清楚了是事后药，而不是事前药，要注意使用时机。

之前有考虑过要不要给修改器做多语言切换，所以参考了各个版本的翻译文本，最后放弃了，懒（也许哪天心血来潮了又会突然更新吧）。

补充

修改器使用到了游戏内的拆包资源（侧边图、程序图标、字体、音效等），版权归相关方所属，本项目仅供学习用途，请勿肆意宣传滥用。

关于使用修改器的态度，神乐官方给出的解释原文如下：

Q：我可以开修改器或者加速游戏吗？
A：可以，但是出了 Bug 请自行解决，我们无法提供技术支持。

关于快捷键为什么要使用 F 区：

在 V1 时，修改器窗口直接使用了 CE 默认生成模板，快捷键默认数字小键盘，市面上很多基于 CE 的修改器也都是这样做的，因为很方便。但是 CE 提供的默认模板实在是太丑了，而且我的笔记本和另一个 87 配列键盘压根没有副键盘区，用台式的时候又会经常误触（我用 108 配列习惯敲数字区），所以最终在 V2 选择了 F 区的方案。

在照顾不同键盘用户和防误触的同时，又因为游戏内的功能按键也是 F 区，可以很好地在交互上做到逻辑统一，还顺便给功能区做了点击交互，方便鼠标用户。

更新

可是，在 JavaScript 中的表现又如何？说到底，作为一门不依赖于操作系统的脚本语言，究竟能不能主动获取到堆栈的相关信息？

什么是调用栈？

调用栈到底是什么？又能用来做些什么？在什么情况下会用到？

说来也是巧合，在这之前，我从未想过用 JavaScript 去操作堆栈，因为在平时的工作中，哪怕是后端开发也会很少接触到，更别说是前端了。

这里就不大费口舌去解释一些底层原理了，简单来说，调用栈是解释器追踪函数执行流的一种机制。当执行环境中调用了多个函数时，通过这种机制，我们能够追踪到哪个函数正在执行，执行的函数体中又调用了哪个函数。

当函数被调用的时候，解析器就会把这个函数给添加到调用栈中，如果函数里面还有调用其他函数的话，内部被调用的函数就会继续被添加到调用栈中去，最后当函数执行结束便会从调用栈清除。

1
2
3
4
5
6
7
8

function greeting() {
  sayHi();
}
function sayHi() {
  return 'hello world';
}

greeting();

例如上列的代码块，执行顺序是这样的：

① 执行到函数 greeting() 的时候，把 greeting() 添加到调用栈列表中并执行
② 执行 greeting() 函数中调用 sayHi() 函数之前的代码
③ 执行到 sayHi() 函数的时候，将 sayHi() 函数添加到调用栈并执行
④ sayHi() 函数执行结束，从代码栈中清除，并执行 greeting() 函数之后的代码
⑤ greeting() 执行完毕，从调用栈清除
⑥ 继续执行接下来的代码

如果调用栈空间被占满了，就会引发堆栈溢出。这也是为什么在实际开发中，不鼓励使用递归的原因，因为一旦处理不当就会导致严重的后果。

举个栗子

既然知道了调用栈可以用来追踪函数，在什么情况下会使用到？为了更加直观的说明问题，这里我们可以拿火影来举例，使用 TypeScript 编写方便区分数据类型。 （不会吧不会吧，不会有人没看过火影吧？）

血轮眼

写轮眼，作为只有宇智波一族获得遗传的血继限界，它并非是天生获得的，而是需要后天开眼，而写轮眼也分为多个阶段，普通（单勾、双勾、三勾）、万花筒、永恒万花筒、轮回眼。

我们可以先创建下列枚举：

1
2
3
4
5
6
7
8
9
10
11
12

enum SharinganStage {
  /** 未开眼 */
  none = 0,
  /** 一勾 */
  ichi,
  /** 双勾 */
  ni,
  /** 三勾 */
  san,
  /** 万花筒 */
  mangekyou,
}

随着持有者的情绪波动，血轮眼会自我进化，而进化至万花筒以上的阶段又会有其独特的瞳术，例如月读、天照等，所以我们创建 Sharingan 类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class Sharingan {
  /** 阶段 */
  public stage: SharinganStage;
  /** 瞳术 */
  public skill?: Function;

  constructor() {
    this.stage = SharinganStage.none;
  }

  /** 进化 */
  public evolution(): void {
    this.stage++;

    if (this.stage === SharinganStage.mangekyou) {
      // TODO: 获取随机瞳术
      // this.skill = getRandomSkill();
    }
  }
}

瞳术

可以看到，skill 并不是非空字段，那么瞳术要从何而来？其实这里的瞳术我们可以简单理解为就是一个 function 函数，根据项目的实际需求可以有以下两种设计方案

第一种可以单独创建一个文件夹，专门用来存放各类 index.ts 文件，这有点类似 component 或 plugin 的模式：

1
2
3
4
5

.
├─ tsukuyomi.ts        月读
├─ amaterasu.ts        天照
├─ kamui.ts            神威
└─ kagutsuchi.ts       加具土命

第二种可以直接在 index.ts 创建对应函数并将其存入数组：

1
2
3
4
5
6

const tsukuyomi = () => {};
const amaterasu = () => {};
const kamui = () => {};
const kagutsuchi = () => {};

export const skills = [tsukuyomi, amaterasu, kamui, kagutsuchi];

现在我们就可以根据代码实际情况，来编写出 getRandomSkill 函数，调用即可随机获取一种瞳术并返回。

二柱子

现在我们就可以编写忍者类了，每个忍者都有着自己独特的名字及各类属性和方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class Ninja {
  public leftEye: unknown;
  public rightEye: unknown;

  constructor(public name: string) {}

  public kill(ninja: Ninja): void {
    ninja.die();
  }

  public die(): void {
    this.say('人被杀就会死');
  }

  public say(word: string): void {
    console.log(word);
  }
}

而宇智波一族出生就继承了血轮眼，在其产生极为强烈的情感时就会让血轮眼进化，而杀死至亲之人就是其中之一，我们接着继承 Ninja 类创建宇智波类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

class Uchiha extends Ninja {
  public leftEye: Sharingan;
  public rightEye: Sharingan;

  constructor(name: string) {
    super(`宇智波${name}`);

    this.leftEye = new Sharingan();
    this.rightEye = new Sharingan();
  }

  /** 重写 kill 方法 */
  public kill(ninja: Ninja): void {
    ninja.die();
    this.dokidoki();
  }

  private dokidoki() {
    this.leftEye.evolution();
    this.rightEye.evolution();
  }
}

现在是幻想时间

所有代码都编写完成，那么在岸本老贼的剧本里，二柱子是什样得到万花筒血轮眼的？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const sasuke = new Uchiha('佐助');
const itachi = new Uchiha('鼬');

// 二柱子成功获得了天照与加具土命
sasuke.kill(itachi);

const obito = new Uchiha('带土');

// 二柱子发动了天照 ⚛_⚛
sasuke.leftEye.skill!();

// 哼哼哼啊啊啊啊啊啊啊啊
obito.say('烫烫烫锟斤拷');
// 带土发动了神威 ✇_✇
obito.rightEye.skill!();
// 带土活了下来，天照又没能烫死人

乍一看没什么问题对吧？但是代码并不能像岸本老贼那样按剧本出牌，在程序（观众）眼里，二柱子根本就不知道自己开眼后获得了什么瞳术。不过在见到带土后，二柱子也确实不知道釉把天照给了自己。

我要五彩斑斓的黑

不知道是什么瞳术就不知道嘛，知道这玩意又有啥用？

问得好，也许对程序员（读者）而言，这种事情怎么样都无所谓。但是岸本（产品）不一样，你永远都不知道下一话会添加哪些新的设定（需求），剧情会有什么新的展开，一切都充满了未知。

例如这个时候，就有了一个新的设定，在发动瞳术的时候需要大声喊出瞳术的名字。在我们之前写好的代码中，二柱子如何去获取到 kill 的相关信息？

要实现也很简单，方法也有许许多多，但这些的前提，都是在理想情况下：

• 我可以在 Sharingan 类下面直接追加 name 属性。
• 我也可以在 getRandomSkill 调用时返回 name 字段。
• 我甚至还能创建 getSkill 函数，在 evolution 调用时随机生成 name 主动获取指定函数。
• …

这样会有什么问题？首先 Sharingan 的 skill 属性本身就是不是非空字段，我们并不知道 skill 会在何时被生成、何时被获取以及何时被调用。

如果在 skill 为空的情况下擅自调用，基于现有的代码，必然要做大量的修改，添加大量的条件语句，来防止意料之外的情况发生。而且前提是 skill 必须返回的是一个函数，如果 getRandomSkill 返回的不是一个函数，而是一个模块又会怎么样？

所以我们静下心来仔细一想，skill 被执行的共同点是什么？文件名或函数名就是其 name 的唯一标识，是不是我们并不用将一个无关紧要的字符串传过来传过去？如果能直接获取到调用栈，是不是也不用将以前已有的逻辑推倒重做？

正是因为在某次开发的过程中，我遇到了类似的情况，所以就有了操作调用栈这个想法。当函数调用另一个函数的时候，获取调用栈直接输出被调用者的信息，这是最简单也是最便捷的方案。

如何获取调用栈

我当时立即在 MDN 查阅了 stack、trace 等关键字的相关 API，不过没有找到令人满意的结果。JavaScript 并没有提供主动获取调用栈的方法，但是我找到了 Error.prototype.stack 这么一个奇怪的东西。

该特性并不是 JavaScript 的标准，最初是由 Firefox 定义，作为 Error 对象的栈属性为其提供了一种函数追踪方式。虽然没有标准的定义，但后来 Safari、Opera、Chrome 也都定义了自己的 error.stack 格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function trace() {
  try {
    throw new Error('stack');
  } catch (error) {
    console.log(error.stack);
  }
}

function b() {
  trace();
}

function a() {
  b();
}

a();

例如上面这段代码，我们可以直接得到调用栈相关信息，下面分别是 Chrome 与 Firefox 的输出：

1
2
3
4

Error: stack
  at trace (index.js:3:13)
  at b (index.js:11:5)
  at a (index.js:15:5)

1
2
3

trace@file:///index.js:3:13
b@file:///index.js:11:5
a@file:///index.js:15:5

自定义输出格式

虽然通过 error.stack 我们成功获取到了调用栈信息，但是新的问题又出现了，各大 runtime 对于 stack 并没有一个标准。可以看到上面输出的文本格式都有所不同，而且仅仅通过字符串，也并不满足我们的需求。

正当我快要放弃的时候，我又发现了一个奇怪的东西。V8 提供了一个 Error.prepareStackTrace() 的函数，允许用户提供自定义的堆栈跟踪格式。

这不正是我们想要的么！而且 V8 还提供了各种各样的方法，不管是函数名、文件名、包括代码行数和内部属性，都可以全部获取。有了 prepareStackTrace() 我们甚至可以实现各种各样比较 cool 的东西，例如之后我自己实现了一个 module 模块热更新。

1
2
3
4
5
6
7
8
9
10

function getStack() {
  const orig = Error.prepareStackTrace;
  Error.prepareStackTrace = (_, stack) => stack;

  const error = new Error();
  const stack = error.stack;
  Error.prepareStackTrace = orig;

  return stack;
}

这样，我们就可以使用 getStack() 获取调用栈信息了。需要注意的是，Error.prepareStackTrace 一定要在获取 stack 后将其还原，不然你整个项目的 Error 格式就全变了。

callsite

上面那段代码在我的项目里已经使用了 3 年，最近在写这篇文章的时候，无意间发现了一个名为 callsite 的库。虽然已经 7 年没更新，但是周下载量居然有 2,000,000+，一看居然还是 tj 大佬的作品。

1
2
3
4
5
6
7
8
9
10
11

module.exports = function () {
  var orig = Error.prepareStackTrace;
  Error.prepareStackTrace = function (_, stack) {
    return stack;
  };
  var err = new Error();
  Error.captureStackTrace(err, arguments.callee);
  var stack = err.stack;
  Error.prepareStackTrace = orig;
  return stack;
};

源码非常简单，只有上面 9 行，和我自己写的几乎没有区别，不由得感叹人家大佬 7 年前就玩转 JavaScript 了，看来我的学习之路还远远不够呀~

但从严格意义上来讲，Javascript 并不是一门面向对象语言，而是基于对象，也可以说是基于原型。Javascript 并没有「类」(class) 的概念，也没有提供像抽象、继承、重载等有关面向对象语言的许多特性。那么，Javascript 是如何通过 object 来实现 class 类似表现的？

对象原型

可以说 JavaScript 既是一个面向对象的语言又是一个面向过程的语言。

在 JavaScript 中，通过在运行时，给空对象附加方法和属性来创建对象，与编译语言如 C++ 和 Java 中常见的通过语法来定义类相反。对象构造后，它可以用作是创建相似对象的原型。

前面我们有说到，Javascript 里面所有的数据类型都是对象。在这其中，每个对象上都有 __proto__ 和 constructor 这两个属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const array = [114, 514];
const number = 1919810;
const string = '哼哼哼啊';

/**
 * 上述代码与这种写法是等价的
 *
 * const array = new Array(114, 514);
 * const number = new Number(1919810);
 * const string = new String('哼哼哼啊');
 */

console.log(number instanceof Object); // -> true
console.log(array instanceof Object); // -> true
console.log(string instanceof Object); // -> true

函数也是对象，较为特殊的是，除了 __proto__ 和 constructor，函数还有 prototype 这个独有属性。prototype 是显式原型，__proto__ 是隐式原型。

1
2
3
4
5
6

// 等价于 var foo = new Function();
function Foo() {}

console.log(Foo instanceof Object); // -> true
console.log(Foo.__proto__ === Function.prototype); // -> true
console.log(Foo.prototype); // -> {constructor: ƒ Foo(), [[Prototype]]: Object}

原型链

对象的 __proto__ 属性，是在创建对象时自动添加的，默认值为其构造函数的 prototype。函数的 prototype 属性是定义时自动添加的，默认为 {} 空对象，一层一层的 __proto__ 便形成了原型链。

1
2
3
4
5
6
7
8

function Foo() {}

Foo.prototype.test = function () {
  console.log('hello world');
};

var foo = new Foo();
foo.test(); // -> hello world

prototype 的作用，就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们，都可以找到公用的属性和方法。当我们试图去访问一个对象上的属性时，如果不存在，便会顺着原型链一直往下找，直到找到为止。

所以，我们可以在字符串上调用 replace()、trim()，能在数组上调用 join()、push()，正是因为顺着原型链找到了对应的方法。如果比较熟悉链表 (linked list)，那么理解起来会特别快。

值得一提的是，Object 的原型是 null，因为它是原型链的最顶端。

1

console.log(Object.prototype.__proto__ === null); // -> true

[[prototype]] 与 __proto__

前面我们有说到，所有对象都有 __proto__ 属性，可是在浏览器里打印却显示的是 [[prototype]] 而非 __proto__。

其实 [[prototype]] 和 __proto__ 意义相同，均表示对象的内部属性，其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。

__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性。虽然目前很多现代浏览器的 JavaScript 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，建议只使用 Object.getPrototypeOf() 方法来获取实例对象的原型。

构造函数

constructor 属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数。

每个对象都有构造函数，不过 Function 对象比较特殊，它的构造函数就是它自己（因为 Function 可以看成是一个函数，也可以是一个对象），所有函数最终都是由 Function() 构造函数得来，所以 constructor 属性的指向就是 Function()。

ES6

在 ES6 中，新引入了 class 关键字，让定义类更接近传统写法，不过其本质也只是构造函数的另一种写法，最后还是绕不开原型链。

有兴趣你可以查阅 深入浅出 function 与 class 一栏。

在 JavaScript（以下简称 JS）中也可以使用 var 来声明变量，不仅限于此，还有 let、const 共三种方式创建变量。而如今却很少在 JS 中见到 var 的身影，这又是为什么？

var 的由来

var 在使用上与 let 十分相似，大部分情况下我们可以直接用 let 来代替 var 或者用 var 去代替 let，都能达到预期的效果。

1
2
3
4
5

var name = '周树人';
let pseudonym = '鲁迅';

console.log(name); // -> 周树人
console.log(pseudonym); // -> 鲁迅

但实际上，var 却是一座「屎山」。在 JS 设计初期，作为一门网页脚本语言，并未做过多的考虑（从设计到初步实现仅用了 10 天）。但随着时间的推移，项目中大量使用 var 会导致许多诡异的问题，这从而促使了 let 与 const 的诞生。

现如今，虽然在各大项目中已经很难在看到 var 的身影，但在百度上或者公司的祖传代码里你依然能找到它。如果在百度搜代码，看到有人还在教你使用 var 甚至是 DreamWeaver 写代码… 直接关掉吧，不用看了，那篇文章只是在浪费你的时间。

这不由得让人想起当年教我的 Java 老师，用的 MyEclipse 2012 + Tomcat 1.6 + JDK 1.6 开发，每次有人提出疑问都蜜汁自信说自己有 10 年开发经验，不可能出错。

当然，也并不是说使用 var 就完全是一件错事，任何事物存在就有着自身的价值。Babel 以及 TypeScript 等工具在特定情况下，编译出的代码都或多或少会使用到 var 来声明变量，因为有着极强的兼容性。不过，除开这种情况使用 var 就完全没必要了。我可从没说过只要用 var 写代码的都是辣鸡啊，你们不要乱说啊。

作用域

在 ES6 之前，JS 的变量作用域是非常笼统的，只有全局变量与函数变量。

而 var 坑就坑在它没有块级作用域，用 var 声明变量的变量不是函数作用域就是全局作用域。

1
2

for (var i = 0; i < 10; i++) {}
console.log(i); // -> 10

上列就是一个最简单的例子，for 循环都结束了，却仍然可以访问到变量 i。试想一下，如果变量名不是用的 i，而是开发中最为常见的 item 会怎么样？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="GBK" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>

    <script type="text/javascript">
      var lis = document.getElementsByTagName('li');

      for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function () {
          lis[i].style.background = 'skyblue';
        });
      }
    </script>
  </body>
</html>

再来看这段代码，可以说这段代码在以前是非常常见的，如果你接触编程比较早甚至还觉得非常亲切，为了复古我甚至都在 script 里加了 type=text/javascript，charset 是万恶的 GBK。 要实现的功能也很简单，为每个 li 标签加上点击事件，当该 li 被点击时修改当前的背景颜色。

看着没什么问题对吧？但当你点击 li 元素后，控制台会提示 TypeError: Cannot read properties of undefined (reading 'style') 的错误信息。

这算是一个老生常谈的问题了，只要以前写过 ES5 都遇到过，也都知道该怎么避免。

当该段代码执行时仅仅是为标签元素绑定了 click 事件，但并未执行该函数。当页面元素被点击后会从 lis 集合里寻找下标为 i 的元素并修改颜色。但这时 i 的值是多少呢？没错，3，但并不存在下标为 3 的 li 元素，所以就抛 undefined 了。

要解决这个问题也很简单，使用闭包，因为 var 会受到函数作用域的影响。

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
  var lis = document.getElementsByTagName('li');

  for (var i = 0; i < lis.length; i++) {
    (function (j) {
      lis[j].addEventListener('click', function () {
        lis[j].style.background = 'skyblue';
      });
    })(i);
  }
</script>

哦，我的老伙计，尽管这段代码能顺利跑起来了，但这只是简单的修改样式。我发誓，如果，我是说如果，要是代码逻辑稍微复杂一点，后面项目维护起来，那一定和写小程序一样难受，就像隔壁苏珊太太的苹果派那样糟糕。

ES6 YES

1
2
3
4
5
6
7
8
9

<script>
  const lis = document.querySelectorAll('li');

  for (let i = 0; i < lis.length; i++) {
    lis[j].addEventListener('click', () => {
      lis[j].style.background = 'skyblue';
    });
  }
</script>

这是一种比较现代的写法，let 和 const 都拥有块级作用域，所以完全避免了变量污染的问题。

重复声明

除了作用域导致的变量污染，var 还有一个奇怪的特性，就是变量允许重复声明。

1
2
3
4
5

var liangfen = 1;
// 我说你吃了两碗凉粉那就是两碗
var liangfen = 2;

console.log(liangfen); // -> 2

使用 var，我们可以重复声明一个变量，不管多少次都行。

1
2
3
4

// SyntaxError: Identifier 'liangfen' has already been declared
let liangfen = 1;
// 我就吃了一碗粉你凭什么说我吃了两碗？
let liangfen = 2;

而使用 let 会直接提示语法错误，非常的银杏。

变量提升

在 JS 代码开始执行的时候，就会预先处理 var 的变量。也就是说，使用 var 声明的变量会在其作用域的开头被定义，与它在代码中定义的位置无关。

要注意的是，这不包括变量嵌套在函数中的情况，因为函数不管定义在代码的哪一行，都只有在被调用时才会执行。

1
2
3
4

message = 'hello world';

console.log(message);
var message;

它与下面这种情况是等价的（var message 被上移至作用域开头）

1
2
3
4

var message;
message = 'hello world';

console.log(message);

甚至与这种情况也一样（代码块会被忽略）

1
2
3
4
5
6

message = 'hello world';

if (false) {
  var message;
}
console.log(message);

这种行为被称之为「提升」(英文为 hoisting 或 raising)，因为所有的 var 都被提升到了作用域的顶部。

声明会被提升，但是赋值不会。

1
2

console.log(message);
var message = 'hello world';

var message = 'hello world' 这行代码包含两个行为：

1. 使用 var 声明变量
2. 使用 = 给变量赋值

变量的声明，在代码刚开始执行的时候，就被提升处理了，但是赋值操作始终是在它出现的地方才起作用。所以这段代码实际上是这样工作的：

1
2
3
4
5

var message;

console.log(message); // -> undefined
// 赋值
message = 'hello world';

因为所有的 var 声明都是在作用域开头处理的，我们可以在任何地方引用它们。但是在它们被赋值之前都是 undefined。

所以就算你写出了这种代码，它也不会报错。

1
2

console.log(message); // -> undefined
var message;

而使用 let 会直接提示结构错误，非常的银杏。

1
2
3

// ReferenceError: Cannot access 'message' before initialization
console.log(message);
let message;

暂时性死区

只要块级作用域内存在 let 关键字，它所声明的变量就绑定了这个区域，不再受外部的影响。

1
2
3
4
5
6
7

// ReferenceError: Cannot access 'name' before initialization
var name;

if (true) {
  name = '周树人';
  let name;
}

ES6 明确规定，如果区块中存在 let 和 const 关键字，这个区块对这些关键字声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

在代码块内，使用 let 关键字声明变量之前，该变量都是不可用的。这在语法上，称为「暂时性死区」（temporal dead zone，简称 TDZ）。

有些死区比较隐蔽，不太容易发现。

1
2
3
4
5
6
7
8

function naming(fullname = `${surname}树人`, surname = '周') {
  return fullname;
}

console.log('naming start'); // -> naming start
// ReferenceError: Cannot access 'surname' before initialization at naming
console.log(naming());
console.log('naming end');

上面代码与前面的有所不同，直到 naming 函数被调用前，程序都是可以正常运行的，不会出现报错，因为其通过了语法编译。

没错，尽管 JS 是一门弱类型的脚本语言，但它并不是解释型语言，其也是有语法编译的，很多人都不知道这一点PHP：你礼貌么？。前面的几个示例中，代码还没开始执行就报语法错误了，这就是最简单的证明。

而 naming() 在这里报错，是因为参数 fullname 默认值用到了另一个参数 surname，而此时 surname 还没有声明，属于死区。如果将这两个参数的顺序调整，就不会报错，因为此时变量已经声明了。

1
2
3
4
5
6
7

function naming(surname = '周', fullname = `${surname}树人`) {
  return fullname;
}

console.log('naming start'); // -> naming start
console.log(naming()); // -> 周树人
console.log('naming end'); // -> naming end

常量

在 ES6 之前，JS 内所有数据都是变量，可以修改任意值。而 const 关键字用来声明常量，一旦被声明，值将无法更改。

1
2
3

// TypeError: Assignment to constant variable.
const name = '周樟寿';
name = '周树人';

为什么 Object 和 Array 可以随意修改值？因为这两类是引用类型，并非基础数据类型，引用类型内部的值不管怎么变，其引用地址都是不变的。

1
2
3
4
5
6
7
8

const wifes = ['镜华'];
const harem = wifes;

wifes.push('美美');
wifes.push('未奏希');

console.log(harem); // -> ['镜华', '美美', '未奏希']
console.log(harem === wifes); // -> true

当然，这是 JS 的基础知识，由此可以引申出深拷贝与浅拷贝，但并不与本文章相关，便不在此做过多的赘述。先挖个坑，才不是因为懒呢。

尽管我们知道，传统构造函数是 ES5 中的写法，而 class 则是在 ES6 中新引入的关键字，那么这两种方式到底有什么区别？

class 的由来

在 ES5 中，与传统的面向对象语言（比如 C++ 和 Java）相比，JS 在生成实例对象的写法上有着很大的不同。

例如下面的例子：

1
2
3
4
5
6
7
8
9
10

function Phone(brand) {
  this.brand = brand;
}

Phone.prototype.call = function () {
  console.log('The "hello world" from %s.', this.brand);
};

var xiaomi = new Phone('xiaomi');
xiaomi.call(); // -> The "hello world" from xiaomi.

而 ES6 提供了更接近传统语言的写法，引入了类的概念。上面的代码用 class 关键字来编写，就是下面这样。

1
2
3
4
5
6
7
8
9
10
11
12

class Phone {
  constructor(brand) {
    this.brand = brand;
  }

  call() {
    console.log(`The "hello world" from ${this.brand}.`);
  }
}

const huawei = new Phone('huawei');
huawei.call(); // -> The "hello world" from huawei.

可以看到，尽管在写法上有所差异，但上述代码的表现行为是完全一致的。我们可以将 class 看作是构造函数的一个语法糖，不过使用 class 能让代码逻辑更加清晰，使其看起来更像面向对象编程的语法。

语法糖，但不完全语法糖

很多开发者在学习初期，会认为 class 仅仅是一个语法糖，因为在不使用它的情况下，完全可以用 function 来实现同样的效果。不过，这两者并不能完全画等号。

我们通过 class 创建的，是一种特殊的函数对象，其内部的 [[FunctionKind]] 属性被标记为了 "classConstructor"，而 JS 引擎会在许多地方检查 [[IsClassConstructor]] 属性。

虽然我们无法直接在代码里观察到这些内部槽（internal slots），但可以通过其表现行为来佐证。

调用方式不同

与 function 不同，class 必须配合 new 使用，而构造函数是普通函数，不使用 new 也能直接调用。

1
2
3
4
5
6
7
8
9

class Smartphone {
  static crackWalnuts() {
    console.log('You are sure?');
  }
}

// Uncaught TypeError: Class constructor Smartphone cannot be invoked without 'new'
Smartphone();
Smartphone.crackWalnuts();

1
2
3
4
5
6
7
8

function Dumbphone() {}

Dumbphone.crackWalnuts = function () {
  console.log('Crack!');
};

Dumbphone();
Dumbphone.crackWalnuts(); // -> Crack!

可以看到，尽管 Dumbphone 添加了静态方法，但它依然可以作为函数正常执行，不受任何影响。

严格模式

使用 class 创建的类，其内部代码默认启用严格模式。构造函数、静态方法、原型方法、getter 和 setter，都是在严格模式下强制执行，无法手动关闭。

1
2
3
4
5
6
7

function Dumbphone() {
  with (console) {
    log('I am Dumbphone.');
  }
}

new Dumbphone(); // -> "I am Dumbphone."

1
2
3
4
5
6
7
8

class Smartphone {
  constructor() {
    // Uncaught SyntaxError: Strict mode code may not include a with statement
    with (console) {
      log('I am Smartphone.');
    }
  }
}

方法不可枚举

使用 class 会将其原型上的方法的 enumerable 标志定义为 false，使得它们不可被枚举，而通过给 prototype 赋值的方式定义的方法默认是可枚举的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function Dumbphone() {}

Dumbphone.prototype.openCover = function () {
  console.log('打开后盖就能看到我的电池，咱还能再装回去 (*/ω＼*)');
};

class Smartphone {
  openCover() {
    console.log('杂鱼❤杂鱼❤～打不开后盖的杂鱼～没有充电器就只能等着关机的杂鱼～');
  }
}

console.log(Dumbphone.prototype); // -> { constructor: ƒ, openCover: ƒ }
console.log(Smartphone.prototype); // -> { constructor: ƒ, openCover: ƒ }
console.log(Object.keys(Dumbphone.prototype)); // -> ['openCover']
console.log(Object.keys(Smartphone.prototype)); // -> []
console.log(Object.getOwnPropertyNames(Smartphone.prototype)); // -> ['constructor', 'openCover']

function 的继承

在看过了前面的内容，相信你对 JS 的类已经有了一个大致的了解。但这个时候你一定有所疑问，构造函数是如何做到继承的？

原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function Phone(brand) {
  this.brand = brand;
}

Phone.prototype.call = function () {
  console.log('The "hello world" from %s.', this.brand);
};

function XiaomiPhone(model) {
  this.model = model;
}

XiaomiPhone.prototype = new Phone('Xiaomi');
XiaomiPhone.prototype.constructor = XiaomiPhone;
XiaomiPhone.prototype.slogan = function () {
  console.log('为发烧而生');
};

var xiaomi = new XiaomiPhone('13 Ultra');

思路：

1. 将子类的原型对象指向父类的实例对象。

缺点：

1. 子类实例化时无法为父类构造函数传入不同参数。
2. 子类原型中包含的引用值会在所有实例之间共享。

构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function Phone(brand, price) {
  this.brand = brand;
  this.price = price;

  this.call = function () {
    console.log('The "hello world" from %s.', this.brand);
  };
}

function XiaomiPhone(model, price) {
  Phone.call(this, 'Xiaomi', price);
  this.model = model;
}

XiaomiPhone.prototype.slogan = function () {
  console.log('为发烧而生');
};

var xiaomi = new XiaomiPhone('13 Ultra', 5999);

思路：

1. 让父类构造函数在子类内部运行。
2. 将父类内部的 this 指向子类的实例。

缺点：

1. 父类方法必须定义在构造函数中。
2. 子类不能访问父类原型上定义的属性与方法。

组合继承（经典写法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function Phone(brand, price) {
  this.brand = brand;
  this.price = price;
}

Phone.prototype.call = function () {
  console.log('The "hello world" from %s.', this.brand);
};

function XiaomiPhone(model, price) {
  Phone.call(this, 'Xiaomi', price);
  this.model = model;
}

XiaomiPhone.prototype = Object.create(Phone.prototype);
XiaomiPhone.prototype.constructor = XiaomiPhone;
XiaomiPhone.prototype.slogan = function () {
  console.log('为发烧而生');
};

var xiaomi = new XiaomiPhone('13 Ultra', 5999);

这种方式综合了「构造函数继承」和「原型链继承」的优点，是 ES5 中最经典的继承方式（之一）。

关于构造函数的继承方式，我们可以在网上看到有很多种写法，但从严格意义上来讲，我个人认为其继承机制，基本归纳为上述三种。其它常见的各种写法，都是以上三类方式的变体或组合。例如寄生继承，就是在这其中结合了函数工厂模式。

class extends

在 ES6 发布之后，类的继承有了质的提升。如果熟悉别的编程语言，那么对 extends 这个关键字一定不会陌生。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Phone {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }

  call() {
    console.log(`The "hello world" from ${this.brand}.`);
  }
}

class XiaomiPhone extends Phone {
  constructor(model, price) {
    super('Xiaomi', price);
    this.model = model;
  }

  slogan() {
    console.log('为发烧而生');
  }
}

const xiaomi = new XiaomiPhone('13 Ultra', 5999);

泰裤辣！