当前位置:实例文章 » HTML/CSS实例» [文章]如何理解原型及原型链?js的继承方式

如何理解原型及原型链?js的继承方式

发布人:shili8 发布时间:2025-03-12 23:30 阅读次数:0

**原型与原型链**

在 JavaScript 中,原型(prototype)是每个对象都有的一个属性,它指向了该对象所继承的原型链。理解原型和原型链对于掌握 JavaScript 的面向对象编程和继承机制至关重要。

**什么是原型?**

原型是一个对象,它包含了一个或多个方法和属性,这些方法和属性可以被子类(即继承该原型的对象)所共享。每个对象都有一个原型,除非它是通过 `Object.create()` 或 `Object.prototype` 来创建的。

**什么是原型链?**

原型链是一个从一个对象到其原型的链条。每个对象都有一个原型,如果该原型也不是通过 `Object.create()` 或 `Object.prototype` 来创建的,那么它就有自己的原型,如此下去直到达到顶层原型(即 `Object.prototype`)。当我们访问一个对象的属性或方法时,JavaScript 会沿着原型链向上查找,如果找到则返回该属性或方法。

**JS 的继承方式**

JavaScript 有两种主要的继承方式:构造函数继承和原型链继承。

### 构造函数继承构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现的。这种方法虽然简单,但它有一个缺点:子类会失去对父类原型链的访问权。

javascriptfunction Parent() {
 this.name = 'Parent';
}

function Child() {
 Parent.call(this);
 this.age =18;
}

var child = new Child();
console.log(child.name); // undefined


在上面的例子中,`Child` 的 `name` 属性是通过原型链继承的,但由于我们没有设置 `Child.prototype.__proto__ = Parent.prototype;`,所以 `child.name` 是 `undefined`。

### 原型链继承原型链继承是通过将子类的原型设为父类的实例来实现的。这种方法可以让子类访问到父类的原型链。

javascriptfunction Parent() {
 this.name = 'Parent';
}

function Child() {}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.name); // "Parent"


在上面的例子中,我们通过 `Object.create()` 来创建一个新原型链,然后将其设置为 `Child` 的原型。这样,`child` 就可以访问到 `Parent` 的原型链了。

**总结**

原型和原型链是 JavaScript 面向对象编程的基础,它们决定了一个对象能否继承另一个对象的属性和方法。在构造函数继承中,我们通过在子类的构造函数中调用父类的构造函数来实现继承,但这种方法会失去对父类原型链的访问权。原型链继承则是通过将子类的原型设为父类的实例来实现的,这种方法可以让子类访问到父类的原型链。

**参考**

* [MDN - 原型]( />* [MDN - 原型链]( />* [Stack Overflow - JavaScript 继承方式](

其他信息

其他资源

Top