专栏首页前端导学笨办法理解原型链

笨办法理解原型链

关于原型链的文章之前写了一篇 https://my.oschina.net/lilugirl2005/blog/1825752

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

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

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

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

第一层

构造函数Object

__proto__属性

contructor属性

console.log("Object", Object);

console结果如下:

Object的原型对象Object.prototype

__proto__属性

contructor属性

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

console.log("Object.prototype", Object.prototype);

对象实例 new Object()

__proto__属性

contructor属性

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

var a = new Object();
console.log("a", a);

第二层

自定义构造函数Dog

__proto__属性

contructor属性

    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

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

var doggie = new Dog("wangwang");
console.log("new Dog", doggie);

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

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

if (typeof Object.beget !== 'function') {
      Object.create = function (o) {
        var F = function () {

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

下面给出一个使用的例子

 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP核心技术与最佳实践 读书笔记 第三章 正则表达式基础与应用

    Perl和.NET对正则表达式的支持最为强大,而Javascript对正则表达式的支持则比较“朴素”。

    lilugirl
  • php设计模式读书笔记

    重构,简单点说是重命名一个属性或者方法,复杂点说是压缩一个已有的类。改变你的代码使得它符合一个或者更多的设计模式是另外一种重构。

    lilugirl
  • 从零开始开发企业级angularjs应用

    lilugirl
  • 移动端时间选择器

    Github地址:https://github.com/IronPans/LazyPicker

    IMWeb前端团队
  • 移动端时间选择器

    开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。 Github地址:https://github.com/IronPans/LazyPicker...

    IMWeb前端团队
  • Javascript之其实我觉得原型链没有难的那么夸张!

      原型链、闭包、事件循环等,可以说是js中比较复杂的知识了,复杂的不是因为它的概念,而是因为它们本身都涉及到很多的知识体系。所以很难串联起来,有一个完整的思路...

    zaking
  • VBA对象篇概述

    大家好,后面开始将介绍VBA对象模型部分内容,会引入许多新的概念,尽量循序渐进的介绍相关内容,力求深入浅出。

    无言之月
  • UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

    本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。  先放一张微软官方商城的图,Surfac...

    Shao Meng
  • Excel小技巧50: 快速合并单元格中的文本

    如果想要将几个单元格中的文本合并,有很多种方法。然而,有一种方法最会被忽视,可能是我们很少使用的缘故。它就是“内容重排”命令,如下图1所示。

    fanjy
  • spring cloud 四种服务下线方式

    这里指已经在 Eureka 注册中心注册的服务,如果需要停用,有四种方式进行停用。

    潇洒

扫码关注云+社区

领取腾讯云代金券