学习笔记 2020-11-25

JavaScript 高级程序设计(第4版) 阅读记录

表单脚本

文本框编程

输入过滤

1. 处理剪贴板
   • beforecopy
   • copy
   • beforecut
   • cut
   • beforepaste
   • paste
   • event.clipboardData
     • getData()
     • setData()
     • clearData()

自动切换

HTML5 约束验证 API

1. 必填字段
   • required
2. 更多输入类型
   • email
   • url
3. 数值范围
   • number
   • range
   • datetime
   • datetime-local
   • date
   • month
   • week
   • time
   • min
   • max
   • step
4. 输入模式
   • pattern
5. 检测有效性
   • checkValidity()

现代 JavaScript 教程

原型继承

任务

1. 使用原型

   下面这段代码创建了一对对象，然后对它们进行修改。

   过程中会显示哪些值？

   let animal = {
     jumps: null
   };
   let rabbit = {
     __proto__: animal,
     jumps: true
   };
   
   alert( rabbit.jumps ); // ? (1)
   
   delete rabbit.jumps;
   
   alert( rabbit.jumps ); // ? (2)
   
   delete animal.jumps;
   
   alert( rabbit.jumps ); // ? (3)

   应该有 3 个答案。

   1 true

   2 null

   3 undefined

2. 搜索算法

   本题目有两个部分。

   给定以下对象：

   let head = {
     glasses: 1
   };
   
   let table = {
     pen: 3
   };
   
   let bed = {
     sheet: 1,
     pillow: 2
   };
   
   let pockets = {
     money: 2000
   };

   1. 使用 __proto__ 来分配原型，以使得任何属性的查找都遵循以下路径：pockets → bed → table → head。例如，pockets.pen 应该是 3（在 table 中找到），bed.glasses 应该是 1（在 head 中找到）。
   2. 回答问题：通过 pockets.glasses 或 head.glasses 获取 glasses，哪个更快？必要时需要进行基准测试。

   pockets.__proto__ = bed;
   bed.__proto__ = table;
   table.__proto__ = head;

   没有区别。

3. 写在哪里？

   我们有从 animal 中继承的 rabbit。

   如果我们调用 rabbit.eat()，哪一个对象会接收到 full 属性：animal 还是 rabbit？

   let animal = {
     eat() {
       this.full = true;
     }
   };
   
   let rabbit = {
     __proto__: animal
   };
   
   rabbit.eat();

   rabbit 会接收到 full 属性。

4. 为什么两只仓鼠都饱了？

   我们有两只仓鼠：speedy 和 lazy 都继承自普通的 hamster 对象。

   当我们喂其中一只的时候，另一只也吃饱了。为什么？如何修复它？

   let hamster = {
     stomach: [],
   
     eat(food) {
       this.stomach.push(food);
     }
   };
   
   let speedy = {
     __proto__: hamster
   };
   
   let lazy = {
     __proto__: hamster
   };
   
   // 这只仓鼠找到了食物
   speedy.eat("apple");
   alert( speedy.stomach ); // apple
   
   // 这只仓鼠也找到了食物，为什么？请修复它。
   alert( lazy.stomach ); // apple

   因为 stomach 这个属性设置在原型上，应该给每个对象各自设置 stomach 属性。

   也可以改 this.stomach.push() 为 this.stomach = ... 这样不会去寻找自身的 stomach ，而是直接给 this 写入一个新的 stomach 对象。