JS `extends` `null`：创建没有原型链的对象

各位观众老爷，大家好！今天咱们来聊一个在 JavaScript 里有点“离经叛道”的话题：extends null，也就是创建一个没有原型链的对象。这玩意儿乍一听可能觉得有点多余，但实际上在某些特定场景下，它能发挥奇效。

一、 啥是原型链？为啥要干掉它？

要理解 extends null 的意义，咱们得先回顾一下 JavaScript 的原型链。

• 每个对象都有个爹（原型）： 在 JavaScript 里，除了 null 和 undefined 之外，每个对象都有一个指向另一个对象的内部链接，这个链接就是它的原型（prototype）。你可以把它想象成对象的“爹”。

• 爹还有爹（原型链）： 这个“爹”也有自己的“爹”，一直往上追溯，就形成了一条链，这就是原型链。

• 查找属性的秘密通道： 当你试图访问对象的一个属性时，JavaScript 引擎会先在对象自身查找。如果没找到，就沿着原型链往上找，直到找到为止，或者找到原型链的顶端—— null。

// 举个栗子
let animal = {
  name: "动物",
  eat: function() {
    console.log("吃东西");
  }
};

let dog = {
  name: "小狗",
  bark: function() {
    console.log("汪汪汪");
  }
};

// 将 dog 的原型设置为 animal
Object.setPrototypeOf(dog, animal);

console.log(dog.name); // 输出 "小狗" (dog 自身有 name 属性)
console.log(dog.eat);  // 输出 function() { console.log("吃东西"); } (dog 自身没有 eat 属性，沿着原型链找到 animal.eat)
dog.eat();            // 输出 "吃东西"

在这个例子中，dog 继承了 animal 的 eat 方法。这就是原型链的作用。

那么，为啥要干掉原型链呢？

在大多数情况下，原型链是个好东西，它实现了继承，减少了代码冗余。但是，有些时候，我们并不需要继承，或者说，我们希望创建一个非常纯粹、没有任何额外属性的对象。

• 安全： 原型链上的属性可能会被意外修改，影响到所有继承该原型的对象。如果你的对象需要高度的安全性，避免被外部干扰，那么去掉原型链是个不错的选择。
• 性能： 虽然影响通常很小，但每次访问属性时，JavaScript 引擎都需要沿着原型链查找。如果你的对象非常频繁地被访问，并且你确定不需要继承，那么去掉原型链可以略微提升性能。
• 控制： 有时候，你可能需要完全掌控对象的属性，不允许任何继承的属性存在。

二、 extends null 的正确姿势

extends null 实际上是 ES6 引入的 class 语法中的一种用法。它允许我们创建一个类，这个类的原型不是 Object.prototype，而是 null。

class MyObject extends null {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`你好，我是 ${this.name}`);
  }
}

let obj = new MyObject("张三");

console.log(obj.name);       // 输出 "张三"
obj.greet();             // 输出 "你好，我是 张三"
console.log(obj.__proto__);    // 输出 undefined (没有原型)
console.log(obj.toString);  // 输出 undefined (没有继承 toString 方法)

在这个例子中，MyObject 继承自 null，这意味着它的实例 obj 没有任何原型。因此，它没有继承 Object.prototype 上的任何方法，例如 toString、valueOf 等。

注意：

• extends null 只能在 class 语法中使用。不能直接用 Object.create(null) 替代，因为 Object.create(null) 创建的对象仍然会有一个 __proto__ 属性，虽然它的值为 null，但它仍然是一个属性。而 extends null 创建的对象完全没有 __proto__ 属性。

三、 Object.create(null) vs extends null

你可能会问，Object.create(null) 也能创建一个没有原型的对象，那它和 extends null 有啥区别？

