前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >笨办法理解原型链

笨办法理解原型链

作者头像
lilugirl
发布2019-05-28 11:35:32
2870
发布2019-05-28 11:35:32
举报
文章被收录于专栏:前端导学

关于原型链的文章之前写了一篇 https://cloud.tencent.com/developer/article/1436914

今天想用另一个视角再把原型链理解一遍,主要通过分析对象的__proto__属性和contructor属性反向理解原型链。

我分三层进行分析,第一层分析Object、Object.prototype及 由Object派生的对象实例。

第二层分析自定义构造函数,及该构造函数原型对象,派生对象实例

第三层分析继承型的构造函数,及该构造函数原型对象,派生对象实例

第一层

构造函数Object

__proto__属性

contructor属性

代码语言:javascript
复制
console.log("Object", Object);

console结果如下:

Object的原型对象Object.prototype

__proto__属性

contructor属性

有 指向构造函数Object Object.prototype.constructor=Object

代码语言:javascript
复制
console.log("Object.prototype", Object.prototype);

对象实例 new Object()

__proto__属性

contructor属性

有 指向原型对象 a.__proto__=Object.prototype 也就是 (new Object).__proto__=Object.prototype

代码语言:javascript
复制
var a = new Object();
console.log("a", a);

第二层

自定义构造函数Dog

__proto__属性

contructor属性

代码语言:javascript
复制
    function Dog(name) {
      this.name = name;
      this.type = 'Dog';
    }
    console.log("Dog", Dog);

console结果如下:

自定义构造函数Dog的原型对象Dog.prototype

__proto__属性

contructor属性

有 不知道指向哪里 猜测是指向到Object原型对象 Dog.prototype.__proto__=Object.prototype ?

有 指向构造函数Dog Dog.prototype.constructor=Dog

代码语言:javascript
复制
console.log("Dog.prototype", Dog.prototype);

Dog对象实例 new Dog()

__proto__属性

contructor属性

有 指向原型对象 doggie.__proto__=Dog.prototype 也就是 (new Dog).__proto__=Dog.prototype 即 (new Dog).__proto__.__proto__=Object.prototype

代码语言:javascript
复制
var doggie = new Dog("wangwang");
console.log("new Dog", doggie);

对于通过对象字面量创建的对象链接到Object.prototype即 通过对象字面量创建的对象.__proto__=Object.prototype 这点和new出来的对象是不同的。

当你创建一个新对象时,你可以选择某个对象最为它的原型。以下代码给Object.create方法创建一个使用对象作为期原型的新对象。

代码语言:javascript
复制
if (typeof Object.beget !== 'function') {
      Object.create = function (o) {
        var F = function () {

        };
        F.prototype = o;
        return new F();
      };
    }

下面给出一个使用的例子

代码语言:javascript
复制
 var stooge = {
      "first-name": "liu",
      "last-name": "yi"
    };



var another_stooge = Object.create(stooge);

根据观察

stooge.__proto__ === Object.prototype

another_stooge.__proto__ === stooge

another_stooge.__proto__.__proto__ === Object.prototype

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一层
    • 构造函数Object
      • Object的原型对象Object.prototype
        • 对象实例 new Object()
        • 第二层
          • 自定义构造函数Dog
            • 自定义构造函数Dog的原型对象Dog.prototype
                • Dog对象实例 new Dog()
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档