js原型面试题大全 - 深度解析原型链与面试高频考点

为什么必须精通原型？

在JavaScript面试中，js原型面试题几乎出现在每一个大厂的笔试和面试环节中。无论是初级工程师还是高级架构师，对原型的理解程度直接决定了开发者对JavaScript语言本质的把握。JavaScript是一门基于原型（Prototype-based）的语言，这与传统的基于类（Class-based）的语言如Java、C++有着本质的区别。理解原型不仅是解决面向对象编程问题的关键，更是优化性能、设计框架底层逻辑的基础。

许多开发者在学习JavaScript初期，往往被构造函数、实例、原型对象等概念搞得晕头转向。然而，一旦打通了原型链的任督二脉，你会发现JavaScript的面向对象编程变得优雅而强大。本文将通过详细的图解、代码示例和面试真题，帮助你彻底攻克这一难关。

核心观点： 原型是JavaScript实现继承和共享属性的核心机制。掌握原型，就掌握了JavaScript的灵魂。

js原型面试题：三大核心概念

prototype

prototype是函数（Function）特有的一个属性。它是一个对象，用于存放实例共享的属性和方法。当通过构造函数创建实例时，实例会自动获得指向该构造函数的prototype对象的链接。

function Person() {}
console.log(Person.prototype); // { constructor: ... }

proto

__proto__是每个对象（包括函数）都拥有的一个内部属性（非标准，但被所有浏览器支持）。它指向创建该对象的构造函数的prototype对象。它是访问原型链的关键路径。

const p = new Person();
console.log(p.__proto__ === Person.prototype); // true

constructor

constructor属性存在于prototype对象上，指向构造函数本身。它用于标识对象的构造器。注意：修改prototype对象时，需手动恢复constructor属性。

console.log(Person.prototype.constructor === Person); // true

原型链：JavaScript继承的基石

原型链是JavaScript实现继承的核心机制。当一个对象访问属性或方法时，JavaScript引擎会首先在该对象自身查找。如果找不到，就会沿着__proto__链向上查找，直到找到该属性或到达原型链的顶端（Object.prototype）。

原型链的终点

原型链的终点是Object.prototype，它的__proto__值为null。这意味着查找过程在到达这里后会停止。理解这一点对于排查“属性未定义”错误至关重要。

层级	对象	说明
1	实例对象	通过构造函数创建的对象，拥有自身属性和方法
2	构造函数.prototype	存储实例共享的属性和方法
3	Object.prototype	所有对象的最终原型，提供toString, valueOf等方法
4	null	原型链的终点，表示查找结束

示例：原型链查找过程

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise.');
};
function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
    console.log(this.name + ' barks.');
};
const dog = new Dog('Rex');
dog.speak(); // "Rex barks."
// 查找顺序: dog -> Dog.prototype -> Animal.prototype -> Object.prototype

js原型面试题：常见继承模式

原型继承

构造函数继承

组合继承

ES6 Class继承

原型链继承

通过让子类的prototype指向父类的实例来实现继承。这种方式简单，但存在两个主要问题：一是父类引用类型的属性会被所有实例共享，二是创建子类实例时无法向父类构造函数传参。

function Parent() {
    this.colors = ['red', 'blue'];
}
function Child() {}
Child.prototype = new Parent();
const child1 = new Child();
const child2 = new Child();
child1.colors.push('green');
console.log(child2.colors); // ["red", "blue", "green"]

缺点： 引用属性共享，无法传参。

构造函数继承

在子类构造函数内部使用call或apply调用父类构造函数。这种方式解决了引用属性共享的问题，每个实例都有独立的属性副本。但缺点是方法无法复用，每次创建实例都会重新创建方法。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
function Child(name, age) {
    Parent.call(this, name); // 继承属性
    this.age = age;
}
const child1 = new Child('Alice', 20);
const child2 = new Child('Bob', 22);
child1.colors.push('green');
console.log(child2.colors); // ["red", "blue"]

缺点： 方法无法复用，内存浪费。

组合继承

结合原型链继承和构造函数继承的优点。使用原型链继承原型上的方法和属性，使用构造函数继承实例属性。这是最常用的继承模式，但缺点是父类构造函数会被调用两次。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
function Child(name, age) {
    Parent.call(this, name); // 第二次调用
    this.age = age;
}
Child.prototype = new Parent(); // 第一次调用
Child.prototype.constructor = Child;
const child = new Child('Alice', 20);
child.sayName(); // "Alice"

ES6 Class继承