特性	Object.create(null)	extends null (class)
创建方式	函数调用，直接创建一个对象。	类定义，需要先定义一个类，然后通过 new 关键字创建实例。
用途	创建一个简单的、没有原型的对象。通常用于创建字典或者映射，避免原型链上的属性冲突。	定义一个类，这个类的实例没有原型。通常用于创建需要高度安全性和控制的对象，或者需要避免继承的场景。
__proto__ 属性	对象拥有 __proto__ 属性，其值为 null。 虽然原型链为空，但是 __proto__ 属性仍然存在。	对象完全没有 __proto__ 属性。 这意味着对象没有任何原型链的痕迹。
适用场景	1. 创建一个纯粹的字典或映射，避免原型链上的属性干扰。	1. 需要创建一个没有原型链的类，例如，创建一个高度安全的对象。
	2. 需要手动控制对象的原型链，例如，创建一个自定义的原型链。	2. 需要避免继承，完全掌控对象的属性。
示例	javascript let myMap = Object.create(null); myMap.key1 = "value1"; myMap.key2 = "value2"; console.log(myMap.key1); // 输出 "value1" console.log(myMap.toString); // 输出 undefined | javascript class MyObject extends null { constructor(name) { this.name = name; } greet() { console.log(`你好，我是 ${this.name}`); } } let obj = new MyObject("张三"); console.log(obj.name); // 输出 "张三" console.log(obj.toString); // 输出 undefined

简单来说，Object.create(null) 创建的是一个对象，而 extends null 创建的是一个类的实例。extends null 在类型定义上更清晰，更符合面向对象的编程思想。

四、 extends null 的应用场景

• 创建纯粹的数据容器： 如果你需要创建一个纯粹的数据容器，例如，一个字典或者映射，你可以使用 extends null 来避免原型链上的属性冲突。

  class MyMap extends null {
    constructor() {
      this.data = {};
    }
  
    set(key, value) {
      this.data[key] = value;
    }
  
    get(key) {
      return this.data[key];
    }
  
    has(key) {
      return this.data.hasOwnProperty(key);
    }
  
    delete(key) {
      delete this.data[key];
    }
  }
  
  let myMap = new MyMap();
  myMap.set("name", "李四");
  console.log(myMap.get("name")); // 输出 "李四"
  console.log(myMap.has("toString")); // 输出 false (没有继承 toString 方法)

• 创建安全的对象： 如果你需要创建一个高度安全的对象，避免被外部干扰，可以使用 extends null。

  class SecureObject extends null {
    constructor(data) {
      this.data = data;
    }
  
    getData() {
      // 在这里可以进行一些安全检查
      return this.data;
    }
  }
  
  let secureObj = new SecureObject({ sensitiveData: "password" });
  // 只能通过 getData 方法访问数据，可以控制访问权限
  console.log(secureObj.getData()); // 输出 { sensitiveData: "password" }
  // secureObj 没有继承任何方法，降低了被攻击的风险

• 框架和库的底层实现： 一些框架和库可能会使用 extends null 来创建一些底层的对象，例如，事件对象、配置对象等。这样做可以提高性能，并避免原型链上的意外副作用。

五、 使用 extends null 的注意事项

• 兼容性： extends null 是 ES6 的特性，需要考虑浏览器的兼容性。如果你的代码需要在旧版本的浏览器上运行，需要使用 Babel 等工具进行转换。
• 调试： 由于 extends null 创建的对象没有原型链，因此在调试时可能会遇到一些问题。例如，你无法使用 console.dir() 查看对象的原型链。
• 不要滥用： extends null 并不是万能的，只有在特定的场景下才能发挥作用。在大多数情况下，使用默认的原型链就足够了。

六、 总结

extends null 是一个强大的工具，可以帮助我们创建更加纯粹、安全和可控的对象。但是，它也需要谨慎使用，避免滥用。只有在真正需要的时候，才能发挥它的价值。

总而言之，extends null 就像一把手术刀，用好了能治病救人，用不好可能会伤到自己。希望今天的讲解能帮助大家更好地理解和使用这个特性。

感谢大家的观看！咱们下次再见！