一图搞懂JavaScript原型和原型链，成为JavaScript中的原型专家

2023-09-15 16:03:52

JavaScript中有一个很重要的概念：原型。原型是JavaScript中的一个对象，它允许你创建新的对象，这些新对象继承了原型的属性和方法。原型链是JavaScript中的一种机制，它允许你访问一个对象的所有祖先原型。

一图搞懂JavaScript原型和原型链

JavaScript中的原型

每个JavaScript对象都有一个原型。原型是一个对象，它允许你创建新的对象，这些新对象继承了原型的属性和方法。

你可以使用以下代码来访问一个对象的原型：

let obj = {};
console.log(obj.__proto__); // {}

JavaScript中的原型链

原型链是JavaScript中的一种机制，它允许你访问一个对象的所有祖先原型。

每个原型都有一个原型，这个原型又有一个原型，以此类推。原型链一直延伸到最顶层原型，最顶层原型是Object.prototype。

你可以使用以下代码来遍历一个对象的原型链：

let obj = {};
while (obj.__proto__) {
  console.log(obj.__proto__);
  obj = obj.__proto__;
}

JavaScript中的继承

JavaScript中的继承是通过原型链来实现的。当一个对象继承另一个对象时，它就会继承那个对象的原型。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

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

const student = new Student("John Doe", "Computer Science");
student.greet(); // Hello, my name is John Doe