详解JavaScript中的原型和原型链

首先，了解JavaScript中的原型和原型链是非常重要的，因为它是面向对象编程的核心之一。下面来详细讲解。

一、原型

1. 概念

JavaScript中，每个函数都有一个prototype属性，称为原型。原型是一个对象，包含了函数的所有属性和方法。当使用new操作符创建对象时，这个对象就会继承自原型。如果对象本身没有这个属性或方法，它会在原型对象中查找，以得到它需要的属性或方法。

举个例子：

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

Person.prototype.getName = function() {
  return this.name;
}

var person1 = new Person("张三");
console.log(person1.getName()); // 输出：张三

在这个例子中，我们定义了一个Person构造函数，并将其原型对象上添加了一个getName方法。当使用new Person("张三")创建一个对象时，这个对象就会继承Person原型对象上的getName方法。

1. 原型链

在JavaScript中，每个对象都有一个[[Prototype]]属性，称为隐式原型。它指向创建这个对象的函数的原型对象。如果这个原型对象也有一个[[Prototype]]属性，那么指向的对象就是上一级的原型对象，由此形成了一个原型对象的链表，称为原型链。

举个例子：

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

Person.prototype.getName = function() {
  return this.name;
}

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student1 = new Student("李四", 6);
console.log(student1.getName()); // 输出：李四

在这个例子中，我们定义了一个Student构造函数，并将其原型对象设置为Person的原型对象。这样，Student实例对象就可以继承Person的原型对象上的getName方法。

二、完整攻略

1. 原型

2. 每个函数都有一个prototype属性，称为原型。

3. 原型是一个对象，包含了函数的所有属性和方法。
4. 当使用new操作符创建对象时，这个对象就会继承自原型。

5. 如果对象本身没有这个属性或方法，它会在原型对象中查找，以得到它需要的属性或方法。

6. 原型链

7. 每个对象都有一个[[Prototype]]属性，称为隐式原型。

8. 隐式原型指向创建这个对象的函数的原型对象。

9. 如果这个原型对象也有一个[[Prototype]]属性，那么指向的对象就是上一级的原型对象，由此形成了一个原型对象的链表，称为原型链。

10. 示例说明

11. 示例一：对象继承Array

```js
function MyArray() {
Array.call(this);
}

MyArray.prototype = Object.create(Array.prototype);
MyArray.prototype.constructor = MyArray;

var myArray = new MyArray();
myArray.push(1);
console.log(myArray.length); // 输出：1
```

在这个例子中，我们定义了一个MyArray构造函数，并将其原型对象设置为Array的原型对象。这样，MyArray实例对象就可以继承Array的原型对象上的方法，如push方法。

• 示例二：对象继承Object

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

Person.prototype.getName = function() {
return this.name;
}

function Student(name, grade) {
Person.call(this, name);
this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student1 = new Student("李四", 6);
console.log(student1.getName()); // 输出：李四
```

在这个例子中，我们定义了一个Student构造函数，并将其原型对象设置为Person的原型对象。这样，Student实例对象就可以继承Person的原型对象上的getName方法。同时，我们在创建Student实例对象时，也调用了Person构造函数，以获取Person对象的name属性。