ES11 中新的 globalThis 对象和旧的 this 有何区别

在 ES11 中,新加入了 globalThis 对象,旨在提供一个标准的方法来获取全局对象(即 window 对象或者 global 对象等)。它与常见的 this 对象有着很大的不同,下面将详细介绍它们之间的区别。

globalThis 对象的定义

globalThis 对象是一个全局对象,它是在所有的 JavaScript 环境中都可用的,包括浏览器和 Node.js 等环境。它是指向全局对象的标准属性,因此通过它可以更加容易地访问到全局对象。

以下是一个获取全局对象的示例:

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

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

这个示例中,我们使用 globalThis 获取了全局对象 windowglobal,它们分别是浏览器环境和 Node.js 环境下的全局对象。

this 的不同点

它们的不同点主要在以下几个方面:

1. this 与作用域相关

this 指向当前函数的对象,它的值只与函数的调用方式有关。而 globalThis 指向全局对象,与作用域无关。

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

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

当在全局范围内调用函数时,在 test() 函数中的 this 就会指向全局对象。而 globalThis 在任何情况下都指向全局对象。

2. this 与对象相关

this 是由对象调用函数时自动传递的,它的值将引用该对象。而 globalThis 没有这样的规则,它总是指向全局对象。

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

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

在上面的示例中,当 obj 对象调用 foo 函数时,它的 this 就会指向 obj 对象。而 globalThis 将引用全局对象。

3. this 与变量提升相关

this 与变量提升密切相关,如果在使用 this 时未定义该变量,程序将报错。而 globalThis 不需要变量提升,在任何时候都可以使用。

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

-------

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

在上面的示例中,当 test 函数调用 this 对象时,程序将抛出错误,因为此时 this 未定义。而 globalThis 可以在任何时候使用,不需要变量提升。

总结

通过本文的介绍,我们可以看出 globalThis 与常见的 this 对象有很大的不同点。globalThis 指向全局对象,与作用域和对象无关,而 this 则与作用域和对象相关。我们需要了解这些区别,以便在正确的时候使用正确的对象。

如果我们在获取全局对象时,使用 globalThis 将是更好的选择。它能够在任何时候获取到全局对象,甚至在跨窗口或者跨域时也可以使用。而使用 this 则需要在正确的上下文中调用,否则可能会引发运行时错误。

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


