面试题 - JavaScript 中原型及原型链

前言

JavaScript 中的继承主要是通过原型来实现。而原型继承少不了两个重要的属性 __proto__ 和 prototype。今天整理一下前端面试题中的原型和原型链题目。

试题1

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

解析：

1. Foo.a() 的输出值为 4。此时并没有调用 Foo 构造函数。
2. obj.a() 的输出值为 2。虽然原型上也有 a 方法。但是实例对象 obj 上也有 a 方法，所以会先在自身找，找不到时才去原型链上找。
3. Foo.a() 的输出值为1。调用了构造函数 Foo 之后，Foo 内部的 this.a 方法覆盖了外层的 Foo.a 。

试题2

写出以下实例对象的所有原型链。

function Person(name){
 this.name = name;
};
var jack = new Person("jack");

解析：

实例对象的原型链：

1. jack.__proto__ === Person.prototype;
2. Person.prototype.__proto__ === Object.prototype;
3. jack.__proto__.__proto__ === Object.prototype;

构造函数的原型链：

4. Person.__proto__ === Function.prototype;
5. Function.prototype === Function.__proto__;
6. Function.prototype.__proto__ === Object.prototype;
7. Function.__proto__.__proto__ === Object.prototype;
8. Person.__proto__.__proto__ === Object.prototype;

持续更新中…