浅谈JS原型对象和原型链

下面是详细的讲解“浅谈JS原型对象和原型链”的完整攻略。

什么是JS原型对象和原型链

在开始讲解JS原型对象和原型链之前，我们需要先理解一下构造函数和实例化的概念。在JS中，构造函数是指用来创建对象的函数，而实例化则是指创建对象的过程。比如下面的代码就定义了一个构造函数：

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

然后，我们可以通过创建实例来使用这个构造函数：

let me = new Person("Tom", 28);

在JS中，每个对象都有一个与之关联的原型对象，原型对象可以用来实现属性继承和方法复用。当我们访问一个对象的属性时，如果这个属性在对象本身不存在，那么JS引擎会到原型对象中查找是否存在这个属性，如果原型对象中仍然没有找到，则会继续查找原型对象的原型对象——原型链上的下一个对象，直到找到这个属性或者一直查找到Object.prototype为止。

JS原型对象

在上面的例子中，我们创建了一个Person的构造函数，它的原型对象可以通过Person.prototype来访问：

console.log(Person.prototype);
// 输出：{}

可以看到构造函数的原型对象是一个空对象，我们可以向这个原型对象中添加属性和方法。

JS原型链

原型链是多个原型对象组成的链式结构，用于在对象之间实现属性的继承和方法复用。在上面的例子中，我们可以通过Object.getPrototypeOf()方法来获取一个对象的原型对象：

console.log(Object.getPrototypeOf(me) === Person.prototype);
// 输出：true

可以看到，在实例化对象me中，它的原型对象是通过Person.prototype来实现的。Person.prototype本身也有一个原型对象，也就是Object.prototype。

JS原型对象和构造函数的关系

在JS中，每个构造函数都有一个与之关联的原型对象，可以通过Function.prototype来访问。可以通过为构造函数的原型对象添加属性和方法，来实现对所有实例化对象的属性和方法的统一修改和管理。下面的例子在Person的原型对象中添加一个say方法：

Person.prototype.say = function() {
  console.log("Hello, my name is " + this.name + ", and I am " + this.age + " years old.");
};

然后，我们可以通过实例化对象来调用原型对象中的方法：

me.say();
// 输出：Hello, my name is Tom, and I am 28 years old.

可以看到，在实例化对象me中调用say方法，实际上就是调用了Person的原型对象上的say方法。

JS原型链的继承关系

在JS中，每个对象都有一个与之关联的原型对象，原型对象又有自己的原型对象，这样就形成了原型链。当我们访问一个对象的属性时，JS引擎会依次查找原型链上的所有对象，直到找到这个属性或者查找到原型链的终点Object.prototype。下面的例子定义了一个Animal构造函数和一个Cat构造函数，通过原型链实现Cat对象继承Animal对象的属性和方法：

function Animal(type) {
  this.type = type;
}

Animal.prototype.say = function() {
  console.log("I'm a " + this.type + ".");
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal("cat");

let garfield = new Cat("Garfield", "orange");

garfield.say();
// 输出：I'm a cat.

可以看到，在实例化对象garfield中调用say方法，首先会在Cat的原型对象Cat.prototype中查找，但是Cat.prototype并没有say方法，所以继续查找Cat.prototype的原型对象Animal.prototype，在Animal.prototype中找到了say方法并调用。

通过上面的例子可以看到，原型链可以用来实现对象之间的属性继承和方法复用，节省代码量，提高程序的执行效率。

以上就是“浅谈JS原型对象和原型链”的完整攻略，希望能够对你有所帮助。