“深入剖析JavaScript原型链：掌握这个概念，轻松成为JavaScript高手！“

引言

  JavaScript中的原型是一个非常重要的概念，它是理解JavaScript中对图像、继承和原型链接的基础。在本文中，我们将深入探讨JavaScript原型的概念，以及如何在实践中使用它。

何为JavaScript原型

  JavaScript中的每个对象都有一个原始模型。原始模型可以被认为是对象的模板，它确定了对象的属性和方法。当我们访问一个对象的属性或方法时法时，JavaScript引擎会先在对象本身中查找，如果没有找到，它会继续在对象的原型中查找。如果还是没有找到，它会继续在原型的原型中查找，直接找到该属性或方法，或本人到达原型链的末尾。
  JavaScript中的原型是通过一个特殊的属性__proto__来实现的。每个JavaScript对象都有一个__proto__属性，它指向该对象的原型。当我们访问一个针对象的属性或方法时，JavaScript引引擎会检查该对象的__proto__属性，然后继续向上查找。

如何使用JavaScript原型

  JavaScript中的原型非常灵活，它可以用来模拟继承和共享方法。我们可以使用原型来确定一个对象的方法，然后让其他对象继承承接这些方法。

• 例如，我们可以使用原始模型来确定一个人对象的方法：

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

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

  在上面的代号中，我们定义了一个人对象的构造函数，它接受一个名字参数。然后，我们使用Person.prototype来定义应该对象的sayHello方法。

• 现在，我们可以创建一个新的人对像，并调用它的 sayHello 方法：

var person = new Person("John");
person.sayHello(); // Hello, my name is John

  在上面的代码中，我们创建了一个名为person的新对象，它是通过调用Person构造函数而创建的。然后，我们调用它的sayHello方法，它会输出“你好，我叫约翰”

• 我们还可以创建一个新的对象，并将其原型设置为人的原型：

var person2 = Object.create(Person.prototype);
person2.name = "Mary";
person2.sayHello(); // Hello, my name is Mary

  在上面的代码中，我们创建了一个名为person2的新对象，并将其原型设置为Person的原型。然后，我们将它的名字属性设置为"Mary"，并调用它的sayHello方法，它会输出“你好，我叫玛丽”
  这个例子演示了如何使用原始模型来实现继承和共享方法。我们可以在一个对图像的原始模型中确定正确的方法，然后让其他人对图像继承这些方法，从而避免在每个对象中重新确定正确方法。

原型的作用

1. 实现继承：JavaScript 中的继承是通过原型实现的。每个对象都有一个原型，它定义了该对象的属性和方法。当我们创建一个新对象时，它会继承它的构造函数的原型，从而继承该构造函数的属性和方法。这样，在一个对象的原型中定义方法，就可以让其他对象继承这些方法，从而避免在每个对象中重复定义方法。
   代码举例：

// 定义一个 Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 在 Animal 的原型中定义一个 sayHello 方法
Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 定义一个 Cat 构造函数，继承自 Animal
function Cat(name) {
  Animal.call(this, name);
}

// 将 Cat 的原型设置为 Animal 的实例，实现继承
Cat.prototype = Object.create(Animal.prototype);

// 在 Cat 的原型中定义一个 meow 方法
Cat.prototype.meow = function() {
  console.log(`Meow, I'm ${this.name}`);
};

// 创建一个 Cat 对象实例
const cat = new Cat('Kitty');

// 调用 Cat 对象的方法和继承自 Animal 的方法
cat.sayHello(); // 输出 "Hello, I'm Kitty"
cat.meow(); // 输出 "Meow, I'm Kitty"

  在上面的代码中，Animal 和 Cat 都是构造函数，Animal 定义了一个 sayHello 方法，Cat 继承了 Animal 并定义了一个 meow 方法。通过将 Cat 的原型设置为 Animal 的实例，实现了继承关系。

2. 共享方法：在 JavaScript 中，每个对象都可以访问它的原型对象中定义的方法。这意味着，如果多个对象共享相同的方法，可以将这些方法定义在它们的原型对象中，从而避免在每个对象中重复定义方法。

