本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

原型链一直是js面试常考题，而且也是js非常核心的基础知识，也许平时不会经常使用，但是了解它会让自己大大加深对这个语言的了解，本文以非常通俗易懂的方式介绍原型链，耐心读下来，相信一定能够帮助到你。

构造函数和实例

假设你声明一个方法叫做Foo(),那么我们可以通过new Foo()来声明实例。

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();
复制代码

现在你可以很清晰的明白Foo()是构造函数，f1是它的实例。

属性Prototype

Foo()这个构造函数是一个方法。

方法也是对象数据类型，所以可以说方法是个对象。

对象就有属性，不过方法有自己特殊的一个属性，叫做prototype，其他对象没有哦。

这个属性会指向一个原型对象(Foo.prototype)，而原型对象也会有一个自己的属性叫做constructor，指向属性包含了一个指针，指回原构造函数。

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

    console.log(Foo.prototype);//Foo的原型对象
    console.log(f1.prototype);//f1没有 underfied
复制代码

属性__proto__

上文的prototype是给构造函数的所有实例提供共享方法和属性的。

实例又是怎么访问到共享方法和属性的呢？

f1实例没有prototype，而有一个属性__proto__，这是所有对象都有的属性，它指向到构造自己的构造函数的原型对象，然后js这个语言就是根据这个属性来让实例访问到共享属性和方法的

Foo是f1的构造函数，Foo.prototype是Foo的原型对象，所以f1.__proto__指向Foo.prototype

    function Foo() {
      console.log("我是一个构造方法");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);
复制代码

访问原型上的方法

Foo这个构造函数如果希望自己的实例能够拥有同一个属性，比如name，就在自己的原型对象上加上。

    function Foo() {
      console.log("我是一个方法");
    }

    Foo.prototype.name = "我是Foo创造的实例共享的属性";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//我是Foo创造的实例共享的属性
    console.log(f2.name);//我是Foo创造的实例共享的属性
复制代码

以上短暂总结