JS原型链怎么运行时分析？底层原理揭秘

▌ 技术引导
JS原型链运行时的分析，是理解对象继承与属性查找机制的必经之路。你要是没搞清楚原型链是怎么运作的，根本没法判断代码执行时到底从哪一层找到了属性。直接上干货：原型链的本质是对象间的连接链，而运行时的属性查找遵循“就近原则”，先在对象自身查找，找不到再沿原型链向上。最常见的是通过`__proto__`或`Object.getPrototypeOf()`追踪，但这种做法在性能上并不友好，尤其是在频繁访问时。
我们实际开发中遇到的很多“找不到方法”或“方法被覆盖”的问题，根源都出在原型链查找路径没有控制好。比如，当你给一个Array实例添加了一个`map`方法，然后发现其他Array实例的`map`行为异常，那一定是原型链上覆盖了方法，导致查找路径优先走了错误的层级。
另外，原型链的查找是动态的，你可能会在代码运行时修改某个对象的原型，从而改变属性查找顺序。这在某些框架中是常见操作，比如Vue3的响应式系统，它会通过Proxy包装对象，进而影响原型链行为。
还有个容易被忽视的点：原型链的深度不是固定的，比如链式调用`obj.__proto__.__proto__...`可能导致栈溢出，或者访问到不安全的内部属性。
最高效的做法是用`hasOwnProperty`配合`Object.prototype`来判断属性来源，尽量避免使用`__proto__`。

▌ 技术参考

一 将原型链视为对象的连接链，而非线性结构。
JS中的对象本质上是基于原型的，每个对象都有一个隐式的`__proto__`属性，指向其构造函数的`prototype`。这种连接关系在运行时是动态的，意味着当你访问一个对象的属性时，JS引擎会沿着这条链向上查找。比如，如果你调用`Array.prototype.map`，但你的Array实例的`__proto__`被改造过，那么实际调用的可能不是原生的`map`方法，而是你定义的其他函数。这种行为在开发时容易导致“方法找不到”或“行为异常”的问题。这时候，你得通过`Object.getPrototypeOf(obj)`来获取当前对象的原型，而不是依赖`__proto__`，因为它在某些环境下可能被重写。

二 运行时属性查找的优先级规则。
JS在查找属性时遵循“就近原则”，也就是先在对象自身查找，如果没有找到，再沿着原型链查询。例如，`obj.x`会优先查找`obj`自己的`x`属性，找不到才会去`obj.__proto__`。如果`obj.__proto__`上也没有，继续向上，直到`null`。这个过程是递归的，而递归深度直接影响性能。比如，每次调用`obj.map()`如果要遍历到`Object.prototype`，会比直接访问`Array.prototype`多耗时。
这种设计虽然灵活，但也容易引发矛盾。特别是在类继承、对象组合等场景下，原型链的查找路径可能被多个层覆盖，导致预期的行为未出现。比如，你定义了一个`Person`对象，然后给它添加了一个`getName`方法，但之后又给`Object.prototype`添加了同名方法，这时`Person`的实例调用`getName()`会优先调用原型上的方法，而不是你定义的那个。

三 实际操作中如何追踪原型链。
如果你想追踪某个对象的原型链，可以使用`Object.getPrototypeOf(obj)`来获取当前对象的直接原型。比如：
```javascript
const obj = {};
console.log(Object.getPrototypeOf(obj)); // 会输出Object.prototype
```
但如果你需要查看完整的原型链，可以使用`Object.prototype.__proto__`属性，不过这种方法不推荐，因为`__proto__`可能被polyfill或框架修改。更好的方式是使用`Reflect.ownKeys(obj)`来获取对象自身所有属性，包括不可枚举的。或者使用`Object.keys(obj)`，但这只能获取可枚举的属性。
在调试过程中，你也可以通过Chrome DevTools的“Sources”面板，直接点击对象查看其原型链结构，这种方式对理解运行时行为非常直观。

四 原型链覆盖导致的常见问题。
原型链覆盖往往出现在库或框架中，比如你可能在使用某个UI库时，发现`Element.prototype`被扩展了`render()`方法，导致原本定义在`HTMLElement.prototype`上的方法被跳过。这种情况下，你得通过`Object.prototype.hasOwnProperty.call(obj, 'render')`来判断该属性是否属于当前对象本身，而不是从原型链继承而来。
此外，在使用`Object.assign`或`Object.create`创建新对象时，如果原对象的原型被改写，那么新对象的原型链也会被影响。比如，调用`Object.create(Person.prototype)`会创建一个继承自`Person`原型的新对象，而`Object.assign`则会把源对象的自身属性复制到目标对象上，原型链不会被改变。

五 使用`hasOwnProperty`判断属性来源。
在判断一个对象是否拥有某个属性时，直接使用`obj.hasOwnProperty('x')`会更准确，因为它只检查对象自身的属性，而不是原型链上的。例如：
```javascript
function Person() {}
Person.prototype.x = 10;
const p = new Person();
console.log(p.hasOwnProperty('x')); // false
console.log(Object.prototype.hasOwnProperty.call(p, 'x')); // true
```
这种方式避免了原型链查找带来的延迟，尤其在需要频繁判断属性来源的场景下，比如数据验证或事件监听器的管理，能够显著提升性能。

