原型链是JavaScript实现继承的核心机制，通过对象的[[Prototype]]链接形成查找链。当访问对象属性时，若自身不存在，则沿原型链向上搜索直至null。每个构造函数的prototype属性为其实例的共同原型，实例通过__proto__指向它，从而实现属性和方法的共享。ES6的class语法是原型继承的语法糖，class使用extends实现继承，底层仍基于原型链，使代码更清晰但不改变继承本质。区分自身与继承属性可用hasOwnProperty()方法，该方法仅检测对象自身的属性，不包括原型链上的属性。常见陷阱包括原型上引用类型属性被所有实例共享导致的数据污染，应将引用类型属性定义在构造函数中以确保独立性。此外，属性遮蔽会覆盖原型属性，需注意赋值时的影响范围。
JavaScript 的原型链继承，说白了，就是对象之间共享属性和方法的一种机制。它不是传统意义上类（Class）那种基于蓝图的继承，而更像是一种“如果你没有，就去问你爸妈要”的链式查找过程。当你想访问一个对象的某个属性或方法时，JS 会先看看这个对象自己有没有。如果没有，它就会沿着一条特殊的链条，去它的“原型”（prototype）对象上找，如果原型对象也没有，就继续往上找原型的原型，直到找到或者找到链条的尽头——
null
为止。这条链，就是原型链。
解决方案
理解原型链继承，我们得从几个核心概念入手。每个 JavaScript 对象（除了少数特例外，比如
Object.prototype
的
[[Prototype]]
是
null
）都有一个内部属性
[[Prototype]]
，在许多环境中可以通过
__proto__
访问到，它指向这个对象的原型。同时，函数（作为构造函数使用时）会有一个
prototype
属性，这个
prototype
属性指向一个对象，这个对象就是通过该构造函数创建的所有实例的共同原型。
当使用
new
关键字创建一个新对象时，比如
let obj = new MyConstructor();
，新创建的
obj
的
[[Prototype]]
就会被设置为
MyConstructor.prototype
。这就是继承的起点。当你试图访问
obj.someProperty
时：
JavaScript 会先在
obj
自身查找
someProperty
。如果
obj
没有，它就会沿着
obj
的
[[Prototype]]
（也就是
MyConstructor.prototype
）去查找。如果
MyConstructor.prototype
也没有，它会继续沿着
MyConstructor.prototype
的
[[Prototype]]
向上查找，这个通常会是
Object.prototype
。如果
Object.prototype
还没有，那就继续向上，直到最终的
null
。如果到
null
还没找到，就返回
undefined
。
这个查找过程，就是原型链在发挥作用。它使得我们可以在原型对象上定义共享的属性和方法，所有实例都可以访问到，从而实现代码复用。
function Person(name) { this.name = name;}// 在Person的原型上添加方法Person.prototype.sayHello = function() { console.log(`你好，我是 ${this.name}`);};Person.prototype.species = '人类'; // 共享属性let person1 = new Person('张三');let person2 = new Person('李四');person1.sayHello(); // 你好，我是 张三person2.sayHello(); // 你好，我是 李四console.log(person1.species); // 人类console.log(person2.species); // 人类// 验证原型链console.log(person1.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__); // null
你看，
sayHello
和
species
这两个东西，我们只在
Person.prototype
上定义了一次，但
person1
和
person2
都能用。这就是原型链的魅力。
原型链继承和ES6的class继承有什么区别？
这个问题经常被问到，尤其是在现代JavaScript开发中。在我看来，ES6 的
class
语法其实就是 JavaScript 原型链继承的一种“语法糖”，它并没有引入一种全新的继承机制，而是提供了一种更接近传统面向对象语言（比如 Java 或 C++）的、更易读、更直观的方式来组织和实现基于原型的继承。
你可以把
class
看作是给那些习惯了类式继承的开发者提供的一层“友好包装”。它用
class
关键字定义构造函数，用
extends
实现继承，用
super
调用父类的构造函数或方法，这些都让代码看起来更像我们熟悉的“类”。
比如，用 ES6
class
实现上面的
Person
例子：
class Person { constructor(name) { this.name = name; } sayHello() { console.log(`你好，我是 ${this.name}`); } static species = '人类'; // ES6 class field, 也可以写在原型上}class Student extends Person { constructor(name, school) { super(name); // 调用父类构造函数 this.school = school; } study() { console.log(`${this.name} 正在 ${this.school} 学习。`); }}let student1 = new Student('王五', '清华大学');student1.sayHello(); // 你好，我是 王五student1.study(); // 王五 正在 清华大学 学习。// 尽管是class语法，底层依然是原型链console.log(student1.__proto__ === Student.prototype); // trueconsole.log(Student.prototype.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // true
从上面的代码就能看出来，
Student.prototype
的原型指向了
Person.prototype
，这正是原型链的体现。所以，
class
语法更多的是改善了开发者体验，让代码结构更清晰，但它并没有改变 JavaScript 对象模型的核心——原型。在我个人看来，理解了原型链，再去学
class
，你会发现很多东西豁然开朗，而不是停留在表面的语法层面。
如何判断一个属性是对象自身的还是继承来的？
在实际开发中，我们经常会遇到需要区分一个属性是直接定义在对象实例上的，还是通过原型链继承而来的情况。这对于避免一些潜在的副作用，或者进行精确的对象操作非常重要。JavaScript 提供了一个非常实用的方法来解决这个问题：
hasOwnProperty()
。
hasOwnProperty()
是
Object.prototype
上的一个方法，因此几乎所有对象都可以调用它（除非你手动覆盖或删除了它）。它的作用就是检查对象自身是否拥有某个特定的属性，而不会去查找原型链。如果属性存在于对象自身，它就返回
true
；否则（无论是继承来的还是不存在），都返回
false
。
function Vehicle(type) { this.type = type;}Vehicle.prototype.wheels = 4;Vehicle.prototype.getColor = function() { return 'red';};let car = new Vehicle('轿车');car.brand = '奔驰'; // 自身属性console.log(car.hasOwnProperty('brand')); // true (自身属性)console.log(car.hasOwnProperty('type')); // true (自身属性，在构造函数中定义)console.log(car.hasOwnProperty('wheels')); // false (继承自原型)console.log(car.hasOwnProperty('getColor')); // false (继承自原型)console.log(car.hasOwnProperty('toString')); // false (继承自Object.prototype)console.log(car.hasOwnProperty('nonExistent')); // false (不存在)// 另一个相关的操作符是 `in`// `in` 操作符会检查属性是否存在于对象自身或其原型链上console.log('brand' in car); // trueconsole.log('wheels' in car); // trueconsole.log('getColor' in car); // trueconsole.log('nonExistent' in car); // false
通过对比
hasOwnProperty()
和
in
操作符，你可以清晰地看到它们的区别。
hasOwnProperty()
严格只看“自家”的，而
in
则会“问遍祖宗十八代”。在遍历对象属性时，比如使用
for...in
循环，通常会配合
hasOwnProperty()
来过滤掉继承来的属性，只处理对象自身的属性，这是一种很常见的最佳实践，能有效避免遍历到不必要的原型链上的属性。
原型链继承有哪些常见的陷阱或注意事项？
原型链继承虽然强大且是JS的核心，但它也确实有一些需要注意的“坑”，或者说，是需要我们特别留心的地方。在我看来，最让人头疼的莫过于对引用类型属性的误解。
1. 引用类型属性的共享陷阱：这是最常见也最容易犯错的地方。如果在原型上定义了一个引用类型的属性（比如数组或对象），那么所有通过该原型创建的实例都会共享这同一个引用类型属性。这意味着，如果你通过一个实例去修改这个引用类型属性，所有其他实例也会受到影响。
function Gadget(name) { this.name = name;}Gadget.prototype.features = []; // 在原型上定义一个数组（引用类型）let phone = new Gadget('手机');let laptop = new Gadget('笔记本');phone.features.push('拍照');console.log(phone.features); // ["拍照"]console.log(laptop.features); // ["拍照"] // 坑！laptop的features也被修改了// 如果你在实例上直接赋值，则会创建自身的属性，从而“遮蔽”原型上的同名属性phone.features = ['打电话', '上网']; // 现在phone有了自己的features数组console.log(phone.features); // ["打电话", "上网"]console.log(laptop.features); // ["拍照"] // laptop的features仍然是共享的那个
要避免这个陷阱，通常的做法是在构造函数中定义引用类型的属性，这样每个实例都会有自己独立的副本。
function GadgetSafe(name) { this.name = name; this.features = []; // 在构造函数中定义，每个实例独有}let phoneSafe = new GadgetSafe('手机');let laptopSafe = new GadgetSafe('笔记本');phoneSafe.features.push('拍照');console.log(phoneSafe.features); // ["拍照"]console.log(laptopSafe.features); // [] // 互不影响，完美！
2. 性能考量（微乎其微但值得一提）：理论上，过长的原型链会稍微增加属性查找的时间，因为 JavaScript 引擎需要遍历更多的对象。但在绝大多数实际应用中，这种性能开销是微不足道的，几乎可以忽略不计。除非你真的构建了一个拥有几十甚至上百层继承的原型链，否则不必为此过于担心。
3.
this
指向问题：当原型上的方法被调用时，
this
的指向仍然取决于方法的调用方式。这和普通函数的
this
行为是一致的，而不是因为继承就有所不同。如果一个原型方法被作为对象的方法调用，
this
将指向该对象实例。但如果它被独立提取出来调用，
this
可能就指向全局对象（严格模式下是
undefined
）。
4. 属性遮蔽（Shadowing）：当你给一个实例添加一个与原型上同名的属性时，实例上的属性会“遮蔽”原型上的属性。这意味着，访问该属性时，JavaScript 会优先找到实例自身的属性，而不会再向上查找原型链。虽然这通常不是一个“陷阱”，但理解其行为对于避免意外覆盖或访问错误属性至关重要。
function Animal() {}Animal.prototype.name = '通用动物';let dog = new Animal();console.log(dog.name); // 通用动物dog.name = '旺财'; // 在dog实例上创建了一个新的name属性，遮蔽了原型上的nameconsole.log(dog.name); // 旺财delete dog.name; // 删除实例上的name属性console.log(dog.name); // 通用动物 (现在又可以访问到原型上的name了)
总的来说，原型链继承是 JavaScript 的基石，理解它能帮助我们更深入地掌握这门语言。虽然有一些细微之处需要注意，但只要掌握了这些要点，就能更好地利用它的强大功能。
以上就是什么是JS的原型链继承？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518396.html
微信扫一扫 
支付宝扫一扫 
