JS 原型对象和原型链理解

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，也可以叫做原型，它指向另一个对象，而后者则有自己的原型，这样就形成了一个链接的原型链。最终的原型指向 null。

原型对象

原型对象是函数对象的一个属性 prototype，它是一个对象，包含了一些属性和方法，这些属性和方法会被实例对象所继承。每当定义一个新函数时，都会自动生成一个包含 constructor 属性和其他默认属性的对象，这个对象就是函数的原型。

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

let person = new Person('Tom', 18);
console.log(person.__proto__ === Person.prototype);  // true
console.log(person.constructor === Person);  // true

在上面的例子中，Person.prototype 对象上定义了一个 sayName 方法，这个方法会被 person 对象所继承。

原型链

每个对象都有一个内部属性 [[Prototype]]，它指向另一个对象，另一个对象也有它自己的 [[Prototype]]，这样就形成了一个链接的原型链。当我们访问一个对象的某个属性或方法时，首先会在自身属性和方法中查找，如果没有找到，就会沿着原型链一级一级向上查找，直到找到为止，如果一直到最顶层都没有找到，就会返回 undefined。

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

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

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

let student = new Student('Tom', 18, '三年级');
console.log(student.__proto__ === Student.prototype);  // true
console.log(student.__proto__.__proto__ === Person.prototype);  // true
console.log(student.__proto__.__proto__.__proto__ === Object.prototype);  // true
console.log(student.__proto__.__proto__.__proto__.__proto__);  // null

在上面的例子中，Student.prototype 继承了 Person.prototype，而 Person.prototype 则继承了 Object.prototype，最终的原型链就是 student.__proto__ -> Student.prototype -> Person.prototype -> Object.prototype -> null。

总结

JavaScript 通过原型链实现继承，每个对象都有一个 [[Prototype]] 属性，它指向另一个对象，这样就形成了一个链接的原型链。原型链上的属性和方法会被对象继承，当我们访问一个对象的某个属性或方法时，会沿着原型链一级一级向上查找。

需要注意的是，虽然我们可以通过直接修改 __proto__ 属性或 Object.setPrototypeOf() 方法来修改对象的原型，但是这种行为并不推荐，它会导致 JavaScript 引擎进行一些非常耗费性能的优化和检查工作。建议我们使用 Object.create() 方法和构造函数来进行继承和原型对象的维护，以保证代码的可读性和可维护性。