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

故更新上面的图如下：


image.png

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

    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，构成原型链。
      若文章中有不对的地方，欢迎指出。

本文来源：JavaScript之深入原型与原型链
Git地址：JavaScript之深入系列
)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335