图解JS原型和原型链实现原理

图解JS原型和原型链实现原理

1. 什么是原型

原型是 JavaScript 中一种特殊的对象，对象具有指向其他对象的链接，这个链接被称为 prototype，也就是对象原型。

2. 原型链

原型链是多个对象通过 prototype 属性连接起来的链式结构，在 JavaScript 中，对象可以通过 proto 属性访问到它的原型，而原型本身也可以有自己的原型，形成一条链，这就是原型链。

3. 构造函数

JavaScript 中每个对象都有一个构造函数属性，它指向它的构造函数，构造函数是用来创建对象的函数。

4. 创建对象方式

4.1 字面量方式

var obj = { a: 1 }

通过字面量方式创建对象时，会自动创建一个原型对象。

4.2 构造函数方式

function Person(name) {
  this.name = name;
}
var person = new Person('Bob');

通过构造函数方式创建对象时，会自动创建一个原型，并将该原型赋给对象的 proto 属性。

5. 实现原型链

除了对象本身可以有原型之外，构造函数也可以有原型，通过 constructor 属性可以访问到构造函数，constructor 可以访问到构造函数的原型对象，也就是实现了构造函数和原型对象的互相引用。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}
function Student(name, score) {
  Person.call(this, name);
  this.score = score;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayScore = function() {
  console.log('My score is ' + this.score);
}

var student = new Student('Alice', 90);
student.sayHello(); // 'Hello, my name is Alice'
student.sayScore(); // 'My score is 90'

在上面的例子中，我们定义了两个构造函数，Person 和 Student，Student 继承自 Person，通过 Student.prototype = Object.create(Person.prototype) 来实现原型的继承。此时 Student 的原型是 Person 的实例，而 Person 的原型是 Object 的实例。这样构成了一个原型链，实现了属性和方法的继承。