一文彻底理解JavaScript原型与原型链
本文深入解析JavaScript原型与原型链机制。详细阐述prototype与__proto__的定义、区别及联系，解析属性查找规则与constructor属性作用。通过原型链继承示例与完整原型链结构分析，帮助开发者彻底掌握JS面向对象核心，应对面试与实战开发。
前言
掌握JavaScript编程，若不了解原型和原型链，就如同只知造句却不懂语法。原型是JavaScript实现面向对象编程的基石，也是技术面试中的高频考点。本文将系统梳理这一核心概念，助你彻底攻克难点。
一、原型（）是什么
1.1 原型的定义
在 JavaScript 中，原型（Prototype）是函数天生拥有的一个属性。每当你定义一个函数时，JavaScript 引擎会自动为这个函数添加一个 prototype 属性，这个属性的值是一个对象。
1.2 为什么要用原型？
- 将公共属性和方法挂载到原型上，使得所有通过该构造函数创建的实例都能直接调用这些属性和方法。
- 将共用逻辑放置在原型中，可以有效减少构造函数执行时的性能开销，避免为每个实例重复创建相同的函数或属性。
function Car(color) { this.color = color; }
Car.prototype.name = 'su7';
const car1 = new Car('红');
const car2 = new Car('蓝');
console.log(car1.name === car2.name); // true，共享属性
1.3 原型三大特性
| 特性 | 说明 |
|---|---|
| 函数天生拥有 | 每个函数都有 prototype |
| 实例可访问 | 实例能调用原型上的方法 |
| 实例无法修改 | 修改实例只会创建自身属性，不会影响原型 |
Car.prototype.name = 'su7';
const car = new Car('蓝');
car.name = '蔚来'; // 创建实例自身属性
console.log(Car.prototype.name); // su7，原型不受影响
二、隐式原型（）
2.1 什么是隐式原型
JavaScript中所有对象均拥有__proto__属性，该属性指向创建该对象的构造函数的：
function Person() {}
const p = new Person();
console.log(p.__proto__ === Person.prototype); // true
2.2 属性查找规则
当V8引擎访问对象属性时，首先查找对象自身显式存在的属性；若未找到，则沿着指向的原型对象继续查找。
Car.prototype.name = 'su7';
function Car(color) { this.color = color; }
const car = new Car('blue');
console.log(car.name); // su7（原型上找到）
console.log(car.color); // blue（自身属性）
2.3 核心公式
实例.__proto__ === 构造函数.prototype
构造函数.prototype.constructor === 构造函数
2.4 属性
原型对象上的constructor属性指向构造函数本身，用于记录实例的创建者：
function Person() {}
console.log(Person.prototype.constructor === Person); // true
四、原型链详解
4.1 原型链查找
V8引擎在访问对象属性时，若自身未找到，会沿指向的原型继续向上查找；若仍未找到，则继续沿着原型链向上追溯，直至到达null为止。这种逐级查找的关系机制称为原型链查找。
4.2 原型链继承
原型链是实现JavaScript继承的核心机制：
Grand.prototype.house = function() { console.log('汤臣一品'); };
function Grand() { this.card = 100000000; }
Father.prototype = new Grand();
function Father() { this.lastName = '张'; }
Child.prototype = new Father();
function Child() { this.age = 18; }
const p = new Child();
p.house(); // 汤臣一品（通过原型链找到）
4.3 完整原型链
const f1 = new Foo()
1.f1.__proto__ = Foo.prototype
2.Foo.prototype.__proto__ = Object.prototype
3.Object.prototype.__proto__ = null
4.Foo.__proto__ = Function.prototype
5.Function.prototype.__proto__ = Object.prototype
6.Function.__proto__ = Function.prototype
五、总结
原型与原型链是JavaScript实现面向对象编程的核心机制。每个函数都具备属性，指向原型对象；每个对象都拥有__proto__属性，指向构造函数的原型。二者通过属性建立紧密关联。在属性查找过程中，JavaScript会沿着__proto__构成的链式结构向上搜索，直至终点null。
到此这篇关于JavaScript原型与原型链的文章就介绍到这了,更多相关JS原型与原型链内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09