// 定义一个 Person 构造函数
function Person(name) {
  this.name = name;
}

// 在 Person 的原型中定义一个 sayHello 方法
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 定义一个 Teacher 构造函数
function Teacher(name) {
  this.name = name;
}

// 将 Teacher 的原型设置为 Person 的实例，实现共享方法
Teacher.prototype = new Person();

// 创建一个 Teacher 对象实例
const teacher = new Teacher('Tom');

// 调用 Teacher 对象的方法和继承自 Person 的方法
teacher.sayHello(); // 输出 "Hello, I'm Tom"

  在上面的代码中，Teacher 继承了 Person 并且通过将 Teacher 的原型设置为 Person 的实例，实现了共享 Person 的方法。

3. 扩展对象：通过修改对象的原型，可以为对象添加新的属性和方法。这使得我们可以在运行时动态地扩展对象的功能。

// 定义一个 Person 构造函数
function Person(name) {
  this.name = name;
}

// 在 Person 的原型中定义一个 sayHello 方法
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 创建一个 Person 对象实例
const person = new Person('Alice');

// 在 Person 的原型中添加一个 sayBye 方法
Person.prototype.sayBye = function() {
  console.log(`Bye, I'm ${this.name}`);
};

// 调用 Person 对象的方法，包括动态添加的 sayBye 方法
person.sayHello(); // 输出 "Hello, I'm Alice"
person.sayBye(); // 输出 "Bye, I'm Alice"

  在上面的代码中，我们在 Person 的原型中动态地添加了一个 sayBye 方法，从而扩展了 Person 对象的功能。

4. 实现多态：在 JavaScript 中，不同的对象可以有不同的原型，从而拥有不同的属性和方法。这使得我们可以实现多态，即在不同的对象上调用相同的方法，从而实现不同的行为。

// 定义一个 Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 在 Animal 的原型中定义一个 sayHello 方法
Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 定义一个 Cat 构造函数，继承自 Animal
function Cat(name) {
  Animal.call(this, name);
}

// 将 Cat 的原型设置为 Animal 的实例，实现继承
Cat.prototype = Object.create(Animal.prototype);

// 在 Cat 的原型中重写 sayHello 方法
Cat.prototype.sayHello = function() {
  console.log(`Meow, I'm ${this.name}`);
};

// 创建一个 Animal 对象实例
const animal = new Animal('Tom');

// 创建一个 Cat 对象实例
const cat = new Cat('Kitty');

// 调用 Animal 对象和 Cat 对象的 sayHello 方法，输出不同的结果
animal.sayHello(); // 输出 "Hello, I'm Tom"
cat.sayHello(); // 输出 "Meow, I'm Kitty"

  在上面的代码中，我们重写了 Cat 的原型中的 sayHello 方法，从而实现了多态。当调用 Cat 对象的 sayHello 方法时，会输出不同于 Animal 对象的 sayHello 方法的结果。

JavaScript原型链

  JavaScript中的原型链是一个非常重要的概念。原型链是由一个对象的__proto__属性链接而来的所有原型对象的顺序。当我们访问一个对象的属性或方法时，JavaScript引擎会在该比较象的原型链上查找该属性或方法。

• 例如，让我们思考以下代码：

function Animal() {}

function Cat() {}
Cat.prototype = new Animal();

var cat = new Cat();

  在上面的代码中，我们确定了一个动物构造函数和一个猫构造函数。然后，我们将猫的原始模型设置为一个新的动物对象。最后，我们创造了一个新的猫对象，它是通过调用Cat构造函数而创造的。

• 现在，让我们尝试访问猫对象的属性和方法：