猜你喜欢

  • Server-sent Events(SSE) 实现原理详解及推广应用

    简介 随着互联网技术的不断发展,前端技术愈加被重视。而其中,Server-sent Events (SSE) 技术可以给我们带来更好的用户体验和更加高效的数据传输。

    9 个月前
  • ES11 中 BigInt 扩展 -- 全方位的大数运算

    ES11 中 BigInt 扩展 -- 全方位的大数运算 随着数值计算需求的增加,JavaScript 的数值类型已经无法满足我们的需求,因为在大数运算中,处理的数据不仅限于常规的数字类型,还可能是非...

    9 个月前
  • Nginx 性能优化技巧:提高并发访问的IO效率

    随着互联网时代的到来,网站的访问量和并发量也在不断增加。为了应对这样的压力,Nginx 作为一款高性能的 Web 服务器被广泛应用于各个领域。本文将主要介绍如何利用 Nginx 的一些性能优化技巧提高...

    9 个月前
  • ES12:更好的大数字处理

    JavaScript 是一种动态语言,作为一名前端工程师,我们需要经常处理数字。ES12 为数字处理提供了新的优化,特别是对于大数字的处理。在本篇文章中,我们将涵盖一些如何使用 ES12 处理大数字的...

    9 个月前
  • Socket.io 报错 NSP is not a function,如何解决?

    Socket.io 是一个非常流行的 WebSockets 库,用于在客户端和服务端之间建立实时通信。然而,在使用 Socket.io 的过程中,一些开发者会遇到报错 "NSP is not a fu...

    9 个月前
  • 使用 ES10 解决 Vue 中 DOM 监听器的性能问题

    在 Vue 中,使用 watch 或者 computed 监听数据变化时,Vue 会对 DOM 进行重新渲染,这个过程是比较耗性能的。很多开发者也会深刻地感受到这个问题,如果不加处理,会导致应用的性能...

    9 个月前
  • 在 Deno 中使用 Webpack 打包 React 应用的方法和技巧

    在 Deno 中使用 Webpack 打包 React 应用可以帮助我们更好地管理前端代码,并增加代码的复用性,提高开发效率。本文将介绍如何在 Deno 中使用 Webpack 打包 React 应用...

    9 个月前
  • Angular4 实现富文本编辑器

    富文本编辑器是 Web 开发中常用的一个功能,可以让用户轻松地编辑复杂的 HTML 内容,如排版、插入图片、插入链接等。本文介绍了如何使用 Angular4 实现一个富文本编辑器。

    9 个月前
  • ES8 中的 Object.defineProperties() 方法详解

    在前端开发中,我们经常需要操作 JavaScript 对象。而 ES8 中的 Object.defineProperties() 方法能够帮助我们更加灵活地定义对象的属性和方法,提升代码的可维护性和可...

    9 个月前
  • Mocha 测试框架中的测试用例性能调优详解

    在前端开发中,测试是不可避免的一件事情,而在测试中,性能测试又是非常重要的一个环节。Mocha 是一个常用的 JavaScript 测试框架,本文将详细介绍 Mocha 中的测试用例性能调优,并提供示...

    9 个月前
  • 如何在 Web Components 中使用 PWA 的技术细节及最佳实践

    在现代 Web 开发中,PWA (Progressive Web App) 已经被广泛使用。PWA 可以为用户提供更好的使用体验,包括离线访问、快速加载和可安装。与此同时,Web Components...

    9 个月前
  • ES7 之 Promise 对象详解

    Promise 是 ES6 引入的一个新的异步编程解决方案,可以更好地解决回调地狱问题,ES7 在 Promise 基础上做了一些改进,本文将详细讲解 ES7 中 Promise 对象的用法和注意事项...

    9 个月前
  • 如何使用 Tailwind CSS 实现可维护的 CSS 样式

    在前端开发过程中,CSS 样式的编写是一个不可避免的任务,而为了保证代码的可维护性和可读性,我们需要使用一些好的工具和框架来帮助我们完成这个任务。其中,Tailwind CSS 就是一个非常值得推荐的...

    9 个月前
  • 使用 Server-sent Events(SSE) 轻松打造实时音频播放应用

    在今天的 Web 应用中,实时性已经成为了一个必要的功能。要实现实时音频播放应用,可以使用 Websocket 或 SSE。但是相比于 Websocket,SSE 的实现成本更低,更加轻量级。

    9 个月前
  • 浅析 ES11 的 AggregateError—— 一个更精确的异常报告工具

    在前端开发中,我们经常会遇到各种异常错误,这不仅影响了我们的开发效率,还会带来用户体验上的不满。ES10 中已经引入了 Error.stackTraceLimit 属性,可以帮助我们定位异常,但这并不...

    9 个月前
  • 在 Koa2 中使用 PM2 进行进程管理

    随着前端应用的日益复杂,需要在服务器端进行更多的操作,例如调用第三方 API、数据库操作等。Koa2 是一个非常流行的 Node.js Web 框架,提供了基础的路由和中间件支持,但是对于进程管理仍然...

    9 个月前
  • Socket.io 在移动端应用中的应用实例与技巧总结

    Socket.io 是一个流行的 JavaScript 库,用于实现双向的、实时的网络通信。在移动端应用中使用 Socket.io 可以极大地提高用户体验,例如实时消息、多人在线聊天室、实时数据更新等...

    9 个月前
  • 如何使用 Custom Elements 和 Intersection Observer 实现懒加载?

    随着前端页面变得越来越复杂,懒加载已经成为了一个必不可少的特性,它可以让我们高效地加载页面,减少资源消耗,提升用户体验。今天,我们将介绍如何使用 Custom Elements 和 Intersect...

    9 个月前
  • 解决 Material Design 中的 SwipeRefreshLayout 与 RecyclerView 滑动冲突问题

    在 Android 中,SwipeRefreshLayout 是一个常用的控件,可以让用户在下拉刷新的时候进行数据更新。而在 Material Design 中,RecyclerView 是一个高度定...

    9 个月前
  • ES10 中的新特性:Promise.prototype.finally() 的实战应用

    ES10 中的新特性:Promise.prototype.finally() 的实战应用 在前端开发中,异步操作是不可避免的。而 Promise 对象,是一种用于处理异步操作的标准化解决方案,其可以优...

    9 个月前

相关推荐

    暂无文章