分析javascript原型及原型链

分析 JavaScript 原型及原型链可分为以下几个步骤：

1. 什么是原型

在JavaScript中，每个对象都有一个原型对象（prototype），当你访问一个对象的属性时，如果这个对象本身不存在这个属性，那么 JavaScript 就会从原型对象中找这个属性，如果原型对象中也不存在这个属性，那么就会从原型对象的原型对象中继续寻找，直到找到为止，这就是原型链。

2. 构造函数的 prototype 属性

每个函数都有一个 prototype 属性，同时，构造函数的 prototype 属性指向了实例化出来的对象的原型。

示例代码：

function Person(name, age){
  this.name = name
  this.age = age
}
Person.prototype.say = function(){
  console.log(`My name is ${this.name}, I'm ${this.age} years old`)
}
const person1 = new Person('Tom', 18)
person1.say() // 输出: My name is Tom, I'm 18 years old

上面代码中，我们通过一个构造函数创建了一个实例，我们可以看到这个构造函数包含一个原型属性 prototype，我们可以把一些函数当做方法添加到这个原型属性中，该方法就可以被实例所共享。所以上述代码中的 say() 方法就被所有通过 Person 构造函数实例化出来的对象所共享和调用。

3. 实例与构造函数的关系

通过构造函数创建的实例，会构成一个链式结构，例如上述代码中的 person1，它的原型链如下：

person1 -> Person.prototype -> Object.prototype -> null

这意味着，访问实例 person1 的属性时，如果实例本身不存在该属性，则会沿着原型链向上查找。所以使用原型和原型链的好处是：可以将方法定义在原型上，使得所有实例都可以共享这些方法，并且减少内存的开销。

4. 原型链的继承

当一个对象的原型指向另一个对象时，就发生了原型链的继承，我们可以通过以下方式实现原型链的继承：

function Animal(name) {
  this.name = name
}
Animal.prototype.say = function() {
  console.log(`My name is ${this.name}`)
}
function Dog(name, age) {
  Animal.call(this, name)
  this.age = age
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog
Dog.prototype.bark = function() {
  console.log('Woof! Woof!')
}

上述代码中，我们通过一个构造函数 Animal，创建了一个样板，然后我们通过 Dog 原型继承 Animal 原型，从而使得 Dog 实例化的对象，可以使用 Animal.prototype 上的所有方法和属性，也可以在 Dog.prototype 上添加独有的属性和方法。

这样，我们就可以使用 Dog 构造函数创建出的所有实例，调用 Animal 的方法，以及 Dog 自己独有的方法了。