ECMAScript 2020 的 new.target 判断是否为构造函数

在前端开发中,构造函数是非常常见的一种函数类型,用于创建实例对象。而在 ECMAScript 2020 中,新增了一个 new.target 属性,可以用来判断当前函数是否使用了 new 关键字调用,从而方便我们在构造函数中区分实例化过程与普通函数的调用过程,并做出相应的处理。

new.target 的基本用法

new.target 属性是 ECMAScript 2020 中新增的一个元属性,它用于返回当前函数是否被 new 关键字调用。如果是,则返回函数本身,否则返回 undefined。

下面是 new.target 的基本使用方法:

-------- -------- -
  ---------------------- --- --------
-

--------- -- -----
--- --------- -- ----

在上面的例子中,我们定义了一个 Person 函数。当使用 new 关键字调用 Person 函数时,new.target 返回 Person 函数本身,因此上面的代码输出 true。而当直接调用 Person 函数时,new.target 返回 undefined,因此输出 false。

判断是否为构造函数

借助 new.target 属性,我们可以轻易地判断当前函数是否使用了 new 关键字调用,从而判断当前函数是否为构造函数。

下面是一个判断当前函数是否为构造函数的例子:

-------- ------------ ---- -
  -- ------------------------
  -- ------------- -
    ------ --- ------------ -----
  -
  --------- - -----
  -------- - ----
-

----- ------ - --- ------------- ----
----- ------- - -------------- ----

------------------ ---------- -------- -- ----
------------------- ---------- -------- -- ----

在上述例子中,我们对 Person 函数做了一些修改,如果当前函数不是构造函数,则强制将其转化为构造函数并创建一个新的实例对象。这样一来,我们就可以在创建实例对象的同时,确保调用构造函数,并将相关参数正确地传递给构造函数。

使用场景举例

单例模式

在使用单例模式时,我们通常需要限制该类只能实例化一次,从而避免多次实例化导致的资源浪费等问题。而借助 new.target 属性,我们可以轻松地判断当前类是否已经实例化过了,如果是,则返回已有的实例对象;如果不是,则创建新实例对象并返回。下面是一个单例模式的例子:

----- --------- -
  ------------- -
    -- ----------- --- ------------------- -
      ------ -------------------
    -
    --------- - ------------
    ------------------ - -----
  -
-

----- -- - --- ------------
----- -- - --- ------------

-------------- --- ---- -- ----

----- -- - ------------
-------------- --- ---- -- ----

在上述例子中,我们通过判断 new.target 是否等于 Singleton.instance 来判断 Singleton 是否已经实例化过了。如果已经实例化,则返回已有的实例对象,否则创建新实例对象并返回。在这里,我们使用了静态属性 instance 来记录 Singleton 实例。

Mixin

Mixin 是一种将多个类的功能组合在一起的方法。借助 new.target 属性,我们可以轻松地实现 Mixin 功能,从而避免了多次继承的问题。下面是一个 Mixin 的例子:

-------- ---------------- -
  ----- --- -
    -------------------- -
      --- ------ ----- -- ------- -
        ----- -------- - --- ---------------
        ------------------------------------------------- -- -
          ----- --- - ----------------------------------------- ------
          --------------------------- ----- -----
        ---
      -
    -
  -
  ------ ----
-

----- - -
  ----- -
    -------------- -- ----
  -
-

----- - -
  ----- -
    -------------- -- ----
  -
-

----- - ------- -------- -- -
  ------------- -
    --------
  -
-

----- - - --- ----
-------- -- - -- -

在上述例子中,我们通过 Mixin 函数将 A 类和 B 类的功能混合到 C 类中。在 Mixin 函数中,我们先将传递进来的多个类实例化,并将所有属性和方法复制到 Mix 类中,然后再让 C 类继承 Mix 类即可。在混合的过程中,我们借助了 new.target 属性来判断当前是否为构造函数,从而避免了多次实例化问题。

总结

ECMAScript 2020 的 new.target 属性为我们提供了一个非常方便的特性,可以用来判断当前函数是否使用了 new 关键字调用,从而方便我们在构造函数中区分实例化过程与普通函数的调用过程,并做出相应的处理。借助 new.target 属性,我们可以轻松地实现诸如单例模式、Mixin 等常见的设计模式,并大大提高开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6496bee948841e98943f816d


