JS `__proto__` 属性的修改对性能的严重影响与避免方法

咳咳，各位，今天咱们聊点刺激的——JavaScript 中 __proto__ 这个小家伙。别看它名字里带俩下划线，好像很神秘，但用不好，它可是性能杀手！今天咱们就把它扒个精光，看看它怎么作妖，以及怎么优雅地避开它挖的坑。

一、__proto__ 是个啥？（以及它为什么这么“拽”）

简单来说，__proto__ 是一个对象内部的属性，指向该对象的原型对象。原型对象又是啥？你可以把它想象成一个模具，对象就是从这个模具里印出来的。

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

const dog = {
  name: '旺财',
  bark: function() {
    console.log('汪汪汪');
  }
};

// 让 dog 继承 animal 的属性和方法
dog.__proto__ = animal;

console.log(dog.name); // 输出：旺财 (dog 自己的属性)
console.log(dog.eat()); // 输出：吃东西 (从 animal 继承来的)

看起来挺美好，是吧？dog 不仅有自己的 name 和 bark，还能 eat 了！这就是原型链的力量。当我们访问 dog 的某个属性或方法时，如果 dog 自己没有，JS 引擎就会沿着 __proto__ 向上找，直到找到为止，或者一直找到原型链的顶端（null）。

那它为啥这么“拽”呢？答案就在于：修改 __proto__ 会破坏 JavaScript 引擎的优化。

二、__proto__ 的“罪状”：性能杀手

原型链查找变慢：

当你在代码中修改了对象的 __proto__ 属性，JavaScript 引擎就不得不放弃之前做的各种优化，因为它无法确定原型链是否发生了改变。每次访问属性时，都需要重新遍历原型链，寻找相应的属性或方法。这就像你本来记住了一条捷径，结果突然有人把路给改了，你只能重新摸索路线，速度自然就慢下来了。
```
// 例子：
const obj1 = {};
const obj2 = {};
const obj3 = {};

obj1.__proto__ = obj2; // 修改原型链

console.time('访问属性');
for (let i = 0; i < 1000000; i++) {
  obj1.someProperty; // 访问 obj1 的属性，触发原型链查找
}
console.timeEnd('访问属性'); // 耗时会明显增加
```

影响构造函数的优化：

构造函数在创建对象时，会默认设置对象的 __proto__ 指向构造函数的 prototype 属性。如果我们在构造函数创建对象后，又修改了对象的 __proto__，这会使得构造函数的优化失效。JavaScript 引擎会认为你创建的对象是“特殊”的，需要单独处理，而不是按照统一的模板来优化。

function MyClass() {
  this.value = 1;
}

const instance1 = new MyClass();
const instance2 = new MyClass();

instance1.__proto__ = {}; // 修改原型链

console.time('访问属性');
for (let i = 0; i < 1000000; i++) {
  instance1.value; // 访问 instance1 的属性
  instance2.value; // 访问 instance2 的属性
}
console.timeEnd('访问属性'); // 访问 instance1 的属性耗时会增加

V8 引擎的“隐藏类”优化失效：

V8 引擎使用一种叫做“隐藏类”的技术来优化对象的属性访问。简单来说，V8 会根据对象的属性结构创建一个隐藏类，并把具有相同属性结构的对象归为一类。这样，在访问对象的属性时，V8 就可以直接从隐藏类中获取属性的偏移量，而不需要每次都去查找对象的属性表。

但是，如果你修改了对象的 __proto__，V8 就无法确定对象的属性结构是否发生了改变，也就无法使用隐藏类进行优化了。

三、__proto__ 的“替罪羊”：Object.getPrototypeOf 和 Object.setPrototypeOf

ES6 引入了 Object.getPrototypeOf 和 Object.setPrototypeOf 这两个方法，作为 __proto__ 的替代品。它们的作用和 __proto__ 类似，但不会直接修改对象的原型链，而是通过一种更加安全的方式来操作。

Object.getPrototypeOf(obj)： 获取对象 obj 的原型对象。
Object.setPrototypeOf(obj, prototype)： 设置对象 obj 的原型对象为 prototype。

// 使用 Object.setPrototypeOf 替代 __proto__

const animal = {
  name: '动物',
  eat: function() {
    console.log('吃东西');
  }
};

const dog = {
  name: '旺财',
  bark: function() {
    console.log('汪汪汪');
  }
};

// 使用 Object.setPrototypeOf 设置 dog 的原型
Object.setPrototypeOf(dog, animal);

console.log(dog.name); // 输出：旺财
console.log(dog.eat()); // 输出：吃东西

重点：虽然 Object.setPrototypeOf 比直接修改 __proto__ 稍微好一点，但它仍然会带来性能损失。 原因是它仍然会触发原型链的重新计算，影响 V8 引擎的优化。

四、最佳实践：尽量避免修改原型链

既然修改原型链这么危险，那我们应该怎么办呢？记住一个原则：尽量避免修改原型链！

使用字面量创建对象：

