专栏首页AndroidTv模拟实现 new 操作符(js)

模拟实现 new 操作符(js)

首先需要理解,JavaScript 中的构造函数跟 Java 中的构造函数性质是不一样的。js 不是基于 class 这种静态类模式,而是基于原型对象的模式。

所以,在 js 中,new 操作符,其实可以通俗的理解成一个辅助工具,用来辅助函数构造出一个新对象。所以,我们才能够来模拟实现它,因为它其实通俗理解,就是一个工具函数。

得先明确这点,才能知道,的确是可以模拟 new 操作符的。

new 的职责

function A() {
    this.a = 1;
}
A.prototype.b = 1;
var a = new A(); // {a: 1}
a.b; // 1

所以,以上这种场景的 new 操作符其实就是做了几件事:

  • 创建一个继承自 A.prototype 的空对象
  • 让空对象作为函数 A 的上下文,并调用 A
  • 返回这个空对象

这是基本的 new 使用的场景,那么我们要来模拟实现的话,这几件事就得自己处理:

function _new(Fn, ...args) {
    // 1. 创建一个继承构造函数.prototype的空对象
    var obj = Object.create(Fn.prototype);
    // 2. 让空对象作为函数 A 的上下文,并调用 A
    Fn.call(obj, ...args);
    // 3. 返回这个空对象
    return obj;
}

这样就结束了吗?并没有

要模拟实现一个完整的 new 操作符,就还得将它的其他使用场景都考虑进去:

  • 当构造函数有返回值时
  • 判断一个函数是否能够作为构造函数使用

先来考虑第一种:

function A() {
    this.a = 1;
    return {b: 1};
}
new A(); // {b: 1}

function B() {
    this.b = 1;
    return 1;
}
new B(); // {b:1}

所以,当构造函数返回一个对象时,那么就以这个对象作为构造函数生成的对象;当构造函数返回基本类型数据时,当做没有返回值处理,内部新建个对象返回。

套用 MDN 对 new 的说明:

new 运算符创建一个用户定义的对象类型的实例具有构造函数的内置对象的实例。 ——(来自于MDN)

其实这句解释就把 new 操作符的所有职责或者说所有使用场景覆盖了:

  • 用户定义的对象类型 ==> 当构造函数有返回值时
  • 具有构造函数的内置对象 ==> 当前函数可用来作为构造函数,那么返回内部创建的新对象

所以,要完整模拟一个 new 的工作,还得完成上面两点,先来看看对返回值的处理,很简单:

function _new(Fn, ...args) {
    // 1. 创建一个继承构造函数.prototype的空对象
    var obj = Object.create(Fn.prototype);
    // 2. 让空对象作为函数 A 的上下文,并调用 A,同时获取它的返回值
    let result = Fn.call(obj, ...args);
    // 3. 如果构造函数返回一个对象,那么直接 return 它,否则返回内部创建的新对象
    return result instanceof Object ? result : obj;
}

接下去就剩最后一个处理了:判断一个函数是否可以作为构造函数

如何判断函数是否可以作为构造函数

我们通过 function 定义的普通函数都可以结合 new 来作为构造函数使用,那么到底如何判断一个函数能否作为构造函数呢?

网上有些文章里说了:

每个函数都有一些内部属性,如: [[Construct]] 表示可以用来作为构造函数使用,[[Call]] 表示可以用来作为普通函数使用 所以,当一个函数没有 [[Construct]] 内部属性时,它就不能用来作为构造函数

???

没错,从引擎角度来看,的确是这样处理,但这些内部属性我们并没有办法看到的啊,那对于我们这些写 js 的来说,如何判断一个函数是否能够作为构造函数呢?靠经验积累?