六 迭代器或Symbol属性对原型链的影响。
JS中的一些特殊属性，如Symbol类型的键，不会出现在`for...in`循环中，也不会被`Object.keys`捕获。但如果这些Symbol键被定义在原型链上，那么它们仍然可以通过`Reflect.ownKeys(obj)`被访问到。比如：
```javascript
const key = Symbol('x');
Object.prototype[key] = 20;
const obj = {};
console.log(Reflect.ownKeys(obj)); // [Symbol(x)]
```
这种现象在使用Symbol作为属性名时需要特别注意。如果你在某个类中定义了Symbol属性，但希望它不被继承，就要确保它不会被放置在原型链上。否则，子类实例可能也会拥有该属性，但你无法通过常规方式获取到它。

七 原型链深度与性能损耗的关系。
原型链的深度直接影响查找属性的效率。例如，调用`obj.x`如果需要遍历五层原型链，就比直接在`obj`上查找要慢很多。在大型应用中，频繁访问深层原型链可能导致性能瓶颈，特别是在事件处理、数据处理或渲染逻辑中。
可以使用`Object.prototype.isPrototypeOf`来判断对象是否在某个原型链上，而不是在运行时逐层查找。这种方式可以避免不必要的查找，提升效率。比如：
```javascript
const obj = new Object();
const proto = Object.prototype;
console.log(obj.isPrototypeOf(proto)); // false
console.log(proto.isPrototypeOf(obj)); // true
```

八 类继承与原型链的关系。
类继承在ES6中基于原型链实现，`class A extends B`实际上会创建一个新对象作为`A`的原型，并将`B`的原型链连接到它上面。这样，`A`的实例会继承`B`的原型属性和方法。但如果你在`B`的原型上定义了一个属性或方法，它会被所有`A`的实例继承。
在使用类继承时，要注意不要在原型链上添加过多的属性，这会增加查找时间。可以使用`Object.defineProperty`来定义不可枚举的属性，避免它们被`for...in`遍历到。例如：
```javascript
Object.defineProperty(Person.prototype, 'x', {
value: 10,
enumerable: false,
writable: true,
configurable: true
});
```

九 用`getPrototypeOf`代替`__proto__`进行原型链分析。
`__proto__`属性虽然方便，但它不是标准属性，也不推荐在生产环境中使用。更好的做法是使用`Object.getPrototypeOf()`来获取原型。比如：
```javascript
const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto === Object.prototype); // true
```
这不仅能保证代码的兼容性，还能避免某些环境下的陷阱，比如某些框架可能会重写`__proto__`，导致查找路径出错。

十 踩坑场景：原型链污染。
原型链污染是指在运行时，某个对象的原型链被篡改，导致原本不属于该对象的属性或方法被污染。比如，在某些框架中，如果对`Object.prototype`进行扩展，可能会引发安全问题。比如：
```javascript
Object.prototype.constructor = function() { return 'polluted'; };
const obj = {};
console.log(obj.constructor()); // 'polluted'
```
这种污染在使用`__proto__`或`Object.setPrototypeOf`时更容易发生，需要谨慎处理。建议使用`Object.defineProperty`设置不可写和不可配置的属性，防止被篡改。

十一 原型链查找的底层实现机制。
JS引擎在查找属性时，会先在对象自身查找，如果没有找到，继续沿着`__proto__`链向上查找。这个过程是通过内部方法实现的，比如`[[Get]]`操作符。
不同JS引擎的实现可能略有差异，比如V8引擎会将原型链缓存起来以提升查找效率，而SpiderMonkey可能会在每次查找时重新构建链。这说明原型链的查找效率取决于引擎优化，而不是完全可控的。

十二 原型链与Object.create的关联。
`Object.create`方法可以创建一个新对象，并指定它的原型。比如：
```javascript
const proto = { x: 10 };
const obj = Object.create(proto);
console.log(obj.x); // 10
```
这会构建一个原型链，`obj`的`__proto__`指向`proto`，而`proto`的`__proto__`指向`Object.prototype`。
如果你需要创建一个对象，并确保它不继承某些属性，可以通过设置`proto`为`null`来避免继承，但这样会失去对象的默认行为，比如`toString()`等。

十三 工具辅助分析原型链。
在实际开发中，可以使用Chrome DevTools的“Sources”面板来查看对象的原型链。打开控制台，输入`obj`，然后点击“Prototype”展开，可以看到所有原型链上的属性和方法。
此外，使用`debugger`语句配合断点，能更直观地观察属性查找过程。比如，在一个方法中添加`debugger`，然后运行代码，停在断点处，查看`this`对象的原型链。这种方式对调试和学习原型链非常有帮助。

十四 用Proxy控制原型链访问。
ES6的`Proxy`对象可以拦截对对象属性的访问，包括原型链上的属性。比如，你可以通过`get`拦截器来控制是否允许访问某个属性。
```javascript
const obj = { x: 10 };
const proxy = new Proxy(obj, {
get: function(target, prop) {
if (prop === 'x') {
return 20;
}
return Reflect.get(target, prop);
}
});
console.log(proxy.x); // 20
```
这种方式可以让你在运行时动态控制属性访问，但要注意代理的性能开销，尤其是在高频率访问时。

十五 避免原型链污染的进阶技巧。
除了使用`Object.defineProperty`，还可以使用`Object.freeze`或`Object.seal`来防止原型被修改。例如：
```javascript
Object.freeze(Object.prototype);
```
但这会全局影响，不建议在生产环境中使用。更安全的做法是，在创建对象时，使用`Object.create`并设置一个不可变的原型，或者使用类继承来封装逻辑，避免直接操作原型链。
如果你在开发一个库，希望避免被其他代码污染，可以使用`Object.getOwnPropertySymbols(obj)`来获取对象自身的Symbol属性，或者通过`Reflect.ownKeys(obj)`来检查是否有未预期的属性被添加。