面试题：JavaScript中原型链对性能有哪些常见影响

Question

请阐述JavaScript原型链在查找属性和方法过程中，对性能产生影响的常见情况，并举例说明如何避免因原型链查找导致的性能问题。

Answer 1

常见性能影响情况

1. 过长的原型链：原型链层级过多，每次查找属性或方法都需要遍历多层原型，增加查找时间。例如：

function A() {}
function B() {}
function C() {}
function D() {}
B.prototype = new A();
C.prototype = new B();
D.prototype = new C();
let d = new D();
// 当查找d的某个属性时，若该属性不在D自身，会沿着原型链依次查找C、B、A，层级越多性能越差

2. 频繁查找不存在的属性：在原型链上反复查找不存在的属性，每次都要遍历完整原型链，浪费性能。例如：

function Person() {}
let person = new Person();
// 每次访问person不存在的属性，如person.nonExistentProp，都会触发原型链查找直到顶端Object.prototype
for (let i = 0; i < 10000; i++) {
    console.log(person.nonExistentProp);
}

避免性能问题的方法

1. 缓存属性查找结果：如果某个属性或方法会被多次使用，将其缓存到变量中，避免重复原型链查找。例如：

function Animal() {
    this.speak = function() {
        console.log('I am an animal');
    };
}
let animal = new Animal();
// 缓存speak方法
let speakFunc = animal.speak;
for (let i = 0; i < 10000; i++) {
    speakFunc();
}

2. 尽量减少原型链层级：设计对象结构时，保持原型链简短。例如，若不是必要，避免创建多层继承关系。
3. 使用hasOwnProperty方法：在访问属性前，使用hasOwnProperty方法判断属性是否在对象自身，避免不必要的原型链查找。例如：

function Person(name) {
    this.name = name;
}
let person = new Person('John');
if (person.hasOwnProperty('name')) {
    console.log(person.name);
}