JavaScript 原型继承面试题本质解读

xiaoshi 05-30 11 抢沙发

默认

摘要： ...

别再死记硬背！一文读懂JavaScript原型继承面试题本质

原型继承基础概念得先拎清

JavaScript里的原型继承，那可是个重要玩意儿。咱们先从基础说起，每个函数都有个prototype属性，这就是原型对象。比如说，你定义了一个构造函数Person：

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log('Hello, I'm'+ this.name);
};

这里Person.prototype就有了个sayHello方法。当你用new Person('Tom')创建实例时，这个实例就会通过__proto__属性链接到Person.prototype。就好比实例是个小孩，Person.prototype就是小孩的家谱，小孩能从家谱里找到一些共有的特性（方法）。理解这一点，是吃透原型继承面试题的第一步。

原型链是解题关键线索

原型链就像是一条串联起各种对象的线。接着上面的例子，当你调用let tom = new Person('Tom'); tom.sayHello()时，JavaScript引擎咋知道sayHello方法在哪呢？它会先在tom这个实例自身找，要是没找到，就顺着__proto__这条线，去Person.prototype里找。要是还没有，就继续往上找Object.prototype，直到找到或者到头（null）为止。这就像你要找某个东西，先在家里找，找不到就去邻居家，邻居家没有再去隔壁村找，一路找下去。面试题里常考对原型链查找机制的理解，比如问你修改原型对象上的属性，对已创建的实例有啥影响。理解了原型链，答案就很清晰啦。

常见面试题“陷阱”剖析

原型对象修改与实例关系：题目可能会这么出，先创建一堆实例，然后修改原型对象上的属性或方法，问你实例的变化。例如：
```
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name +'makes a sound');
};
let dog = new Animal('Dog');
let cat = new Animal('Cat');
Animal.prototype.speak = function() {
console.log(this.name +'says something different');
};
```
这里修改了Animal.prototype的speak方法，dog和cat实例调用speak方法时，就会执行新的逻辑。因为它们是通过原型链找到speak方法的，原型对象一变，它们跟着变。
instanceof 操作符原理：instanceof也是常考点。比如问你dog instanceof Animal为啥返回true。这是因为instanceof就是检查右边构造函数的prototype属性，是否在左边对象的原型链上。dog的原型链上有Animal.prototype，所以返回true。搞懂这些“陷阱”，面试答题就能避开误区。