字面量创建对象是最简单、最直接的方式，不会涉及到原型链的修改。
```
// 字面量创建对象
const obj = {
  name: '张三',
  age: 18
};
```

使用 Object.create(prototype) 创建对象：

Object.create(prototype) 可以创建一个新对象，并将该对象的原型设置为 prototype。这种方式比直接修改 __proto__ 更加安全，但仍然要谨慎使用。

// 使用 Object.create 创建对象
const animal = {
  name: '动物',
  eat: function() {
    console.log('吃东西');
  }
};

const dog = Object.create(animal);
dog.name = '旺财';
dog.bark = function() {
  console.log('汪汪汪');
};

console.log(dog.name); // 输出：旺财
console.log(dog.eat()); // 输出：吃东西

使用 class 语法 (ES6)：

ES6 的 class 语法提供了一种更加简洁、清晰的方式来定义类和继承关系。class 语法在底层仍然使用原型链，但它隐藏了原型链的细节，让我们可以更加专注于业务逻辑。

// 使用 class 语法
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log('吃东西');
  }
}

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

  bark() {
    console.log('汪汪汪');
  }
}

const dog = new Dog('旺财');
console.log(dog.name); // 输出：旺财
dog.eat(); // 输出：吃东西
dog.bark(); // 输出：汪汪汪

组合继承：

传统的组合继承方式，虽然代码稍微繁琐，但能够有效地避免原型链的修改。

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

Animal.prototype.eat = function() {
  console.log('吃东西');
};

function Dog(name) {
  Animal.call(this, name); // 借用构造函数继承属性
}

Dog.prototype = Object.create(Animal.prototype); // 原型链继承方法
Dog.prototype.constructor = Dog; // 修复 constructor 指向

Dog.prototype.bark = function() {
  console.log('汪汪汪');
};

const dog = new Dog('旺财');
console.log(dog.name); // 输出：旺财
dog.eat(); // 输出：吃东西
dog.bark(); // 输出：汪汪汪

如果实在需要修改原型链：

如果你的代码中确实需要修改原型链，那么请务必谨慎评估性能影响，并尽量减少修改的次数。可以考虑使用缓存机制，避免重复计算。

五、__proto__ 的“救赎”：性能测试

光说不练假把式，咱们来做个简单的性能测试，看看修改 __proto__ 到底有多“毒”。

// 测试代码
const iterations = 1000000;

// 1. 字面量创建对象
console.time('字面量创建对象');
for (let i = 0; i < iterations; i++) {
  const obj = { a: 1 };
  obj.a;
}
console.timeEnd('字面量创建对象');

// 2. Object.create 创建对象
const proto = { b: 2 };
console.time('Object.create 创建对象');
for (let i = 0; i < iterations; i++) {
  const obj = Object.create(proto);
  obj.b;
}
console.timeEnd('Object.create 创建对象');

// 3. 修改 __proto__
console.time('修改 __proto__');
for (let i = 0; i < iterations; i++) {
  const obj = {};
  obj.__proto__ = proto;
  obj.b;
}
console.timeEnd('修改 __proto__');

// 4. 使用 Object.setPrototypeOf
console.time('使用 Object.setPrototypeOf');
for (let i = 0; i < iterations; i++) {
  const obj = {};
  Object.setPrototypeOf(obj, proto);
  obj.b;
}
console.timeEnd('使用 Object.setPrototypeOf');

在不同的浏览器和 Node.js 环境下运行这段代码，你会发现，修改 __proto__ 和使用 Object.setPrototypeOf 的性能明显低于字面量创建对象和 Object.create。

六、__proto__ 的“身世之谜”：浏览器兼容性

虽然 __proto__ 已经成为了事实上的标准，但它并不是所有浏览器都支持的。一些老版本的浏览器可能不支持 __proto__ 属性。因此，为了保证代码的兼容性，建议使用 Object.getPrototypeOf 和 Object.setPrototypeOf 来操作原型链。

七、总结

特性/方法	优点	缺点	适用场景
字面量创建对象	简单、高效	无法直接继承	创建简单的、不需要继承的对象
`Object.create`	可以指定原型	性能略低于字面量	创建需要继承的对象，但要避免频繁修改原型链
`class` 语法	简洁、清晰	底层仍然是原型链	定义类和继承关系，建议使用
`__proto__`	无	性能差、兼容性问题	尽量避免使用
`Object.setPrototypeOf`	兼容性好	性能较差	兼容性要求高的场景，但要避免频繁使用

总而言之，__proto__ 是一个强大的工具，但也是一个危险的陷阱。在使用它之前，一定要充分了解它的原理和潜在的性能问题，并尽量选择更加安全、高效的替代方案。记住，性能优化是一个持续的过程，需要我们在编码的每一个环节都保持警惕。

好了，今天的讲座就到这里。希望大家以后在使用 __proto__ 的时候，能够多一份思考，少一份踩坑！谢谢各位！

JS `proto` 属性的修改对性能的严重影响与避免方法

发表回复取消回复

发表回复 取消回复

发表回复取消回复