深入解析JS原型链，告别云里雾里

前端

2024-01-03 06:04:41

再也不云里雾里，让你深入理解JS原型链

谈到JavaScript的原型链，可能很多人都会一脸懵逼。各种名词和概念让人眼花缭乱，很难理清头绪。在本文中，我将尝试用通俗易懂的语言，对原型链进行深入解析，帮助大家真正理解它的概念和工作原理。

首先，我们需要了解几个基本概念：

this： this指向当前执行上下文中的对象。它可以在函数、方法和构造函数中使用。
proto： __proto__属性指向当前对象constructor 函数的原型对象。它可以通过Object.getPrototypeOf()方法获取。
原型对象： 原型对象是通过构造函数创建的对象，它包含了该构造函数的属性和方法。

理解了这几个基本概念，我们就可以开始探索原型链的工作原理了。当我们访问一个对象的属性或方法时，JavaScript引擎会首先在该对象中查找。如果找不到，它就会沿着原型链向上查找，直到找到该属性或方法，或者到达最顶层的Object对象。

原型链的查找机制可以帮助我们实现继承。当一个构造函数创建了一个对象时，这个对象就会继承其构造函数的原型对象的所有属性和方法。这意味着子类对象可以访问父类对象的所有属性和方法，而无需自己定义。

原型链在JavaScript中扮演着非常重要的角色，它不仅可以帮助我们实现继承，还可以让我们更加灵活地组织和扩展我们的代码。

为了更好地理解原型链，我们来看几个实例：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person1 = new Person("John");
person1.sayHello(); // 输出：Hello, my name is John

在这个例子中，我们定义了一个Person构造函数，它接受一个name参数并将其存储在this.name属性中。我们还定义了一个sayHello方法，它可以输出当前对象的name属性值。

然后，我们使用Person构造函数创建了一个新的对象person1。person1对象继承了Person.prototype的属性和方法，因此它可以访问sayHello方法。

现在，我们再来看看另一个例子：

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student1 = new Student("Mary", "Computer Science");
student1.sayHello(); // 输出：Hello, my name is Mary
console.log(student1.major); // 输出：Computer Science