ES6引入了Class语法糖，使继承更易于理解和书写。底层仍然是原型链继承，但语法更简洁。使用extends和super关键字。

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类构造函数
        this.age = age;
    }
    sayAge() {
        console.log(this.age);
    }
}

优势： 语法简洁，避免了两次调用父类构造函数的缺点。

js原型面试题：网友最关心的10个问题

基于对各大技术社区和面试反馈的分析，我们整理了以下高频问题及其深度解答。

Q1: prototype和__proto__有什么区别？

prototype是函数（Function）的属性，指向原型对象；__proto__是对象的属性，指向创建该对象的构造函数的prototype。在ES6中，__proto__被标准化为内部属性[[Prototype]]的访问器，推荐使用Object.getPrototypeOf()和Object.setPrototypeOf()。

Q2: Object.create()的作用是什么？

Object.create(proto[, propertiesObject])创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。这是实现原型继承最干净的方式，避免了调用构造函数。

Q3: 为什么ES6 Class是语法糖？

ES6 Class在底层仍然是基于原型的。Class只是让JS面向对象编程的写法更接近传统面向对象语言，但本质没有改变。可以通过typeof Person和Person.prototype来验证。

Q4: 如何判断一个属性是自身属性还是原型属性？

使用hasOwnProperty()方法。例如：obj.hasOwnProperty('prop')返回true表示是自身属性，false表示是原型属性或不存在。注意：in操作符会检查原型链，而hasOwnProperty不会。

Q5: 什么是原型污染？如何防范？

原型污染是指攻击者能够修改JavaScript对象的原型，从而在应用程序中引入安全漏洞。防范方法包括：禁用Object.prototype的扩展，使用Object.create(null)创建干净的对象，对用户输入进行严格校验。

Q6: 构造函数和普通函数的区别？

本质上没有区别，都是Function实例。区别在于调用方式。构造函数通常首字母大写，通过new关键字调用。普通函数直接调用。构造函数内部可以使用this指向新创建的实例。

Q7: 箭头函数有prototype吗？

没有。箭头函数没有自己的prototype属性，也不能用作构造函数。它没有自己的this，而是继承外层作用域的this。

Q8: 如何正确实现深拷贝？

深拷贝需要考虑循环引用和复杂类型。可以使用structuredClone()（现代浏览器支持），或递归实现。注意处理原型链上的属性，通常Object.assign和展开运算符只进行浅拷贝。

Q9: 什么是闭包？与原型有什么关系？

闭包是指有权访问另一个函数作用域中变量的函数。虽然闭包和原型没有直接关系，但在原型方法中访问外部变量时，可能会形成闭包，导致内存泄漏。理解作用域链和原型链有助于优化性能。

Q10: 如何在原型上添加私有属性？

原型本身不支持私有属性。但可以通过闭包模拟私有属性，或使用ES6的WeakMap来存储私有数据。例如：const privateData = new WeakMap();，在构造函数中privateData.set(this, {})。

js原型面试题：常见陷阱与最佳实践

陷阱1：修改原型顺序

在设置原型链时，务必先设置prototype，再添加方法。否则新添加的方法可能丢失。

// 错误
Child.prototype = new Parent();
Child.prototype.method = function() {}; // 正确
// 错误
Child.prototype.method = function() {}; // 丢失
Child.prototype = new Parent();

陷阱2：constructor属性丢失

当重写prototype时，constructor属性会丢失，需要手动恢复。

Child.prototype = {
    constructor: Child, // 手动恢复
    method: function() {}
};

最佳实践：使用Object.create

避免使用new Parent()来设置原型，因为会调用父类构造函数，可能产生副作用。使用Object.create(Parent.prototype)更安全。

网友们还关心

除了核心的原型面试题，求职者还经常关注以下相关问题，这些知识点对构建完整的前端知识体系至关重要：

⚡ JavaScript事件循环（Event Loop）机制：理解宏任务和微任务，掌握异步编程核心。
⚡ Vue/React响应式原理：现代框架的底层实现，离不开对数据劫持和依赖收集的理解。
⚡ TypeScript类型系统：静态类型检查，提升代码可维护性，大厂必备技能。
⚡ Webpack/Vite构建工具：模块化打包，性能优化，前端工程化核心。
⚡ HTTP/HTTPS协议：网络基础，安全通信，性能优化关键。

这些知识点与原型机制相辅相成，共同构成了JavaScript开发者必备的技能树。建议在学习原型的同时，逐步拓展这些相关领域。