JavaScript学习笔记之constructor,prototype,__proto__解惑

引言

在学习JavaScript时,不可避免的接触到了原型原型链的概念,结果被constructorprototype__proto__这些属性搞得一脸懵逼,这些都是什么鬼!!!通过谷歌浏览器调试时,看对象实例的内部结构,这三个属性也是你中有我,密不可分,完全理不清头绪。最后通过理清概念,不断验证,最终有了一些思路。

概念

要想真正弄清楚constructorprototype__proto__这些属性的之间的区别和联系,首先我们要明确定义:

  • constructor属性始终指向创建当前对象的构造函数
  • prototype属性是每个函数对象都具有的属性,被称为原型对象,因为其本身也是个对象。
  • __proto__属性是每个对象具有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例对象会继承prototype上的属性和方法。

事例

下表列出了实例对象和函数对象的区别:

constructor prototype __proto__
A ✔︎ ✔︎ ✔︎
a ✔︎ ✔︎

由上表可以看出实例对象是没有prototype属性的,只有函数对象才有(这一点很重要!!!),下面用代码来具体解释下以上三个属性的关系:

<script type="text/javascript">
    function A() {};
   
    var a = new A();
</script>

JavaScript实际上执行的是:

<script type="text/javascript">
    function A() {};

    var a = new Object();
    a.__proto__ = A.prototype;
    A.call(a);
</script>

其中A.prototype也是个对象,它由constructor__proto__属性组成 (这一点很重要!!!),它的构造过程如下:

A.prototype = new Object();
A.prototype.constructor = A;
A.prototype.__proto__ = Object.prototype;

ObjectFunction原型对象

  • JavaScript中的所有对象都来自Object,所有对象从Object.prototype继承方法和属性,尽管它们可能被覆盖。例如,其他构造函数的原型将覆盖constructor属性并提供自己的toString()方法。Object原型对象的更改将传播到所有对象,除非受到这些更改的属性和方法沿原型链进一步覆盖。它的构造过程如下:

    Object.prototype = new Object();
    Object.prototype.constructor = Object;
    Object.prototype.__proto__ = null;
    
    ...
    
    Object.__proto__ = Function.prototype;
    
  • 全局的Function对象没有自己的属性和方法, 但是, 因为它本身也是函数,所以它也会通过原型链从Function.prototype上继承部分属性和方法。Function实例从Function.prototype 继承了一些属性和方法。 同其他构造函数一样, 你可以改变构造函数的原型从而使得所有的Function实例的属性和方法发生改变。它的构造过程如下:

    Function.prototype = new Function();
    Function.prototype.constructor = Function;
    Function.prototype.__proto__ = Object.prototype;
    
    ...
    
    Function.__proto__ = Function.prototype;
    

验证

我们通过谷歌浏览器来进行调试,来验证我们的结论,先来看下Object原型对象,如下图:

再来看下Function原型对象,如下图:

最后看下a_a实例对象,如下图:

测试代码

红框框住的部分就是所谓的原型链,原型链中的方法,实例对象a_a都可以访问,JavaScript也是用原型链来实现继承的。

另外,还有一件有趣的事情,如下图:

无限递归

可以无限延展下去,是不是很有趣,有兴趣的同学可以试一下,可以加深你对这三个属性的理解,哈哈😄。

结语

关于怎么用原型和原型链来实现继承,网上有很多好的博文供大家参考,大家也可以参考以下链接,我在这里就不再废话了。本文如有错误,希望指正,不胜感激!

参考链接

https://segmentfault.com/a/1190000000662547
https://segmentfault.com/a/1190000003017751
http://blog.jobbole.com/9648/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在JavaScript中,原型链作为一个基础,老生长谈,今天我们就来深入的解读一下原型链。 本章主要讲的是下面几点...
    Devinnn阅读 1,418评论 1 6
  • 基本概念 先用构造函数创建一个对象 在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例...
    杰哥长得帅阅读 522评论 0 2
  • 普通创建对象和字面量创建对象不足之处:虽然 Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有...
    believedream阅读 2,429评论 2 18
  • 吊扇轻轻转动,炎热的天气没有一丝得到改善,窗外的街道像是被高温扭曲,平坦的直路变得凹凸不平,大约是太热了,一件白色...
    刘月霞snow阅读 356评论 0 0
  • 今年忽然间迷恋上了香水。 发端似乎是偶然整理衣服,衣物太多全部乱腾腾的压在衣柜前,柜门未合。夜里睡觉的时候隐约闻见...
    梨苒阅读 224评论 0 0