前端面试题
JavaScript原型链详解
1. 原型基础概念
1.1 什么是原型
- 原型(prototype)是JavaScript中一个非常重要的概念，它是实现对象继承的核心机制
- 每个JavaScript对象都有一个内置的[[Prototype]]属性，指向该对象的原型对象。这个属性可以通过__proto__访问（不推荐直接使用）
- 原型对象也是普通对象，同样具有自己的原型对象，这样就形成了一个对象引用的链条，即原型链
- 当我们访问对象的属性时，如果对象本身没有该属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或到达原型链的末端(null)
1.2 原型链的重要性
- 原型链是JavaScript实现继承的根本机制
- 它允许对象共享属性和方法，节省内存空间
- 通过原型链，我们可以实现代码的复用和对象之间的继承关系
- 许多JavaScript内置对象（如Array、String等）都是基于原型链实现的
2. 构造函数、实例和原型对象的关系
2.1 三者关系详解
- 构造函数：用于创建实例的函数，其prototype属性指向原型对象
- 实例：通过构造函数创建的对象，其__proto__属性指向原型对象
- 原型对象：保存着实例共享的属性和方法，其constructor属性指回构造函数
2.2 实例的属性特点
- 实例属性分为两类：
1. 自有属性：在构造函数中通过this定义的属性
2. 继承属性：通过原型链继承的属性
- 使用hasOwnProperty()方法可以判断属性是否为自有属性
- 实例可以覆盖原型对象的同名属性，但不会修改原型对象
2.3 原型对象的特性
- 原型对象可以动态添加属性和方法，所有实例都能立即访问到
- 原型对象的修改会影响所有继承自它的实例
- 可以通过Object.getPrototypeOf()方法安全地获取对象的原型
3. 原型链的继承机制
3.1 继承原理深入解析
- JavaScript通过原型链实现继承，这是一种基于原型的继承方式
- 当访问对象的属性时，JavaScript引擎遵循以下查找顺序：
1. 查找对象自身的属性
2. 如果没找到，查找对象的原型对象
3. 继续沿着原型链向上查找
4. 直到找到属性或达到原型链终点(Object.prototype)
- 原型链的终点是Object.prototype，其__proto__指向null
3.2 继承的实现方式
4. 原型方法详解
4.1 核心原型方法
- Object.create(proto[, propertiesObject])：创建一个新对象，使用现有对象作为新对象的原型
- Object.getPrototypeOf(obj)：获取对象的原型（推荐使用此方法而不是__proto__）
- Object.setPrototypeOf(obj, prototype)：设置对象的原型（不推荐使用，会影响性能）
- isPrototypeOf()：检查一个对象是否存在于另一个对象的原型链上
4.2 实用原型方法
- hasOwnProperty(prop)：检查对象是否拥有特定的自有属性
- propertyIsEnumerable(prop)：检查属性是否可枚举
- toString()：返回对象的字符串表示
- valueOf()：返回对象的原始值
5. 实际应用场景与最佳实践
5.1 常见应用场景
1. 实现类继承
2. 扩展内置对象功能
3. 创建可复用的对象方法
4. 实现混入(Mixin)模式
5.2 注意事项与最佳实践
1. 避免修改内置对象的原型，可能导致命名冲突和不可预期的行为
2. 优先使用Object.getPrototypeOf()而不是__proto__
3. 使用Object.create(null)创建没有原型的对象，适用于纯数据字典场景
4. 合理使用继承深度，过深的原型链会影响性能
5. 使用class语法糖来创建更清晰的继承结构（ES6+）