文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文围绕 Modern JavaScript Tutorial当前仓库en.javascript.info中 Object methods, this 章节的经典练习Create a calculator任务说明展开。我们将以官方参考答案为骨架完整剖析read()、sum()、mul()三个方法的实现细节、this的运行时求值规则、一元的类型转换并结合仓库内的 测试用例 与同系列 构造函数版计算器 做对比扩展。读完后你将掌握对象方法简写语法、this的动态绑定规律以及如何把一道练习题改造成可测试、可复用的真实代码。任务背景在对象方法中认识this在进入解题之前先明确这道题在教程中的位置。它出自 Object methods, this 一章该章的核心结论有三条见原文档 Summary存储在对象属性中的函数称为方法method方法让对象能够行动例如object.doSomething()方法内部通过this关键字引用调用它的对象。关键在于this的值在运行时才被求值。函数声明时可以写this但在调用之前它没有值一个函数可以被复制到多个对象上当以方法语法object.method()调用时调用期间this的值就是object即点号前面的对象。这道计算器练习正是为了让读者亲身体验这套规则三个方法都依赖this来读写对象自身的属性a和b只有用点号调用calculator.read()、calculator.sum()时this才会正确指向calculator本身。官方参考实现逐行解析任务的完整要求见 task.md难度标记 importance: 5是创建一个包含三个方法的calculator对象read()弹出两次输入框把两个值分别保存为对象属性a和bsum()返回已保存两个值的和mul()将已保存的两个值相乘并返回结果。官方参考答案 的完整代码如下let calculator { sum() { return this.a this.b; }, mul() { return this.a * this.b; }, read() { this.a prompt(a?, 0); this.b prompt(b?, 0); } }; calculator.read(); alert( calculator.sum() ); alert( calculator.mul() );方法简写语法sum() { ... }注意三个方法的定义方式。教程原文指出在对象字面量中存在更短的语法// 这两种写法等价 user { sayHi: function() { alert(Hello); } }; user { sayHi() { // 等价于 sayHi: function(){...} alert(Hello); } };参考答案正是使用了这种简写sum()、mul()、read()都省略了function关键字。严格来说两种写法并非完全等同存在与对象继承相关的细微差异后续章节会涉及但在绝大多数场景下简写语法是首选。read()保存用户输入read() { this.a prompt(a?, 0); this.b prompt(b?, 0); }这里有两个关键点prompt返回字符串prompt(a?, 0)弹出的输入框返回的是字符串即使输入的是数字。第二个参数0是默认值。一元加号强制转成数字prompt(...)把字符串转换为数字例如2得到2。这保证了sum()做的是数值加法而非字符串拼接——如果省略2 3会得到字符串23而不是5。this.a ...把输入值保存为calculator对象自己的属性后续sum()、mul()就能通过this.a、this.b读取它们。sum()与mul()通过this访问属性sum() { return this.a this.b; }, mul() { return this.a * this.b; }当以calculator.sum()调用时this就是calculator因此this.a、this.b读取的是read()保存下来的属性值。教程在这里专门强调过虽然技术上也可以用外层变量名直接引用对象例如alert(user.name)代替alert(this.name)但这种代码不可靠——一旦把user复制给admin并覆盖了user就会访问到错误的对象甚至报TypeError。这正是对象方法必须用this的最佳例证。调用顺序先read()再使用最后三行展示了正确的使用流程calculator.read(); alert( calculator.sum() ); alert( calculator.mul() );必须先调用read()让a、b有值然后才能求和、求积。这也符合对象封装状态 行为的设计理念属性是状态方法是行为。深入原理this为何指向calculator参考答案的核心考点就是this的运行时求值规则。教程原文用下面的例子说明了点号前的对象决定thislet user { name: John }; let admin { name: Admin }; function sayHi() { alert( this.name ); } // 同一个函数挂到两个对象上 user.f sayHi; admin.f sayHi; user.f(); // John (this user) admin.f(); // Admin (this admin) admin[f](); // Admin点号或方括号访问方法结果相同规则很简单如果调用obj.f()那么f执行期间this就是obj。在计算器例子中calculator.read()的this是calculatorcalculator.sum()的this也是calculator。教程还特别提醒两种边界情况无对象调用时this undefined如果直接调用sayHi()没有点号严格模式下this是undefined访问this.name会报错非严格模式下this是全局对象浏览器中是window这是use strict修复的历史遗留行为。this是自由的它的值在调用时求值不取决于方法在哪里声明而取决于调用时点号前面是哪个对象。这种设计让同一个函数可以被不同对象复用本例中sum、mul挂在calculator上但也带来了更高的出错可能。此外教程指出箭头函数没有自己的this——在箭头函数里引用this会取自外层普通函数。所以如果在本例中把sum写成箭头函数sum: () this.a this.bthis将不再指向calculator结果会是undefined。这也是本题要求使用普通方法语法的原因之一。用仓库自带测试验证正确性仓库为这道题提供了配套的自动化测试 test.js它基于教程第 3 章介绍的 Mocha/BDD 风格describe/context/it/assert详见 Automated testing with Mocha。测试逻辑如下describe(calculator, function() { context(when 2 and 3 entered, function() { beforeEach(function() { sinon.stub(window, prompt); prompt.onCall(0).returns(2); prompt.onCall(1).returns(3); calculator.read(); }); afterEach(function() { prompt.restore(); }); it(the read get two values and saves them as object properties, function () { assert.equal(calculator.a, 2); assert.equal(calculator.b, 3); }); it(the sum is 5, function() { assert.equal(calculator.sum(), 5); }); it(the multiplication product is 6, function() { assert.equal(calculator.mul(), 6); }); }); });这份测试生动地验证了参考答案的四个行为用 sinon 桩替代promptsinon.stub(window, prompt)拦截浏览器原生的promptonCall(0).returns(2)、onCall(1).returns(3)让第一次调用返回2、第二次返回3——这正是read()中两次prompt的执行顺序。read()保存属性测试断言calculator.a 2、calculator.b 3证明一元把字符串2、3转成了数字。sum()求和断言结果为52 3数值加法而非字符串拼接。mul()求积断言结果为62 * 3。注意测试代码直接引用了全局变量calculator说明该解法文件solution.js以对象字面量形式定义了calculator测试与实现通过同一个全局对象衔接——这也是教程练习页的惯例先由calculator.read()产生交互再由测试断言验证属性与运算结果。延伸对比构造函数版计算器在教程后续章节 Constructor, operator new 中同一道题以构造函数形式出现2-calculator-constructor 的参考答案function Calculator() { this.read function() { this.a prompt(a?, 0); this.b prompt(b?, 0); }; this.sum function() { return this.a this.b; }; this.mul function() { return this.a * this.b; }; } let calculator new Calculator(); calculator.read(); alert( Sum calculator.sum() ); alert( Mul calculator.mul() );两版对比如下对比维度对象字面量版本章构造函数版后续章节定义方式let calculator { ... }function Calculator() { ... }new Calculator()方法挂载直接写在对象字面量里简写语法用this.read function() {...}赋给新实例实例数量单个对象可new Calculator()创建多个独立实例this指向调用时的calculator调用时的实例对象new创建两版都依赖this读写属性原理完全一致区别在于构造函数版把创建计算器抽象成可复用的工厂而对象字面量版更贴近本章主题——直接在字面量中定义方法与this的交互。常见错误与排查要点基于this的运行时规则和一元的类型转换这道题最常见的错误有以下几类忘记加一元this.a prompt(a?, 0)存下字符串sum()会得到字符串拼接结果如23。修复prompt(...)。用外层变量名代替this例如在sum()里写calculator.a calculator.b。一旦calculator被重新赋值方法就会失效或报错应始终使用this.a、this.b。把方法写成箭头函数sum: () this.a this.b中箭头函数没有自己的this会取外层作用域的值可能是undefined或全局对象导致计算结果错误。本题应使用普通方法语法。调用顺序颠倒在read()之前调用sum()此时this.a、this.b尚未定义结果会是NaN。务必先read()再计算。小结这道 Create a calculator 练习浓缩了 Object methods, this 一章的全部核心知识方法 对象属性中的函数用简写语法read() { ... }定义this在调用时求值calculator.method()中this就是calculator因此sum()/mul()能通过this.a、this.b访问read()保存的状态一元确保输入是数字让运算符做加法而不是字符串拼接仓库自带的 test.js 用 Mocha sinon 桩验证了上述行为可作为后续写自动化测试的范本后续 构造函数版 将同一逻辑升级为可复用的多实例方案体现了从单个对象到对象工厂的思路演进。如果你希望进一步练习可以试着为calculator增加sub()减法和div()除法方法并为除法补充除零保护——这既能巩固this的用法也为后续学习 Constructor, operator new 章节的构造器模式做好准备。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Ralph 自治开发循环用例体系解析从 Actor 目录到熔断器状态机的完整场景建模Ralph 自治开发循环用例体系解析从 Actor 目录到熔断器状态机的完整场景建模 Ralph 是一个面向 Claude Code 的自治 AI 开发循环系文档/教程前端Modern JavaScript Tutorial 实战解析用构造器函数实现可累积求和的 AccumulatorModern JavaScript Tutorial 实战解析用构造器函数实现可累积求和的 Accumulator 本篇实战指南基于现代 JavaScript文档/教程前端用构造函数实现 Calculator 计算器JavaScript 构造器模式实战演练用构造函数实现 Calculator 计算器JavaScript 构造器模式实战演练 导读 本文围绕 Modern JavaScript Tutorial h文档/教程前端上一篇深度解密VirtualApp安卓沙盒技术的3大核心技术突破与实战应用指南下一篇如何快速掌握DiskSpd微软存储性能测试工具的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考