在 JavaScript
中,每个函数都有一个特殊的属性叫做 prototype
,它指向一个对象。这个对象就是原型。当使用 new
关键字调用一个构造函数时,新创建的实例对象会隐式地链接到构造函数的原型对象上
通过这种方式,实例对象可以继承原型对象上的属性和方法。如果一个实例对象上没有某个属性或方法,JavaScript 引擎就会沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的末端(即null),如下图所示:

原型链核心概念:
- proto : 每个对象都有一个内部属性 [[Prototype]],通常通过 proto 访问,指向其原型对象。
- prototype: 只有函数对象才有 prototype 属性,指向一个对象,这个对象会成为通过该函数创建的实例的原型。
- constructor: 原型对象都有一个 constructor 属性,指向关联的构造函数。
- 属性查找: 当访问对象属性时,如果对象本身没有该属性,会沿着原型链向上查找,直到找到属性或到达 null。
下面是 js
原型的一个例子:
js
function Person(name) {
this.name = name;
}
// Add greet method to the Person's prototype
// So all instances created with 'new Person()' share this method
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const alice = new Person('Alice');
alice.greet(); // Output: Hello, my name is Alice
const bob = new Person('Bob');
bob.greet(); // Output: Hello, my name is Bob
console.log(Object.getPrototypeOf(alice) === Person.prototype); // true
class 关键字
在 2015 年后添加了 class
概念,新添加的 class只是一个语法糖,底层的原理还是使用的基于 prototype-based inheritance
的方式,并没有引入新的底层技术。下面是一个class
的例子:
js
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal { // 'extends' sets up the prototype chain
constructor(name, breed) {
super(name); // Calls Animal's constructor
this.breed = breed;
}
speak() {
console.log(`${this.name} barks.`);
}
}
const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // Output: Buddy barks.
console.log(myDog.name); // Output: Buddy
即便使用了 class
和 extends
,底层逻辑还是一样的:
Dog.prototype
是Animal.prototype
myDog
是Dog.prototype
- 在调用
myDog.speak()
时,如果myDog
没有speak
方法,js
就会通过原型链进行查询,先是查询它本身的原型是否有这个方法,没有就继续查原型的原型,直到找到这个方法或者返回null
为止
总结
你可以将原型理解为一个模板或蓝图,它定义了由某个构造函数创建的所有实例对象共同拥有的属性和方法。这是一种实现继承的方式,可以帮助你避免在每个实例中重复创建相同的方法,从而节省内存