那就先来说说靠经验积累好了:

  • 箭头函数不能作为构造函数使用(每篇介绍箭头函数的文章里基本都会说明)
  • Generator 函数不能作为构造函数使用(俗称 * 函数,如 function *A(){}
  • 对象的简写方法不能作为构造函数使用({ A(){} }
  • 内置方法不能作为构造函数使用(如 Math.min)

靠经验积累只能是这样一条条去罗列,末尾链接的文章里有这么一句话:

[除非特别说明,es6+ 实现的特定函数都没有实现 [Construct]] 内置方法 简单的说,特定函数设计之初肯定不是为了用来构造的

这大佬是直接去阅读的 ECMA 规范,可靠性很强

那么,经验积累的方式更多是用于面试的场景,但模拟实现 new 是得从代码层面去判断,所以,还有其他方式可以用来判断函数是否能够作为构造函数吗?

有的,末尾链接的文章里,大佬给出了很多种思路,大致列一下:

  • 通过构造函数是否有该属性判断 Fn.prototype.constructor,但有局限性,无法处理手动修改的场景
  • 通过抛异常方式,局限性是依赖于原有 new 操作符,而且会导致构造函数逻辑被先行处理
  • 通过 Reflect.construct,加上 Symbol 的特殊处理后,就没有局限性,推荐方案

每种思路,文章都有讲解,感兴趣可以直接去看看,这里就只挑最后一种来讲讲:

  • 通过 Reflect.construct() 来判断一个函数是否能够作为构造函数
// 代码来自文末的链接
function is_constructor(f) {
  // 特殊判断,Symbol 能通过检测
  if (f === Symbol) return false;
  try {
    Reflect.construct(String, [], f);
  } catch (e) {
    return false;
  }
  return true;
}

其实本质上也是用抛异常方式来判断,但与直接 new A() 的抛异常方式不同的是,它不会触发构造函数的执行。这就得来看看 Reflect.construct 了:

Reflect.construct 方法等同于 new target(...args),提供了一种不使用 new 来调用构造函数的方法:

function A() {
    this.a = 1;
}
new A(); // {a: 1}
// 等价于
Reflect.construct(A, []); // {a: 1}

有的可能就好奇了,既然这样,那就直接用 Reflect.construct 来模拟实现 new 不就好了,还需要自己写上面那么多代码,处理那么多场景么?

emmm,你说的很有道理,是可以这样没错,但这样,不就学不到 new 的职责原理了吗,不就回答不了面试官的提问了吗?

Reflect.construct 还可以接收一个可选的第三个参数:

Reflect.construct(target, argumentsList[, newTarget])

  • target: 被调用的构造函数
  • argumentsList:参数列表,类数组类型数据
  • new Target:可选,当有传入时,使用 newTarget.prototype 来作为实例对象的 prototype,否则使用 target.prototype
  • 当 target 或者 newTarget 不能作为构造函数时,抛出 TypeError 异常

那么,我们可以怎样来利用这些特性呢?先看使用原始 new 的方式:

function A(){
    console.log(1);
}
B = () => {
    console.log(2);
}

new A(); // 输出1
new B(); // TypeError,抛异常

// 使用抛异常方式来判断某个函数能否作为构造函数时,如果可以,那么构造函数就会被先执行一遍,如果刚好在构造函数内处理一些业务代码,那么可能就会有副作用影响了
function isConstructor(Fn) {
    try {
        new A();   // 能够判断出 A 可以作为构造函数,但 A 会被先执行一次
        // new B();  // 能够判断出 B 不能作为构造函数
    } catch(e) {
        return false;
    }
    return true;
}

那么,该如何来使用 Reflect.construct 呢?

关键在于它的第三个参数,是用来指定构造函数生成的对象的 prototype,并不会去执行它,但却会跟第一个参数构造函数一起经过能否作为构造函数([[Construct]])检查,看看用法:

function A(){
    console.log(1);
}
A.prototype.a = 1;
function B() {
    console.log(2);   
}
B.prototype.a = 2;

var a = Reflect.construct(A, []); // 输出 1
a.a; // 1,继承自 A.prototype

var b = Reflect.construct(A, [], B); // 输出 1
b.a; // 2, 继承自 B.prototype;

我们来大概写一下 Reflect.construct 传入三个参数时的伪代码:

Reflect.construct = function(target, args, newTarget) {
    check target has [[Construct]]
    check newTarget has [[Construct]]
    var obj = Object.create(newTarget ? newTarget.prototype : target.prototype)
    var result = target.call(obj, ...args);
    return result instanceof Object ? result : obj;
}

第一个参数 target 和第三个参数 newTarget 都会进行是否能作为构造函数使用的检查,虽然 target 会被作为构造函数而调用,但我们可以把待检查的函数传给第三个参数,而第一个参数随便传入一个无关但可用来作为构造函数使用不就好了,所以,代码是这样:

// 代码来自文末的链接
function is_constructor(f) {
  // 特殊处理,因为 Symbol 能通过 Reflect.construct 对参数的检测
  if (f === Symbol) return false;
  try {
    // 第一个 target 参数传入无关的构造函数,第三个参数传入待检测函数  
    Reflect.construct(String, [], f);
  } catch (e) {
    return false;
  }
  return true;
}

// 当 f 可作为构造函数使用,Reflect.construct 就会正常执行,那么此时:
// Reflect.construct(String, [], f) 其实相当于执行了:
// var a = new String();
// a.__proto__ = f.prototype
// 既不会让被检测函数先行执行一遍,又可以达到利用引擎层面检测函数是否能作为构造函数的目的

总结

最终,模拟 new 的实现代码:

function _new(Fn, ...args) {
    function is_constructor(f) {
        if (f === Symbol) return false;
        try {
            Reflect.construct(String, [], f);
        } catch (e) {
            return false;
        }
        return true;
    }
    
    // 1. 参数判断检测
    let isFunction = typeof Fn === 'function';
    if (!isFunction || !is_constructor(Fn)) {
        throw new TypeError(`${Fn.name || Fn} is not a constructor`);
    }
    
    // 2. 创建一个继承构造函数.prototype的空对象
    var obj = Object.create(Fn.prototype);
    // 3. 让空对象作为函数 A 的上下文,并调用 A,同时获取它的返回值
    let result = Fn.call(obj, ...args);
    // 4. 如果构造函数返回一个对象,那么直接 return 它,否则返回内部创建的新对象
    return result instanceof Object ? result : obj;
}

几个关键点理清就可以写出来了:

  • 如何判断某个函数能否作为构造函数
  • 构造函数有返回值时的处理
  • 构造函数生成的对象的原型处理

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

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券