javascript原型是什么_原型链如何工作？-js教程-PHP中文网

javascript原型是什么_原型链如何工作？

紅蓮之龍

发布： 2025-12-21 16:05:45

原创

427人浏览过

JavaScript原型是对象共享属性和方法的机制，原型链通过[[Prototype]]逐级向上查找属性直至null；prototype是函数独有的属性，用于指定实例继承的内容，而__proto__是实例指向其构造函数prototype的内部链接。

javascript原型是什么_原型链如何工作？

JavaScript 原型是对象用来共享属性和方法的机制，原型链则是 JavaScript 实现继承的核心路径——当访问一个对象的属性时，如果该对象自身没有，就会沿着 __proto__（或内部 [[Prototype]]）一层层向上查找，直到找到或抵达 null。

原型（prototype）是谁的属性？

每个函数（包括构造函数和类）都有一个 prototype 属性，它是一个普通对象，用于存放将来被实例共享的方法和属性。这个 prototype 对象的 constructor 指回原函数。

例如：

function Person(name) { this.name = name; }
Person.prototype.sayHi = function() { return `Hi, I'm ${this.name}`; };
const p1 = new Person('Alice');
console.log(p1.sayHi()); // "Hi, I'm Alice"

这里 p1 自身没有 sayHi，但它通过内部 [[Prototype]] 链接到了 Person.prototype，从而能调用该方法。

立即学习“Java免费学习笔记（深入）”；

`proto` 和 `prototype` 的关系

两者常被混淆，但角色不同：

prototype 是函数对象独有的属性，只在定义“谁的实例将继承什么”时起作用；
__proto__（非标准但广泛支持）是每个普通对象都有的内部链接，指向它的原型对象（即创建它的构造函数的 prototype）；
更推荐使用 Object.getPrototypeOf(obj) 获取原型，用 Object.setPrototypeOf(obj, proto) 设置原型。

比如：
p1.__proto__ === Person.prototype // true
Person.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true（链的终点）

Designify

拖入图片便可自动去除背景✨

查看详情

原型链是怎么“找属性”的？

当你读取 obj.prop 时，JavaScript 引擎执行如下查找流程：

先检查 obj 自身是否有 prop（自有属性）；
如果没有，就去 obj.__proto__（即它的原型）上找；
还没找到，继续查 obj.__proto__.__proto__，依此类推；
直到某一级原型为 null，查找失败，返回 undefined。

注意：写操作（如 obj.prop = 123）默认只在对象自身添加或修改属性，不会修改原型上的同名属性，除非显式操作原型对象本身。

ES6 类与原型链的关系

class 只是语法糖，背后仍是基于原型的机制：

class Animal {
  constructor(name) { this.name = name; }
  eat() { return `${this.name} is eating`; }
}
class Dog extends Animal {
  bark() { return `${this.name} is barking`; }
}
const dog = new Dog('Leo');

等价于：