对js操作符new的理解

“new”是在项目开发或者自己写JS DEMO的时候经常会用到的一个操作符,我们知道这可以利用js内置对象函数或者自定义的“构造函数”生成一个对象,比如下图中的这种做法:
这里写图片描述

控制台输出生成对象A,但是为什么a对象会有props属性?为了避免代码成为我们“最熟悉的陌生人”,我们需要进行深究,也为了和js的其他核心知识点相辅相成来进行巩固学习,学以致用。

按照javascript语言精粹中所说

如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上。

这是技术类书籍的一般套路,讲的非常专业,同时也比较抽象,难以理解,我们可以将其逐步分离,一步步分析理解,辅助以实例,加深印象。

其实,new的过程,可以分解为以下四个步骤:

  1. 创建一个**空的**object对象并初始化
  2. 如果Fn.prototype是自定义类型,则将obj的内部proto(原型链的关键属性)设置为Fn.prototype,否则为Object.prototype
  3. 将obj作为this,使用args参数调用Fn的内部call方法
    3.1 call方法创建当前执行上下文
    3.2 调用F的函数体
    3.3 销毁当前的执行上下文
    3.4 返回F函数体的返回值,如果F的函数体没有返回值则返回undefined
  4. 如果call的返回值是Object类型,则返回这个值,否则返回obj

构成对象Prototype链的是内部隐式的proto,而并非对象显示的prototype属性。显示的prototype只有在函数对象上才有意义,从上面的创建过程可以看到,函数的prototype被赋给派生对象隐式proto属性,这样根据Prototype规则,派生对象和函数的prototype对象之间才存在属性、方法的继承/共享关系。

看烦了繁杂的解释?简单来讲就是三行代码 -。-

var a = {};
a.__proto__ = A.prototype;
A.call(a);

顿时清新有型。很简单有木有~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值