javascript学习笔记（五）原型和原型链详解

下面是关于 "javascript学习笔记（五）原型和原型链详解" 的完整攻略：

1. 什么是原型

在 JavaScript 中，每一个对象都有一个原型对象（即 proto）属性，如果访问一个对象的属性时，该对象本身没有该属性，那么就会沿着原型链，去其原型对象中查找该属性，如果还没找到，就会一直向上查找，直至查找到 Object.prototype，这就是原型链的概念。

同时，每一个函数都有一个 prototype 属性，即原型对象，该属性是一个对象，该对象包含那些由该构造函数所创建的所有实例共享的属性和方法。

2. 原型链

原型链是实现继承的关键， JavaScript 继承是基于原型链实现的。当我们创建一个对象时，JavaScript 引擎会给该对象默认添加一个原型对象（即 proto 属性），这个原型对象指向创建该对象的构造函数的原型对象。这样，该对象就能访问到这个原型对象中定义的属性和方法。如果在当前对象中没有找到，那么就会沿着原型链依次向上查找，直到找到为止。

示例代码：

function Animal() {}
Animal.prototype.eat = function() {
  console.log('Animal eat');
};

function Dog() {}

// 通过改变原型链，将Dog的原型对象指向Animal的实例，从而实现继承
Dog.prototype = new Animal();

const dog = new Dog();
dog.eat(); // Animal eat

3. 原型对象的属性和方法

我们已经知道，原型是一个对象，每个构造函数都有一个 prototype 属性，即原型对象。在原型对象中定义的所有属性和方法都能被该构造函数的实例所共享。例如：

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

const person1 = new Person('Tom');
const person2 = new Person('Jerry');
person1.sayHello(); // Hello, my name is Tom
person2.sayHello(); // Hello, my name is Jerry

4. 原型对象的 constructor 属性

每个原型对象都有一个 constructor 属性，该属性指向该原型对象的构造函数。例如：

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

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

5. 实例对象的 proto 属性

每个实例对象都有一个 proto 属性，该属性指向创建该对象的构造函数的原型对象。例如：

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

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

总结一下，JavaScript 通过原型和原型链实现了继承机制，而且原型还可以用于实现共享属性和方法。同时构造函数和原型对象之间通过 constructor 属性相互关联。

希望这份完整攻略对你有所帮助。