【原】如何讲清楚JS原型链?

海拥 2023-06-25 发布于安徽

展开全文

💂 个人网站:【海拥】【游戏大全】【神级源码资源网】
🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

前言

JavaScript中的原型链是理解对象继承和原型系统的重要概念。它允许对象通过原型来访问和继承属性和方法。本文将介绍原型和原型链的概念，并探讨构造函数、原型对象、原型链的关系以及如何实现继承。

原型和原型链的概念

在JavaScript中，每个对象都有一个原型对象，它是一个包含属性和方法的对象。原型对象是其他对象共享属性和方法的模板。当访问对象的属性或方法时，如果对象自身没有定义，则会沿着原型链向上查找。

构造函数与原型对象

构造函数是用于创建对象的函数，通过new关键字调用构造函数可以创建对象实例。每个构造函数都有一个原型对象（prototype），它包含可以被实例共享的属性和方法。构造函数和原型对象之间有一个隐式的连接，通过prototype属性进行关联。

原型链的建立

原型链是由原型对象组成的链式结构。当访问对象的属性或方法时，如果对象自身没有定义，则会通过原型链向上查找，直到找到相应的属性或方法或者达到原型链的顶端（即Object.prototype）。原型链的建立是通过每个对象的内部属性[[Prototype]]（也可以通过__proto__访问）来实现的。

继承与原型链

通过原型链，JavaScript实现了对象之间的继承。当一个对象需要继承另一个对象的属性和方法时，可以将其原型指向另一个对象的实例。这样，子对象可以访问和继承父对象的属性和方法。

示例代码

// 构造函数
function Person(name) {
  this.name = name;
}

// 原型方法
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

// 创建对象实例
var person1 = new Person('Alice');
var person2 = new Person('Bob');

person1.sayHello();  // 输出：Hello, Alice
person2.sayHello();  // 输出：Hello, Bob