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()
Object.create()
这是我个人觉得最直接、最优雅的方式之一，尤其当你只想让一个对象继承另一个对象，而不需要通过构造函数来实例化时。它允许你创建一个新对象，并指定它的原型。
// 父对象（或者说，你想继承的那个原型对象）const parent = { value: 10, getValue() { return this.value; }};// 子对象，以 parent 为原型创建const child = Object.create(parent);child.value = 20; // 覆盖父对象的 valueconsole.log(child.getValue()); // 输出 20console.log(Object.getPrototypeOf(child) === parent); // true// 内部的 [[Prototype]] 链接被正确设置了
这里
child
对象并没有
getValue
方法，但它可以通过原型链找到
parent
上的
getValue
。这就像你家里的某个电器坏了，你不需要自己修，而是去找你爸妈（原型）帮忙一样。
2. 结合构造函数和
prototype
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 会指向 ParentChild.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); // trueconsole.log(childInstance instanceof Parent); // true
这种方式稍微复杂一点，但它模拟了经典的类继承模式。
Object.create(Parent.prototype)
这一步是关键，它创建了一个新对象，这个新对象的原型是
Parent.prototype
，然后我们把
Child.prototype
指向了这个新对象。这样，
child
的实例就能沿着原型链找到
parent
的方法。
为什么在ES6有了
class
class
之后，我们还需要理解手动原型继承？
说实话，这个问题我被问过好几次，每次我的答案都差不多：理解手动原型继承，不仅仅是为了应对老旧代码，更重要的是为了真正理解JavaScript这门语言的“骨架”。ES6的
class
语法确实让JS的面向对象编程看起来更像传统面向对象语言，写起来也更直观，但它本质上仍然是基于原型的。
在我看来，理解这些底层机制，就像你学开车，不能只知道踩油门刹车，还得懂点发动机原理。当你遇到一些奇奇怪怪的bug，或者需要做一些性能优化时，对原型链的深刻理解能帮你快速定位问题。比如，你可能会发现某个方法调用不对劲，一查才发现原型链上挂错了东西，或者
this
指向出了问题。这种知识储备，能让你在面对复杂系统时，有更清晰的“心智模型”。而且，很多库和框架，尤其是那些历史悠久的，内部可能就用了这些手动继承的模式，你不懂，就很难深入理解它们的设计哲学。
Object.create()
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）。当一个实例拥有与原型链上同名的属性时，实例自身的属性会“遮蔽”原型上的属性。这意味着，当你访问这个属性时，会优先访问到实例自身的属性。这通常是预期的行为，但如果不理解，有时也会导致一些困惑。
以上就是js如何手动实现原型继承的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516001.html
微信扫一扫 
支付宝扫一扫 
