技术分享：JavaScript之深入原型与原型链

一、前言

      计划写一套JavaScript的深入系列，主要用于JavaScript相关知识点和难点梳理，也是对原有知识的review。       本文主要讲解构造函数、原型、原型链的定义，以及他们之间的关系。如何通过原型对象的内部指针的形成原型链？如何检测原型，原型链等。

二、原型

1、构造函数

      在讲解原型前，首先需要知道什么是构造函数，先看一个例子：

   function Person() {}

   const p = new Person();
复制代码

      上面的例子就是一个构造函数，JavaScript默认函数首字母大写为构造函数，调用方式必须通过new关键字调用。上面的代码创建一个名为Person的构造函数，通过new实例出来一个实例对象p, 如下：

      console.log(p.constructor === Person);   // true
复制代码

下面的图展示了实例p和构造函数Person之间的关系：

注：从上面打印的结果看，实例p应该会有一个constructor属性，指向的构造函数Person，其实并不是这样的。p本身并没有constructor属性，虽然p.constructor是指向了Person。原理是p.constructor被委托给了Person.prototype，而Person.prototype.constructor默认指向的时Person。

2、prototype

      JavaScript规定每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向原型对象，这样就可以包含特定类型的所有实例共享的属性和方法。如下所示：

    function Person() {}
    Person.prototype.name = 'zhangSan';
    Person.prototype.age = 35;
    Person.prototype.showInfo = function () {
        console.log(this.name, this.age);
    }

    const p1 = new Person();
    const p2 = new Person();
    console.log(p1.name, p2.name);  // zhangSan zhangSan
    console.log(p1.showInfo === p2.showInfo); // true
    console.log(p1.prototype.constructor === Person); // true

复制代码

      从上面的例子可看出，创建了一个空的构造函数Person，在Person的prototype属性中添加了属性和方法name、age、showInfo，并且在新创建的实例对象中，这些属性和方法是被实例所共享的。       那么prototype属性指向的是什么呢？例子中不难发现，prototype属性指向了一个对象，这个对象叫做原型对象（Person.prototype）， 而原型对象的constructor属性指向的是构造函数Person，从下面的可以直观的看出，构造函数和原型对象的关系：

3、_proto_

      __proto__是JavaScript对象中特殊的内置属性，即对其他对象的一个引用。每当创建一个新实例后，该实例内部都包含一个指针（__proto__），指向原型对象。

  function Person() {}
  const p = new Person();
  console.log(p.__proto__ === Person.prototype); // true
复制代码

到此，已可以看出构造函数、原型对象、实例之间的关系，如下：

总结：每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

3、原型链

      再讲原型链前，先回顾最开始讲的，Person.prototype.constructor默认是指向的Person，假如创建一个新的对象来替代Person.prototype的引用，那么会发生什么呢？看个例子：

    function Person() {}

    Person.prototype = {
        name: 'zhangSan',
    }
    const p = new Person();
    console.log(p.constructor === Person); // false
    console.log(p.constructor === Object); // true
复制代码

      看结果为什么Person.prototype.constructor指向了Object？因为改变了Person.prototype的引用，Person.prototype并不会自动获取.constructor属性。简单讲就是p并没有constructor属性，所以p会委托__proto__链上的Person.prototype，Person.prototype默认constructor属性已经被改变，所以这个对象上并没有constructor属性，它会继续委托，委托给最顶端的Object.prototype，这个对象的.constructor指向Object。       那么如何让p.constructor指向Person呢？直接在Person.prototype中创建一个constructor属性即可，如下：

    function Person() {}

    Person.prototype = {
        constructor: 'Person',
        name: 'zhangSan',
    }
    const p = new Person();
    console.log(p.constructor === Person); // true
    console.log(p.constructor === Object); // true
    console.log(Object.prototype.__proto__); // null
复制代码

故更新上面的图如下：

总结：当查找实例属性时，如果找不到，就会查找与原型相关联的属性，一直往上找，直到最顶层。这样就构成了实例与原型的链条，叫做原型链。       可能还没有太明白什么是原型链，再以原型链继承的方式，具体解释原型链的构成。

    function Person() {}
    function Man() {}
    Man.prototype = new Person(); // 关键代码

    const m = new Man();
    console.log(m.constructor); // Person
    console.log(Man.prototype.__proto__ === Person.prototype); // true
    console.log(Person.prototype.__proto__ === Object.prototype); // true
    console.log(Object.prototype.__proto__ === null); // true
复制代码

上面代码创建了两个构造函数Person、Man，第三行代码改变了Man.prototype的引用，本质上是重写了Man的原型对象，Man.prototype.constructor已不指向默认的Man了，而是指向了Person实例，而Person的实例的constructor会委托Person.prototype上，故m.constructor指向了Person，这样的一个过程就构成了原型链。如图：

上面的图中，通过由相关联__proto__连接组成的链条结构，就是原型链。

4、 方法

1）、isPrototypeOf()方法

      现实中是无法访问到prototype，但可以通过一个方法（isPrototypeOf()）来确定对象之间是否存在这种关系，如果存在就返回true，否则false。以上面的例子为例，如下：

   console.log(Man.prototype.isPrototypeOf(m)); // true
   console.log(Person.prototype.isPrototypeOf(m)); // true
   console.log(Object.prototype.isPrototypeOf(m)); // true
复制代码

从上面的结果可以看出，prototype指向了调用isPrototypeOf()方法的对象Man.prototype，故这个方法返回true，因Person.prototype、Object.prototype都是存在同一条原型链上，故返回结果都都为true。

2）、getPrototypeOf()方法

      ES5新增了Object.getPrototypeOf()返回对象的原型，即返回prototype。

   console.log(Object.getPrototypeOf(m) === Man.prototype); // true
复制代码

3）、hasOwnProperty()方法

      hasOwnProperty方法检测一个属性是否存在实例中。

    function Person() {}
    Person.prototype.age = 35;

    const p = new Person();
    p.name = 'zhangSan';

    console.log(p.hasOwnProperty('name')); // true
    console.log(p.hasOwnProperty('age')); // false

复制代码

从结果看，hasOwnProperty()只能判断对象的属性在构造函数中，不能判断原型对象上的属性，那么如何判断原型对象上的属性呢？

4）、in操作符

      in操作符访问给定属性会返回true，无论该属性在原型对象上还是在构造函数上。

    function Person() {}
    Person.prototype.age = 35;

    const p = new Person();
    p.name = 'zhangSan';

    console.log('name' in p); // true
    console.log('age' in p); // true

复制代码

从上面看，同时使用in和hasOwnProperty()可判断一个属性在原型对象上，只需该属性在hasOwnProperty上为false，在in上为true即可，封装如下：

   function hasOwnProtorypeProperty(object, name) {
      return !object.hasOwnProperty(name) && (name in object);
  }
复制代码

5、结语

      到此，已写完了，构造函数、原型、实例及之间的关系，同时通过实例指向原型对象的内部指针，一直到顶层Object.prototype，构成原型链。       若文章中有不对的地方，欢迎指出。

如果大家想学习前端方面的技术，我把我多年的经验分享给大家，还有一些学习资料，分享Q群：1046097531