JavaScript简餐——原型是个啥？

---

前言

写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计（第4版）》一书时出现的各个知识点。虽是对读书的笔记和总结，但是希望它轻量、简洁、犀利，不会引起阅读疲劳，可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理，来达到个人复习总结和分享知识的目的。

---

一、理解原型

在上一篇《创建对象的三种模式》中提到了原型模式，其中说到：无论何时，只要创建一个函数，就会按照特定的规则为这个函数创建一个prototype属性，这个属性的值是一个对象，即原型对象。说白了，这个随着创建函数跟着应运而生的prototype属性就是我们说的原型。

---

二、对象实例与原型

一个构造函数访问它的原型很简单，例如一个名为Person()的构造函数，访问它的原型只需Person.prototype。那么实例如何访问原型呢？其实，每次调用构造函数创建一个新的实例，这个实例有一个[[prototype]]指针( [[ ]]包裹的东西一般无法直接用JavaScript访问），这个指针会被赋值为构造函数的原型对象。虽然脚本中没有访问[[prototype]]特性的标准方式，但是Firefox、safari和Chrome会在每个对象上暴露__proto__属性，通过这个属性可以访问对象的原型。不过自定义构造函数创建对象时，原型对象默认只会获得constructor属性。以下是利用原型模式创建对象，上代码：

    function Person() {}
    Person.prototype.name = 'Nicholas';
    Person.prototype.age = 29;
    Person.prototype.job = 'SoftWare Engineer';
    Person.prototype.sayname = function () {
        console.log(this.name);
    }

    let person1 = new Person();
    let person2 = new Person();

    console.log(person1.__proto__);

再来看一下运行结果：显示了一个对象，其中有我们自定义的属性还有一个constructor属性。

---

三、图解

可能上述还不是很直观，那我们直接上图解(摘自《JavaScript高级程序设计（第四版）》）

左上角是我们的构造函数，它有个prototype属性，指向原型对象。右上角是构造函数的原型对象，对象内部有我们自定义的属性和一个constructor属性指回构造函数。下面两个是刚刚我们定义的两个对象，这两个对象中都有内部的[[prototype]]指针(外部暴露为__proto__属性）指向原型对象。是不是一目了然？

---

四、判断对象实例和原型

如果像确定一个对象实例和一个原型的关系，我们可以用isPrototypeOf()方法（判断一个原型对象是不是一个实例的原型对象）。如下所示：

console.log(Person.prototype.isPrototypeOf(person1));  //true
console.log(Person.prototype.isPrototypeOf(person2));  //true

还有一个方法：Object.getPrototypeOf()方法（返回一个实例的原型对象）。如下所示：

console.log(Object.getPrototypeOf(person1) == Person.prototype);  //true

---

总结

以上就是今天要讲的内容，本文简单介绍了原型、对象实例与原型的关系以及判断对象实例和其原型的方法。既然原型都引出来了，那么下一篇文章我们来讲一下原型链。撒花~