JavaScript简餐——原型链是什么？

---

前言

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

---

一、原型链

重温一下构造函数，原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针__proto__指向原型。并且我们还要知道，实例与构造函数原型之间有直接的联系，但实例与构造函数之间没有。那么，如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就实现了实例和原型之间构造了一条链，这条链就是我们所说的原型链。说白了就是疯狂套娃。下面看一个实例代码：

二、原型链示例

    function country () {
        this.countryName = 'China';
    }

    function province () {
        this.provinceName = 'Zhejiang';
    }

    function city () {
        this.cityName = 'Hangzhou';
    }

    province.prototype = new country();  //构造函数province()的原型设为构造函数country()的实例
    city.prototype = new province();  //构造函数city()的原型设为构造函数province()的实例

    let myCity = new city();

    console.log(`${myCity.cityName} is the capital of ${myCity.provinceName}, ${myCity.countryName}`);
    console.log(myCity);

这里我们有三个构造函数，分别代表了国家、省份和城市，并且都有代表各自名字的属性。定义好构造函数之后，我们让构造函数province()的原型设为构造函数country()的实例，再让构造函数city()的原型设为构造函数province()的实例。最后我们定义一个City()的实例。这样就构成了一个原型链。来看看打印结果：

可以看到，myCity现在可以访问到以上所有构造函数的属性。下面再来分析一下我们对city对象实例的展开部分吧。首先可以看到city实例的[[prototype]]指针指向的原型对象中有一个[[Prototype]]属性和一个provinceName的属性，因为我们把原来city()构造函数的原型对象替换成了province()构造函数的实例，所以city()构造函数的原型对象中就会有province()构造函数实例的[[Prototype]]指针和provinceName属性。再往下来还是同样的道理，city()构造函数的原型对象中的[[Prototype]]指针指向province()构造函数的原型对象，而这个原型对象又被我们替换成了country()构造函数的实例，所以province()构造函数的原型对象中也会有[[Prototype]]属性和countryName属性。再往下，province()构造函数的原型对象中的[[Prototype]]指针指向country()构造函数的原型对象，由于country()构造函数的原型没有被我们改变，所以它走常规流程，只获得constructor属性。不过，任何函数的默认原型都是一个Object的实例，所以最后可以看到其原型对象中有一个[[Prototype]]指针指向Object原型对象。下面再来上图解，以便更直观地理清我们得出的结论。

二、示例图解

可以根据这张图来对照着上面的结论来论证我们的分析啦。

---

总结

以上就是今天要讲的内容，本文简单介绍了原型链，并且根据代码实例进行了步步分析和图解。下一篇我们来讲一下JavaScript继承中的原型链继承。撒花~