猜你喜欢

  • 如何使用 Server-sent Events 实现实时页面更新

    在 Web 应用程序中,实时 (real-time) 更新是十分重要的功能,它可以提升用户体验,增加应用程序的价值。常用的实现方法包括轮询(Polling)、WebSocket 和 Server-se...

    1 年前
  • 如何解决 CSS Reset 引起的字体大小不一致问题

    CSS Reset 是为了消除不同浏览器之间的差别,并让网站在不同的浏览器中展现出一致的效果。但有时候,CSS Reset反而会引起一些问题,比如字体大小不一致。 在使用 CSS Reset 的时候,...

    1 年前
  • MongoDB 如何优化查询性能?

    在现代 Web 应用中,数据库是必不可少的一部分。作为一种灵活性高、易于扩展的非关系型数据库,MongoDB 逐渐成为了前后端开发中的首选数据库。然而,尽管 MongoDB 进行了很多工作以提高其性能...

    1 年前
  • TypeScript 2.9 发布:缩小类型检查的范围 - by 不说

    TypeScript 是一个由微软开发的一种开源的编程语言,它是 JavaScript 的一个超集,基本包含了所有的 JavaScript 语言元素,同时支持强类型、对象导向等特性。

    1 年前
  • 如何优化 LESS 编译输出的 CSS 文件大小

    背景 LESS 是一种流行的 CSS 预处理器,它为 CSS 提供了一些重要的功能,例如变量、混合、嵌套、条件语句等等,这些功能可以使得 CSS 的编写更加灵活方便,同时也可以提高代码复用性和可维护性...

    1 年前
  • 利用 Flexbox 实现瀑布流布局的方法及实践

    瀑布流布局是一种常见的网站页面布局方式,特别适合展示图片等网站内容。实现瀑布流布局的方法有很多,本文将介绍如何利用 Flexbox 实现瀑布流布局,并给出示例代码。

    1 年前
  • PM2:一个生产环境 node.js 应用的进程管理器

    在生产环境中,我们需要部署可靠的 node.js 应用程序。一个可靠的应用程序需要能够持久性的运行,即使发生故障和异常情况也能够迅速恢复。PM2 正是这一目的而生的,它是一个强大的进程管理器,对于 n...

    1 年前
  • 推荐一款 Material Design 风格的 Dialog 控件

    引言 在前端开发中,弹出框组件是必不可少的,用来提示用户需要注意的事项或者进行操作的反馈。在 Material Design 中,Dialog 控件是一种常见的交互组件,能够提供美观、易用的体验效果。

    1 年前
  • Webpack 性能优化:配置分析与策略

    前言 Webpack 是现代前端开发中重要的构建工具之一,但是在项目不断壮大的过程中,Webpack 也可能会遇到一些性能问题。特别是当项目较大时,Webpack 的构建时间会变得非常漫长。

    1 年前
  • Express.js 中使用 Passport 实现用户认证

    在现代 web 应用程序中,用户认证是必不可少的功能。有许多开源的认证库可以使用,其中 Passport 是最流行的之一。它是一个可扩展的 Node.js 应用程序,可用于通过多种认证方式进行用户认证...

    1 年前
  • ES7 中的 Array.prototype.at()

    ES7 中的 Array.prototype.at() 在 JavaScript 中使用数组是非常常见的,但在以往的 ES6 中,如果我们想要访问数组中的某一项,只能通过索引值将其取出,如 arr[0...

    1 年前
  • 使用 Tailwind CSS 框架时,如何解决样式和布局出现的问题?

    什么是 Tailwind CSS? Tailwind CSS 是一款由 Adam Wathan 和 Steve Schoger 开发的 CSS 框架,它与传统的 CSS 框架不同,因为它不是基于 UI...

    1 年前
  • 在 Vue.js 项目中使用 echarts 出现的问题与解决方案

    Vue.js 是一种流行的 JavaScript 框架,而 echarts 则是当前最受欢迎的数据可视化工具。在 Vue.js 项目中集成 echarts 可以使得数据图表更加生动直观。

    1 年前
  • 解析 ECMAScript 2019 的 Object.fromEntries() 方法

    ECMAScript 2019 规范中新增了 Object.fromEntries() 方法,它的作用是将一个由键值对组成的数组转换为一个对象。本文将详细解析这个方法并带来指导意义和示例代码。

    1 年前
  • 在 Hapi 框架中添加 Swagger 文档

    Swagger 是一种用于描述和展示 RESTful API 的标准格式,提供了可视化的 API 文档,并允许用户进行交互测试和直接访问 API。在 Hapi 框架中添加 Swagger 文档可以方便...

    1 年前
  • 使用 React Router 实现页面跳转效果

    React Router 是一个用于 React 应用的强大路由库。它可以实现单页面应用中的页面跳转效果,并为更好的用户体验提供支持。本文将详细介绍使用 React Router 实现页面跳转效果的方...

    1 年前
  • PWA 实现中如何添加新的缓存版本?

    PWA(Progressive Web App)是一种新型的 Web 技术,可以将 Web 应用程序转化为类似于本地应用程序的用户体验。其中重要的一点是使用 Service Worker 来实现离线缓...

    1 年前
  • 如何在 Sequelize 中使用别名进行表名和字段名的简化

    如何在 Sequelize 中使用别名进行表名和字段名的简化 前言 Sequelize 是一款 Node.js 中用于操作关系型数据库的 ORM 框架,它可以通过定义模型来操作数据库中的表,从而使数据...

    1 年前
  • 如何使用 ECMAScript 2020 优化代码的不可变性

    ECMAScript 2020 是 JavaScript 语言的最新版本,通过它可以更好地优化代码的不可变性。在本文中,我们将探讨如何使用 ECMAScript 2020 的新特性来提高代码的可维护性...

    1 年前
  • 使用 RxJS 的 switchMap 操作符避免多次请求同一数据源

    在 Web 开发中,前端应用经常需要从远程服务器获取数据并进行展示或处理。由于网络延迟或用户交互等因素,我们不可避免地会出现多次请求同一数据源的情况。这不仅会产生额外的网络流量和服务器负载,还会降低用...

    1 年前

相关推荐

    暂无文章