JavaScript中的原型与原型链
字数 958 2025-11-02 08:11:07
JavaScript中的原型与原型链
描述
原型(Prototype)是 JavaScript 中实现继承的机制。每个对象都有一个隐藏属性 [[Prototype]](可通过 __proto__ 或 Object.getPrototypeOf() 访问),指向其原型对象。原型对象本身也有原型,形成一条链式结构,即原型链。当访问对象的属性时,若对象自身不存在该属性,会沿原型链向上查找,直到找到或到达链的末端(null)。
知识点详解
-
原型对象(Prototype)
- 每个函数在创建时都会自动获得一个
prototype属性,指向一个原型对象。 - 当使用
new调用函数作为构造函数时,新创建实例的[[Prototype]]会指向该函数的prototype。
示例:
function Person(name) { this.name = name; } // 为原型对象添加方法 Person.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; const alice = new Person("Alice"); alice.sayHello(); // 输出:Hello, I'm Alicealice自身没有sayHello方法,但通过[[Prototype]]找到了Person.prototype上的方法。
- 每个函数在创建时都会自动获得一个
-
原型链的形成
- 原型对象本身也是对象,因此也有
[[Prototype]]。例如,Person.prototype的[[Prototype]]指向Object.prototype。 - 链的顶端是
Object.prototype,其[[Prototype]]为null。
示例:
console.log(alice.__proto__ === Person.prototype); // true console.log(alice.__proto__.__proto__ === Object.prototype); // true console.log(alice.__proto__.__proto__.__proto__); // null- 查找属性时,顺序为:
alice→Person.prototype→Object.prototype→null。
- 原型对象本身也是对象,因此也有
-
属性的屏蔽与重写
- 若对象自身有某属性,则不会查找原型链(属性被“屏蔽”)。
- 直接赋值只会修改对象自身的属性,不会影响原型链上的属性。
示例:
alice.sayHello = function() { console.log("Hola!"); }; alice.sayHello(); // 输出:Hola!(访问自身属性) const bob = new Person("Bob"); bob.sayHello(); // 输出:Hello, I'm Bob(仍访问原型上的方法) -
原型链与继承
- 通过将子类的原型指向父类的实例,可实现继承:
function Student(name, grade) { Person.call(this, name); // 调用父类构造函数 this.grade = grade; } Student.prototype = Object.create(Person.prototype); // 继承原型 Student.prototype.constructor = Student; // 修复constructor指向 Student.prototype.study = function() { console.log(`${this.name} is studying.`); }; const charlie = new Student("Charlie", 5); charlie.sayHello(); // 继承自Person原型- 此时原型链为:
charlie→Student.prototype(即Person的实例) →Person.prototype→Object.prototype。
总结
原型链是 JavaScript 的核心特性,它通过对象的 [[Prototype]] 链接实现属性和方法的共享。理解原型链有助于掌握继承、属性查找机制,以及避免常见的属性覆盖问题。