js如何手动实现原型继承-js教程-PHP中文网

js如何手动实现原型继承

星降

发布： 2025-08-18 12:29:01

原创

1036人浏览过

javascript中手动实现原型继承的核心是操作对象的[[prototype]]链，主要有两种方式：1. 使用object.create()，可直接创建以指定对象为原型的新对象，适合对象间直接继承；2. 通过构造函数结合prototype属性，将子类原型指向父类原型（child.prototype = object.create(parent.prototype)），并修正constructor指向，适用于模拟类式继承。理解手动继承有助于掌握js原型本质，避免this指向错误、constructor丢失、引用属性共享、for...in遍历原型属性及属性遮蔽等问题。

js如何手动实现原型继承

JavaScript中手动实现原型继承，核心就是通过操作对象的

[[Prototype]]

登录后复制

内部属性（通常通过

Object.create()

登录后复制

或直接修改构造函数的

prototype

登录后复制

属性）来建立一个原型链，让一个对象能够访问另一个对象的属性和方法。这并非什么黑魔法，更多的是理解JS对象之间联系的本质。

解决方案

说白了，手动实现原型继承，无非就是两种常见思路：

1. 使用

Object.create()

登录后复制

这是我个人觉得最直接、最优雅的方式之一，尤其当你只想让一个对象继承另一个对象，而不需要通过构造函数来实例化时。它允许你创建一个新对象，并指定它的原型。

// 父对象（或者说，你想继承的那个原型对象）
const parent = {
    value: 10,
    getValue() {
        return this.value;
    }
};

// 子对象，以 parent 为原型创建
const child = Object.create(parent);
child.value = 20; // 覆盖父对象的 value

console.log(child.getValue()); // 输出 20
console.log(Object.getPrototypeOf(child) === parent); // true
// 内部的 [[Prototype]] 链接被正确设置了

登录后复制

这里

child

登录后复制

对象并没有

getValue

登录后复制

方法，但它可以通过原型链找到

parent

登录后复制

上的

getValue

登录后复制

。这就像你家里的某个电器坏了，你不需要自己修，而是去找你爸妈（原型）帮忙一样。

2. 结合构造函数和

prototype

登录后复制

属性

这是ES6

class

登录后复制

语法糖背后，更“传统”的继承方式。本质上，是让一个构造函数的

prototype

登录后复制

对象指向另一个构造函数的实例，或者直接指向另一个原型对象。

// 父类构造函数
function Parent(name) {
    this.name = name;
}

Parent.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
};

// 子类构造函数
function Child(name, age) {
    Parent.call(this, name); // 继承父类的属性
    this.age = age;
}

// 核心：让 Child 的原型链指向 Parent 的原型对象
// 这样 Child 的实例就能访问 Parent.prototype 上的方法
Child.prototype = Object.create(Parent.prototype);
// 修正 constructor 指向，这步很重要，不然 constructor 会指向 Parent
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    console.log(`I am ${this.age} years old.`);
};

const childInstance = new Child('Alice', 5);
childInstance.sayHello(); // Hello, my name is Alice.
childInstance.sayAge();   // I am 5 years old.

console.log(childInstance instanceof Child); // true
console.log(childInstance instanceof Parent); // true

登录后复制

这种方式稍微复杂一点，但它模拟了经典的类继承模式。

Object.create(Parent.prototype)

登录后复制

这一步是关键，它创建了一个新对象，这个新对象的原型是

Parent.prototype

登录后复制

，然后我们把

Child.prototype

登录后复制

指向了这个新对象。这样，

child

登录后复制

的实例就能沿着原型链找到

parent

登录后复制

的方法。

为什么在ES6有了

class

登录后复制

之后，我们还需要理解手动原型继承？

说实话，这个问题我被问过好几次，每次我的答案都差不多：理解手动原型继承，不仅仅是为了应对老旧代码，更重要的是为了真正理解JavaScript这门语言的“骨架”。ES6的

class

登录后复制

