JS原型链属性覆盖技巧全解析

本文深入解析了JavaScript原型链中的属性屏蔽机制，这是一种通过在实例上定义与原型同名属性，使实例优先访问自身属性而非继承属性的技术。文章详细阐述了属性屏蔽的原理、实现方法，包括如何使用`hasOwnProperty()`判断属性来源，以及如何通过`delete`操作符恢复对原型属性的访问。同时，探讨了属性屏蔽在个性化定制、避免命名冲突和性能优化方面的应用。此外，还介绍了如何利用`Object.defineProperty()`进行更精细的属性控制。然而，文章也提醒开发者注意属性屏蔽可能带来的代码可读性和维护性问题，并提供了避免不必要屏蔽的建议，以及ES6 `class`和`extends`等替代方案，旨在帮助开发者在实际项目中合理、高效地运用原型链属性屏蔽技术。

原型链属性屏蔽的核心是在实例上定义同名属性，使其优先访问自身属性而非原型链上的属性。1. 当在实例上添加与原型同名的属性时，该属性会屏蔽原型中的属性，不影响其他实例或原型本身；2. 使用 hasOwnProperty() 方法可判断属性是否为实例自身所有，返回 true 表示是自身属性，false 表示继承自原型；3. 使用 delete 操作符删除实例属性后，可恢复对原型属性的访问；4. 属性屏蔽可用于个性化定制、避免命名冲突及提升访问性能；5. 可通过 Object.defineProperty() 更精细地控制属性的 writable、enumerable 和 configurable 特性；6. 需注意属性屏蔽可能降低代码可读性和维护性，尤其在复杂原型链中；7. 为避免不必要的屏蔽，应合理设计对象模型，使用命名空间或约定区分属性；8. ES6 的 class 和 extends 提供了更清晰的继承语法，是原型链的语法糖，也可结合组合、代理等模式替代传统原型继承。总之，属性屏蔽是一种有效但需谨慎使用的技术，应在明确需求下合理应用，并优先考虑代码的可维护性与结构清晰性。

原型链属性屏蔽，简单来说，就是让实例访问到的属性是它自身的，而不是从原型链上继承来的。这在某些场景下非常有用，比如你想修改一个继承来的属性，但又不想影响到原型对象，或者其他实例。

解决方案

实现原型链属性屏蔽的核心在于：在实例对象上直接定义一个同名属性。 当 JavaScript 引擎查找一个属性时，它会首先在对象自身上查找，如果找到了，就直接返回，不再沿着原型链向上查找。

举个例子：

function Animal(name) {
  this.name = name;
}

Animal.prototype.sound = "Generic animal sound";

const dog = new Animal("Dog");

console.log(dog.sound); // 输出 "Generic animal sound"

// 屏蔽原型链上的 sound 属性
dog.sound = "Woof!";

console.log(dog.sound); // 输出 "Woof!"
console.log(Animal.prototype.sound); // 输出 "Generic animal sound"

在这个例子中，dog 实例最初继承了 Animal.prototype.sound 属性。 但是，当我们给 dog 实例添加了一个名为 sound 的属性后，dog 访问到的就是它自身的 sound 属性，而不是原型链上的 sound 属性了。 原型上的 sound 属性并没有改变，其他 Animal 实例的 sound 属性也不会受到影响。

如何判断一个属性是自身的还是继承的？

可以使用 hasOwnProperty() 方法来判断一个属性是否是对象自身的属性。

console.log(dog.hasOwnProperty("sound")); // 输出 true
console.log(dog.hasOwnProperty("name")); // 输出 true
const cat = new Animal("Cat");
console.log(cat.hasOwnProperty("sound")); // 输出 false

hasOwnProperty() 方法返回 true，表示该属性是对象自身的属性；返回 false，表示该属性是从原型链上继承的。

如何删除实例上的属性，恢复原型链上的属性？

使用 delete 操作符可以删除对象自身的属性。

delete dog.sound;

console.log(dog.sound); // 输出 "Generic animal sound"
console.log(dog.hasOwnProperty("sound")); // 输出 false

删除 dog 实例上的 sound 属性后，dog 再次访问 sound 属性时，就会沿着原型链向上查找，找到 Animal.prototype.sound 属性。

为什么要屏蔽原型链上的属性？

• 个性化定制： 允许实例拥有与原型对象不同的属性值，实现个性化定制。
• 避免冲突： 当原型对象上的属性名与实例需要使用的属性名冲突时，可以使用属性屏蔽来避免冲突。
• 性能优化： 在某些情况下，访问对象自身的属性比访问原型链上的属性更快。 虽然这点性能差异通常可以忽略不计，但在对性能要求极高的场景下，可以考虑使用属性屏蔽。

使用 Object.defineProperty() 进行更精细的控制

如果你需要更精细地控制属性的行为，可以使用 Object.defineProperty() 方法。 例如，你可以设置属性的 writable、enumerable 和 configurable 属性。

const person = {};

Object.defineProperty(person, "age", {
  value: 30,
  writable: false, // 不可修改
  enumerable: true, // 可枚举
  configurable: false // 不可删除
});

console.log(person.age); // 输出 30

person.age = 40; // 尝试修改，但无效

console.log(person.age); // 仍然输出 30

delete person.age; // 尝试删除，但无效

console.log(person.age); // 仍然输出 30

Object.defineProperty() 提供了更强大的控制能力，可以让你精确地定义属性的行为。 但是，过度使用可能会使代码变得复杂，所以要根据实际情况选择合适的方法。

属性屏蔽的潜在问题

虽然属性屏蔽有很多优点，但也需要注意一些潜在问题：

• 代码可读性： 过度使用属性屏蔽可能会使代码变得难以理解，特别是当原型链比较复杂时。
• 维护性： 如果原型对象的属性发生变化，需要手动更新所有屏蔽了该属性的实例，否则可能会导致不一致的行为。

总的来说，属性屏蔽是一种强大的技术，可以让你更灵活地控制对象的属性。 但是，要谨慎使用，并充分考虑其潜在问题。

如何避免不必要的属性屏蔽？

仔细规划你的对象模型，尽量避免原型对象上的属性名与实例需要使用的属性名冲突。 如果必须使用相同的属性名，可以考虑使用不同的命名空间或约定。

原型链与继承的替代方案

虽然原型链是 JavaScript 中实现继承的主要方式，但它并不是唯一的选择。 ES6 引入了 class 关键字，提供了更简洁的语法来定义类和实现继承。 此外，还可以使用组合、代理等设计模式来实现代码复用。

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log("Generic animal sound");
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  makeSound() {
    console.log("Woof!"); // 重写父类的方法
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // 输出 "Woof!"

使用 class 关键字可以使代码更易于理解和维护。 extends 关键字可以方便地实现继承，super() 方法可以调用父类的构造函数。 这实际上是原型链继承的语法糖，但它提供了更清晰的结构。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~