console.log(cat.name); // undefined
cat.eat(); // "Cat is eating"

  在上面的代码中，我们尝试访问猫对象的名字属性和吃法。由于猫对象本身没有名字属性或吃法，JavaScript引导会继续向上查找它的原型链。它会先找到猫对象的__proto__属性，发现它指向Cat的原型。然后，它会继续向上查找Cat的原型的__proto__属性，发现它指向Animal的原型。最后，它会在Animal的原型中找到吃法，并调用它。
  在上面的例子中，我们可以看到JavaScript原型链的工作原理。如果一个对象没有找到所需要的属性或方法，JavaScript会继续向上找，直接找到到该属性或方法或到达原型链的末尾。

原型链查找顺序

  原型链是由每个对象的原型对象组成的链式结构。当一个对象需要访问某个属性或方法时，JavaScript 会先在该对象本身中查找，如果没有找到，就沿着原型链向上查找，直到找到一个定义了该属性或方法的原型对象为止。如果整个原型链上都没有找到该属性或方法，那么 JavaScript 会返回 undefined。

• 下面是一个简单的原型链示例：

// 定义一个 Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 在 Animal 的原型中定义一个 sayHello 方法
Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 定义一个 Cat 构造函数，继承自 Animal
function Cat(name) {
  Animal.call(this, name);
}

// 将 Cat 的原型设置为 Animal 的实例，实现继承
Cat.prototype = Object.create(Animal.prototype);

// 在 Cat 的原型中定义一个 sayMeow 方法
Cat.prototype.sayMeow = function() {
  console.log(`Meow, I'm ${this.name}`);
};

// 创建一个 Cat 对象实例
const cat = new Cat('Kitty');

// 调用 Cat 对象的方法，包括继承自 Animal 原型的 sayHello 方法和自己定义的 sayMeow 方法
cat.sayHello(); // 输出 "Hello, I'm Kitty"
cat.sayMeow(); // 输出 "Meow, I'm Kitty"

  在上面的代码中，我们定义了一个 Cat 构造函数，它继承自 Animal 构造函数，并且在 Cat 的原型中定义了一个 sayMeow 方法。当我们调用 cat.sayHello() 方法时，JavaScript 会沿着原型链向上查找，最终找到 Animal 原型中定义的 sayHello 方法并执行。当我们调用 cat.sayMeow() 方法时，JavaScript 会直接在 Cat 对象的原型中找到该方法并执行。

原型和构造函数

  在 JavaScript 中，每个对象都有一个原型对象和一个构造函数。原型对象定义了对象的属性和方法，而构造函数用于创建对象。原型对象和构造函数之间有着紧密的关系，它们共同构成了 JavaScript 的面向对象编程模型。
  具体来说，一个对象的原型对象可以通过 proto 属性访问，而一个构造函数可以通过 prototype 属性访问。当我们创建一个对象时，该对象会继承它的构造函数的原型对象中的属性和方法。如果一个对象的原型对象中没有定义某个属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到一个定义了该属性或方法的原型对象为止，从而实现了属性和方法的继承。

• 下面是一个使用构造函数和原型对象创建对象的示例：

// 定义一个 Person 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在 Person 的原型中定义一个 sayHello 方法
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}, ${this.age} years old`);
};

// 创建一个 Person 对象实例
const person = new Person('Alice', 25);

// 调用 Person 对象的方法
person.sayHello(); // 输出 "Hello, I'm Alice, 25 years old"

  在上面的代码中，我们定义了一个 Person 构造函数和一个 Person 的原型对象。通过使用 new 运算符创建一个 Person 对象实例，该实例继承了 Person 原型对象中定义的属性和方法。我们还可以在 Person 原型对象中动态添加或修改属性和方法，从而影响到所有继承自该原型对象的对象实例。

最后

  JavaScript原型是一个非常强大的概念，它可以用于模拟继承和共享方法。我们可以使用原型来定义一个对象的方法，然后让其他对象继承这些方法。JavaScript原型链是一个非常重要的概念，它定义了对象之间的继承关系。当我们访问一个对象的属性或方法时，JavaScript引擎会在该对象的原型链上查找该属性或方法。理解JavaScript原型和原型链的工作原理是成为JavaScript高手的关键。
  下一篇文章让我们来学习一下如何使用原型来继承