JS原型继承手动实现全解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JS原型继承手动实现方法详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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

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属性，它们在使用上有什么本质区别和适用场景？

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

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;来修正它。

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

还有一个小点，就是for...in循环。它会遍历对象自身以及原型链上所有可枚举的属性。如果你不加区分地使用它，可能会遍历到一些你不想要的、来自原型链的属性。通常我们会配合hasOwnProperty()方法来判断属性是否是对象自身的，以避免这种情况。

最后，就是属性的“遮蔽”（shadowing）。当一个实例拥有与原型链上同名的属性时，实例自身的属性会“遮蔽”原型上的属性。这意味着，当你访问这个属性时，会优先访问到实例自身的属性。这通常是预期的行为，但如果不理解，有时也会导致一些困惑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。