首先要明确一点,js中的prototype是每个函数创建时(并非执行时,而是函数存在于堆区后)自动创建一个默认对象,这一对象中可以动态的添加属性

在new对象后,可以通过“对象.属性名”的方式直接调用prototype对象中的属性

但是,注意,prototype对象只在函数中存在(函数本身也是一个对象,可以具有属性/方法),通过构造函数创建的对象中不存在原型对象属性,而是存在一个指针,通常被命名为_proto_,这个并不是一个值为原型对象的属性,因此在new的对象中也无法访问。

constructor又是什么呢?

字面意思:构造器

function a(){

  this.age=12;

}

console.log(a.prototype)  // { constructor :  a() }

从打印出来的原型对象中可以看出,constrcutor是存在于原型对象中的一个属性,值为一个函数(此函数默认指向原型对象所属函数)

那么,问题来了:new是根据构造函数来创建对象,已经有了a()函数,为什么多此一举添加一个constructor属性呢?

我们打印一下constructor

console.log(a.prototype.constructor)  // a()

也就是说constructor属性值中并不存在已经得以好的a()函数已经定义好的age属性,想想也对age在new之前是属于window对象的属性,凭啥要回出现在构造函数中

实际上,new对象的过程大致是这样的:

首先编写一个函数,代码在被js引擎解析后函数存入堆区

解析到new语句时,先提取函数的prototype对象,根据原型对象中的constructor属性创建函数的对象

然后,创建new出来的对象与prototype对象的链接(在new出来的对象中添加一个指针)

最后,将a()函数中定义的属性复制一个副部给new出来的对象

关于prototype与constructor的几点理解的更多相关文章

  1. js中prototype,constructor的理解

    连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...

  2. prototype 以及 constructor 属性的理解

    1 为什么 xx.constructor.prototype 可以访问到当前对象的原型. 'str'.constructor.prototype      'str'.constructor 指向当前 ...

  3. javascript中prototype、constructor以及__proto__之间的三角关系

    三者暧昧关系简单整理 在javascript中,prototype.constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备 ...

  4. 关于JS call apply 对象、对象实例、prototype、Constructor、__proto__

    关于call与apply的理解容易让人凌乱,这里有个方法可供参考 tiger.call(fox,arg1,arg2...) tiger.apply(fox,[arg1,arg2...]) 理解为 fo ...

  5. javascript中的prototype和constructor

    构造函数 我们知道,ECMAScript5中的Object.Array.Date.RegExp.Function等引用类型都是基于构造函数的,他们本身就是ECMAScript5原生的构造函数.比如,我 ...

  6. 第六章 prototype和constructor

    首先我们看下面一段代码(第六章 01.htm) function myfun() //定义一个函数myfun { }; console.log(typeof (myfun.prototype)); c ...

  7. Javascript中的__proto__、prototype、constructor

    今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...

  8. Prototype and Constructor in JavaScript

    The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JA ...

  9. JavaScript中的 prototype 和 constructor

    prototype属性  任何js函数都可以用作构造函数, 而构造函数需要用到prototype属性, 因此, 每个js函数F(除了ES5的Function.bind()方法返回的函数外) 都自动拥有 ...

随机推荐

  1. 关于ovf导入到Esxi上出显的“文件条目(行1)无效,sha256……”处理办法

    通常删除同名文件*.mf文件即可导入!

  2. xshell xftp使用

    1.xftp传输的中文上去乱码,是因为传输时使用GB2312,而服务端不是GB2312 使用UTF-8编码上传即可

  3. 从Flask-Script迁移到Flask-Cli

    Abstrct flask从0.11版本开始引入了click提供命令行支持,在此之前我们通常会引入Flask-Script来提供. 在<Flask web开发>这本书编写时flask0.1 ...

  4. ajax+node实现图片上传

    利用formData实现ajax上传图片后,保存图片到指定收藏夹,然后展示新重命名后的图片 html: <input type="file" id="uploadI ...

  5. Windows下Redis安装+可视化工具Redis Desktop Manager使用

    Redis是有名的NoSql数据库,一般Linux都会默认支持.但在Windows环境中,可能需要手动安装设置才能有效使用.这里就简单介绍一下Windows下Redis服务的安装方法,希望能够帮到你. ...

  6. 12.24 ES6浅谈--块级作用域,let

    第一部分:ES6新增了块级作用域,let关键字用于声明变量,相较于var而言,let关键字不存在声明提前. 1.ES6真正的出现了块级作用域,使用双花括号括住并在其中用let声明变量,会存在暂时性死区 ...

  7. <Jmeter入门不放弃>之<3.两种常见录制脚本的方法>

    关于录制,我想表达的是,并不要以为他很低端,解决需求才是王道,大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,才有印象,大家一定要启动JMeter!跟着理解操作 录制 ...

  8. linux下关闭Oracle及关机

    参考了如下文章 linux环境下连接oracle 并操作oracle数据库 1 先看lsnrctl和oracle service是否都启动了.如果没有启动,先启动:如net start,启动所有服务. ...

  9. C++ Compiling… Error spawning cl.exe

    转自VC错误:http://www.vcerror.com/?p=500 解决方法: 方法(一): 启动VC时不要用图形界面,通过在命令提示符下输入:Msdev /useenv运行(注意啦/前面有个空 ...

  10. 个人笔记 - Word2013 论文格式调整

    1.如何实现每章奇偶页页眉不同 2.参考文献自动编号.交叉引用及在正文中自动更新 <1>在要插入引用上标的地方点击“插入”——>“交叉引用” <2>设置引用类型为“编号项 ...