语法确实让JS的面向对象编程看起来更像传统面向对象语言，写起来也更直观，但它本质上仍然是基于原型的。

在我看来，理解这些底层机制，就像你学开车，不能只知道踩油门刹车，还得懂点发动机原理。当你遇到一些奇奇怪怪的bug，或者需要做一些性能优化时，对原型链的深刻理解能帮你快速定位问题。比如，你可能会发现某个方法调用不对劲，一查才发现原型链上挂错了东西，或者

this

登录后复制

指向出了问题。这种知识储备，能让你在面对复杂系统时，有更清晰的“心智模型”。而且，很多库和框架，尤其是那些历史悠久的，内部可能就用了这些手动继承的模式，你不懂，就很难深入理解它们的设计哲学。

Object.create()

登录后复制

和直接修改

prototype

登录后复制

属性，它们在使用上有什么本质区别和适用场景？

这两种方式，虽然都能实现原型继承，但它们的侧重点和适用场景还是有挺大区别的。

剪刀手

全自动AI剪辑神器：日剪千条AI原创视频，零非原创风险，批量高效制作引爆流量！免费体验，轻松上手！

查看详情

Object.create()

登录后复制

更像是一种“对象到对象”的继承。它直接创建一个新对象，并把指定对象设为它的原型。这个过程不涉及构造函数，也不需要通过

new

登录后复制

关键字。它的好处是简洁、直接，当你有一个现成的对象，想在此基础上扩展，或者实现一些类似“原型式继承”的模式时，

Object.create()

登录后复制

就显得特别顺手。比如，你想创建一个配置对象，它继承自一个默认配置，然后只覆盖其中几个属性，用

Object.create()

登录后复制

就很合适。

而通过修改构造函数的

prototype

登录后复制

属性，则是更“类式”的继承方式。它的核心思想是：所有由某个构造函数创建的实例，都应该共享同一个原型对象上的方法和属性。这种方式通常伴随着

new

登录后复制

关键字的使用，以及

Parent.call(this, ...)

登录后复制

来继承父类的实例属性。当你需要定义一个“类”的结构，并且希望通过这个“类”来创建大量具有相同行为的实例时，这种模式就非常适用。ES6的

class

登录后复制

语法就是这种模式的语法糖。

简单来说，

Object.create()

登录后复制

更灵活，适合一次性的对象继承或实现特定模式；而修改

prototype

登录后复制

则更偏向于构建可复用的“类”结构。

手动实现原型继承时，有哪些常见的“陷阱”和需要注意的细节？

说实话，手动实现原型继承，确实有几个地方是新手容易踩坑的。

一个很经典的“坑”就是

this

登录后复制

的指向问题。在原型链上的方法被调用时，

this

登录后复制

始终指向调用该方法的那个对象，而不是定义该方法的原型对象。这有时候会让人很困惑，特别是当方法内部需要访问实例特有的属性时。理解这一点，对于编写正确的原型方法至关重要。

接着，就是

constructor

登录后复制

属性的丢失。当你通过

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

登录后复制

来设置原型时，

Child.prototype

登录后复制

会被一个全新的对象覆盖掉。这个新对象的

constructor

登录后复制

属性会指向

parent

登录后复制

，而不是

child

登录后复制

。这会导致

instanceof

登录后复制

操作符可能出现误判，或者当你需要通过

instance.constructor

登录后复制

来获取构造函数时，得到的结果不是你期望的。所以，我们通常需要手动加上一句

Child.prototype.constructor = Child;

登录后复制

来修正它。

再一个，是关于引用类型属性的共享问题。如果你的原型对象上有一个引用类型的属性（比如一个数组或对象），那么所有继承自这个原型的实例，都会共享这个引用。这意味着，如果你在一个实例上修改了这个引用类型的属性，所有其他实例上的这个属性也会跟着改变。这通常不是你想要的结果。解决办法通常是在构造函数内部创建实例独有的引用类型属性，而不是放在原型上。

还有一个小点，就是