JavaScript进阶（四）原型与原型链用法实例分析

关于“JavaScript进阶（四）原型与原型链用法实例分析”的完整攻略，以下是详细讲解：

什么是原型

JavaScript 中的每个对象都有一个指向它的原型。原型是一个包含属性和方法的对象，它可以被用来共享那些在多个实例之间共享内容的属性和方法。当我们在一个实例中访问一个属性或者一个方法时，它会先在实例本身中查找该属性或方法，如果没有找到，就会去实例的原型中查找。

在 JavaScript 中，一个对象的原型可以通过 prototype 属性来访问。例如：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
};

const person1 = new Person('Alice', 25);
person1.sayHello(); // Hello, my name is Alice, and I'm 25 years old.

在上面的代码中，我们给 Person 函数添加了一个 protoype 属性，这个属性是一个包含一个 sayHello 方法的对象。当我们使用 new 操作符创建一个 Person 实例后，该实例就会从原型中继承到 sayHello 方法。

什么是原型链

JavaScript 中的每个对象都能通过一个内部属性 [[Prototype]] 来访问它的原型。这个内部属性不能被直接访问，但我们可以通过 __proto__ 属性来访问它。当我们访问一个对象的属性时，如果该属性不存在于对象本身，那么 JavaScript 引擎会去对象的 [[Prototype]] 所指向的对象（也就是原型）中查找该属性。如果该属性还不存在于原型对象中，那么引擎会继续沿着原型链向上查找，直到找到该属性或查找到原型链的顶端 Object.prototype 为止。

下面的示例中，我们列出了一个样例对象的原型链结构：

const obj = {
  foo: 'bar'
};

console.log(obj.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

在上面的代码中，我们创建了一个包含 foo 属性的对象，该对象的原型就是 Object.prototype。Object.prototype 的原型是 null，也就是原型链的顶端。

创建对象的几种方式

在 JavaScript 中，创建对象有几种方式。下面是几种常见的方式：

1. 对象字面量

对象字面量是最简单的创建对象的方式。这种方式非常灵活，可以方便地创建出我们想要的任何对象。例如：

const person = {
  name: 'Alice',
  age: 25,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
  }
};

person.sayHello(); // Hello, my name is Alice, and I'm 25 years old.

在上面的代码中，我们使用对象字面量创建了一个 person 对象，它有一个 name 属性、一个 age 属性和一个 sayHello 方法。

2. 工厂函数

工厂函数是一种比对象字面量更灵活的创建对象的方式。这种方式可以让我们更方便地复用代码和创建多个相似的对象。例如：

function createPerson(name, age) {
  const person = {};
  person.name = name;
  person.age = age;
  person.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
  };
  return person;
}

const person1 = createPerson('Alice', 25);
person1.sayHello(); // Hello, my name is Alice, and I'm 25 years old.

const person2 = createPerson('Bob', 30);
person2.sayHello(); // Hello, my name is Bob, and I'm 30 years old.

在上面的代码中，我们创建了一个 createPerson 工厂函数，它接受 name 和 age 作为参数，然后返回一个包含这两个属性和一个 sayHello 方法的对象。我们可以使用这个函数来创建多个相似的对象。

3. 构造函数

构造函数是一种创建对象的方式，它可以让我们更方便地创建多个相似的对象，并且可以使用 new 操作符来创建对象。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
  };
}

const person1 = new Person('Alice', 25);
person1.sayHello(); // Hello, my name is Alice, and I'm 25 years old.

const person2 = new Person('Bob', 30);
person2.sayHello(); // Hello, my name is Bob, and I'm 30 years old.

在上面的代码中，我们创建了一个 Person 构造函数，它接受 name 和 age 作为参数。然后，我们使用 new 操作符来创建两个实例，分别是 person1 和 person2。

原型继承

在 JavaScript 中，原型可以被用来实现继承。子类可以继承父类的属性和方法，从而让子类获得父类的特性。下面是一个原型继承的示例：

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

Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}.`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const dog = new Dog('Bailey');
dog.sayName(); // My name is Bailey.
dog.bark(); // Woof!

在上面的代码中，我们定义了一个 Animal 父类和一个 Dog 子类。在 Dog 的构造函数中，我们调用了 Animal 的构造函数，并传入了名字。接着，我们使用 Object.create 方法来创建 Dog 的原型，使它继承自 Animal 的原型。最后，我们给 Dog 的原型添加一个 bark 方法。

改变原型

在 JavaScript 中，我们可以通过改变原型来为已存在的对象添加新的属性和方法。下面是一个改变原型的示例：

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice.

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

person.sayGoodbye(); // Goodbye, my name is Alice.

在上面的代码中，我们首先给 Person 的原型添加了一个 sayHello 方法，然后创建了一个 person 实例并调用了它的 sayHello 方法。接着，我们又给 Person 的原型添加了一个 sayGoodbye 方法，然后又通过 person 实例调用了它的 sayGoodbye 方法。从输出结果可以看出，我们成功地给已存在的对象 person 添加了新的方法。

总之，原型和原型链是 JavaScript 中比较重要的概念。它们可以被用来实现很多有用的功能，例如继承、改变已存在的对象等。我们需要深入学习这些概念，并在实际的开发中加以运用。