JS核心知识-原型和原型链

JS设计之初借鉴了多种语言的特性。如Java的语法结构、表达式和语句；Scheme的函数式编程思想；Self的基于原型的继承面向对象；将众多语言特性融合在一起形成了现JavaScript语言的雏形。本文将讲述从Self语言借鉴而来的原型和原型链。

原型

每个JavaScript对象（除null外）都有一个内置属性 [[Prototype]]（在语言规范中如此称呼）。这个属性指向另一个对象，也就是该对象的"原型"。

在大多数浏览器环境中，可以通过非标准的 __proto__ 属性来访问或设置一个对象的原型。但更推荐使用ES6引入的 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, prototype) 方法来操作原型，以保证代码的规范性和兼容性。

js 复制代码

var animal = {
    isEat: true
};
var bird = {
    isFly: true
};
bird.__proto__ = animal; // 将 animal 设置为 bird 的原型
console.log(bird.isFly); // true, 访问 bird 自身的属性
console.log(bird.isEat); // true, 通过原型链访问 animal 的属性

构造函数与prototype属性

函数也是对象，是一种可调用的对象。除了普通对象的特性外，函数还有一个特殊的属性 prototype（箭头函数没有此属性）。当这个函数被作为构造函数 （使用 new 关键字调用）时，这个 prototype 属性将发挥至关重要的作用。

js 复制代码

function Person(name) {
  this.name = name;
}
Person.prototype.study = true;
var p = new Person('john');
console.log(p.name); // 'jhon'
console.log(p.study); // true

当执行 new Person(...) 时，会发生以下几件事：

创建一个新的空对象。
将这个新对象的 [[Prototype]] 内部属性指向 Person.prototype。
将构造函数中的 this 绑定到这个新对象上，并执行构造函数中的代码（通常用于初始化属性）。
如果构造函数没有显式返回一个对象，则返回这个新创建的对象。

这样就建立了一个关键关系：实例对象（p）的 [[Prototype]] 指向其构造函数（Person）的 prototype 对象 。同时，Person.prototype 对象上有一个 constructor 属性，指回构造函数 Person 本身。这就构成了经典的"实例-原型-构造函数"三角关系。

原型链

现在我们将视野扩大。Person.prototype 本身也是一个对象，它也有自己的 [[Prototype]] 属性。默认情况下，一个普通函数的 prototype 属性是一个继承自 Object.prototype 的对象。

因此，对于 Person 的实例 p 来说：

p 的 [[Prototype]] 指向 Person.prototype。
Person.prototype 的 [[Prototype]] 指向 Object.prototype。
Object.prototype 的 [[Prototype]] 指向 null（原型链的尽头）。

这就形成了一条通过 [[Prototype]] 链接起来的链式结构，即原型链。

属性查找机制

JavaScript的属性访问机制正是基于原型链。当试图访问一个对象的属性时，引擎会遵循以下步骤：

首先在对象自身属性中查找。
如果未找到，则在其原型（即[[Prototype]]指向的对象）中查找。
如果仍未找到，则继续在原型的原型中查找，依此类推。
直到找到该属性或到达原型链的顶端（null）为止，如果到null还未找到，则返回undefined。

小结

总而言之，JavaScript从Self语言借鉴的原型概念，是其实现对象继承的核心机制。每个对象都有一个指向其原型的内部链接（[[Prototype]]），而通过构造函数创建的实例，其原型指向构造函数的prototype属性。这些原型对象之间通过[[Prototype]]连接起来，形成了原型链。

属性查找会沿着这条链自下而上进行，这正是JavaScript实现继承和共享属性的方式。理解原型和原型链，是掌握JavaScript面向对象编程的关键一步。

下次将介绍一下JS的继承方式。┏(＾0＾)┛