JavaScript原型与原型链
本文共 1475 字，读完只需 6 分钟
一、概述
在 JavaScript 中，是一种面向对象的程序设计语言，但是 JS 本身是没有 “类” 的概念，JS 是靠原型和原型链实现对象属性的继承。
在理解原型前，需要先知道对象的构造函数是什么，构造函数都有什么特点？
1. 构造函数
// 构造函数 Person()
function Person(name, gender) {
this.name = name;
this.gender = gender;
}
var person = new Person("周杰伦", "男");
// 最后创建出来的对象实例 person
person
{
name: "周杰伦",
gender: "男"
}以上代码，普通函数 Person()，加上 new 关键字后，就构造了一个对象 person
所以构造函数的定义就是普通函数加上 new 关键字，并总会返回一个对象。
2. 函数对象
同时，JS 中的对象分为一般对象和函数对象。那什么是一般对象，什么又是函数对象呢？
JavaScript 的类型分为基本数据类型和引用数据类型，基本数据类型目前有 6 种（null, undefined, string, number, boolean, Symbol）。 其余的数据类型都统称为 object 数据类型，其中，包括 Array, Date, Function等，所以函数可以称为函数对象。
let foo = function(){
}
foo.name = "bar";
foo.age = 24;
console.log(foo instanceof Function) //true
console.log(foo.age) // 24以上代码就说明了函数其实是一个对象，也可以具有属性。
二、原型链
JavaScript 中的对象，有一个特殊的 [[prototype]] 属性, 其实就是对于其他对象的引用（委托）。当我们在获取一个对象的属性时，如果这个对象上没有这个属性，那么 JS 会沿着对象的 [[prototype]]链 一层一层地去找，最后如果没找到就返回 undefined;
这条一层一层的查找属性的方式，就叫做原型链。
var o1 = {
age: 6
}那么，为什么一个对象要引用，或者说要委托另外一个对象来寻找属性呢？
本文开篇的第一句话，就指出来的，JavaScript 中，和一般的 OOP 语言不同，它没有 '类'的概念，也就没有 '模板' 来创建对象，而是通过字面量或者构造函数的方式直接创建对象。那么也就不存在所谓的类的复制继承。
三、原型
那什么又是原型呢？
既然我们没有类，就用其他的方式实现类的行为吧，看下面这句话↓↓。
1. 每个函数都有一个原型属性 prototype 对象
function Person() {
}
Person.prototype.name = 'JayChou';
// person1 和 person2 都是空对象
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // JayChou
console.log(person2.name) // JayChou通过构造函数创造的对象，对象在寻找 name 属性时，找到了 构造函数的 prototype 对象上。
这个构造函数的 prototype 对象，就是 原型
用示意图来表示：
查找对象实例属性时，会沿着原型链向上找，在现代浏览器中，标准让每个对象都有一个 __proto__ 属性，指向原型对象。那么，我们可以知道对象实例和函数原型对象之间的关系。
2. 每个原型对象都有一个 constructor 属性指向关联的构造函数
为了验证这一说话，举个例子。
function Person() {}
Person === Person.prototype.constructor; // true那么对象实例是构造函数构造而来，那么对象实例是不是也应该有一个 constructor 呢？
function Person() {}
const person = new Person();
person.constructor === Person // true但事实上，对象实例本身并没有 constructor 属性，对象实例的 constructor 属性来自于引用了原型对象的 constructor 属性
person.constructor === Person.prototype.constructor // true
3. 原型链顶层：Object.prototype.__proto__ == null
既然 JS 通过原型链查找属性，那么链的顶层是什么呢，答案就是 Object 对象，Object 对象其实也有 __proto__属性，比较特殊的是 Object.prototype.__proto__ 指向 null, 也就是空。
Object.prototype.__proto__ === null
我们回过头来看函数对象：
所有函数对象的proto都指向Function.prototype，它是一个空函数（Empty function）
Number.__proto__ === Function.prototype // true Number.constructor == Function //true Boolean.__proto__ === Function.prototype // true Boolean.constructor == Function //true String.__proto__ === Function.prototype // true String.constructor == Function //true // 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身 Object.__proto__ === Function.prototype // true Object.constructor == Function // true // 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身 Function.__proto__ === Function.prototype // true Function.constructor == Function //true Array.__proto__ === Function.prototype // true Array.constructor == Function //true RegExp.__proto__ === Function.prototype // true RegExp.constructor == Function //true Error.__proto__ === Function.prototype // true Error.constructor == Function //true Date.__proto__ === Function.prototype // true Date.constructor == Function //true
所有的构造器都来自于 Function.prototype，甚至包括根构造器Object及Function自身。所有构造器都继承了·Function.prototype·的属性及方法。如length、call、apply、bind
以图会友，这就是网上经常看到的 JS 原型和原型链关系图：
对于以上看似很复杂的关系图，只需要理解 5 点：
- 每个函数都有一个原型属性 prototype 对象
- 普通对象的构造函数是 Object()，所以
Person.prototype.__proto__ === Object.prototype - 函数对象都来自于 Function.prototype
- 函数对象也是对象，所有
Function.prototype.__proto__ === Object.prototype - 记住，所有函数的默认原型都是 Object() 的实例，所以，
Function.prototype.__proto__ === Object.prototype Object.prototype.__proto__是 null
总结
以上就是 JavaScript 中原型和原型链的知识。由于 JS 没有'类', 所以采用了原型的方式实现继承，正确的说法是引用或者委托，因为对象之间的关系不是复制，而是委托。在查找属性的时候，引用（委托）原型对象的属性，也就是我们常说的原型继承。
欢迎关注个人微信订阅号，专注分享原创文章
