JS原型链继承原理全解析

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JS原型链继承原理详解》，涉及到，有需要的可以收藏一下

原型链是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时：

1. JavaScript 会先在obj自身查找someProperty。
2. 如果obj没有，它就会沿着obj的[[Prototype]]（也就是MyConstructor.prototype）去查找。
3. 如果MyConstructor.prototype也没有，它会继续沿着MyConstructor.prototype的[[Prototype]]向上查找，这个通常会是Object.prototype。
4. 如果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); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.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); // true
console.log(Student.prototype.__proto__ === Person.prototype); // true
console.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); // true
console.log('wheels' in car); // true
console.log('getColor' in car); // true
console.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属性，遮蔽了原型上的name
console.log(dog.name); // 旺财
delete dog.name; // 删除实例上的name属性
console.log(dog.name); // 通用动物 (现在又可以访问到原型上的name了)

总的来说，原型链继承是 JavaScript 的基石，理解它能帮助我们更深入地掌握这门语言。虽然有一些细微之处需要注意，但只要掌握了这些要点，就能更好地利用它的强大功能。

终于介绍完啦！小伙伴们，这篇关于《JS原型链继承原理全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！