对 ES6 箭头函数 this 值得深思

在 Javascript 中,this 指的是当前执行上下文的对象。this 的值可以根据函数调用的方式和位置来变化。但是在 ES6 中,引入了箭头函数,箭头函数不同于普通函数,它的 this 是词法作用域,也就是说箭头函数里的 this 是嵌套它上层作用域的 this,而不是箭头函数自身的 this。

示例代码

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

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

在上面的代码示例中,函数 func1 是一个普通函数,它的 this 指向的是调用这个函数的对象 obj1。而箭头函数 func2 中的 this 指向的却是全局对象 window,所以它的输出结果是 undefined

箭头函数的使用场景

箭头函数的使用场景和普通函数有所不同。在某些情况下,使用箭头函数可以更加简洁明了。

1. 简化回调函数

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

在使用回调函数的时候,箭头函数可以更加简洁,减少冗余。

2. 简化嵌套函数

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

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

在使用嵌套函数的时候,箭头函数可以减少因嵌套导致的 this 指向问题。

总结

ES6 箭头函数与普通函数的差别在于箭头函数没有自己的 this,它继承了上层作用域的 this。因此在使用箭头函数的时候要注意上层作用域的 this 指向,避免产生错误。同时,在某些情况下,使用箭头函数可以简化代码。

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


猜你喜欢

  • SSE 技术在移动端 H5 应用中的应用场景和实践

    随着移动互联网的普及和发展,移动端 H5 应用的开发越来越受到关注,而 SSE 技术作为移动端 H5 应用的一种常用实现方式,也越来越得到了广泛的应用。 本文将介绍 SSE 技术在移动端 H5 应用中...

    1 年前
  • RESTful API 的 API 文档生成方法

    RESTful API 是现代 Web 开发中经常使用的一种 API 设计风格。它的特点包括资源关注、统一接口等,使得 API 更加易于理解和维护。对于 API 的使用者来说,清晰的文档是使用 API...

    1 年前
  • PWA 开发中如何处理离线访问

    随着 PWA 技术的不断发展,越来越多的网站开始采用 PWA 技术来提供更好的用户体验。PWA 技术可以帮助网站实现离线访问,让用户即使在没有网络连接的情况下也能够访问网站。

    1 年前
  • Babel 编译 ES5 时遇到的问题及解决方法

    在前端开发过程中,Babel 是一个非常流行的工具,用于将 ES6+ 的代码转换成浏览器兼容的 ES5 代码。然而在实际使用中,我们常常会遇到一些问题。本文将针对常见的问题和解决方法进行详细介绍,旨在...

    1 年前
  • TypeScript 中的类型修饰符技巧

    在 TypeScript 中,类型修饰符是指那些用来限制变量或函数的类型的关键字,例如 readonly、public、protected 等关键字。这些类型修饰符可以帮助开发者更好地控制代码的行为,...

    1 年前
  • Docker 部署 MongoDB 集群及常见问题解决详解

    前言 MongoDB 是一款流行的 NoSQL 数据库,它支持水平扩展,可以很好地满足大量数据存储和高并发读写的需求。而 Docker 是一款流行的容器化技术,它具备环境隔离、易于部署、可移植性等优点...

    1 年前
  • Hapi框架开发中解决跨域问题的几种方案

    跨域问题是前端开发中的一个常见问题。在使用Hapi框架开发web应用时,同样会遇到这个问题。本文将介绍几种解决Hapi框架开发中跨域问题的方案,包括Hapi官方支持的跨域插件以及自定义中间件方法,希望...

    1 年前
  • ES9 中全新的正则表达式的功能

    正则表达式是在许多编程语言中都存在的一种强大的字符串处理方式。在 JavaScript 中,正则表达式一直是非常重要的一部分,用于匹配、替换、搜索等操作。随着 ES9 的到来,正则表达式又迎来了全新的...

    1 年前
  • ECMAScript 2019 中的 Array.prototype.slice:取数组部分元素

    ECMAScript 2019 中的 Array.prototype.slice:取数组部分元素 Array.prototype.slice() 是 JavaScript 中最常用的数组方法之一,用于...

    1 年前
  • 使用 PM2 进行性能监控的教程指南

    前言 对于前端开发者而言,了解并掌握性能监控是非常必要的。而对于 Node.js 服务端开发者而言,使用 PM2 进行性能监控则是一种非常常见的方式。本篇文章将介绍如何使用 PM2 进行性能监控,旨在...

    1 年前
  • redux-saga 进阶 —— 处理复杂场景和异常

    随着前端应用的复杂性不断增加,单纯地使用 Redux 这样的状态管理库已经不能满足需求了,所以出现了 Redux-Saga 这样的中间件,用于处理异步逻辑和复杂场景。

    1 年前
  • 在 Promise 中如何处理多个请求返回的数据

    在 Promise 中如何处理多个请求返回的数据 随着前端技术的不断发展,现在常常需要在前端进行多个异步请求,并在所有请求都完成后再进行统一处理。在这种情况下,我们可以使用 Promise.all()...

    1 年前
  • 如何在 Custom Elements 中处理用户输入

    在 Web 开发中,我们经常需要在页面上添加自定义的 HTML 元素。Web Components 的出现为这种需求提供了新的解决方案:Custom Elements。

    1 年前
  • Angular 中如何利用 MatTooltip 提示信息

    MatTooltip 是 Angular Material 中的一个组件,可以在用户鼠标悬停在某个元素上时,以浮动框的形式展示提示信息。在前端开发中,我们经常需要给用户提供一些额外的信息来提示他们如何...

    1 年前
  • 详解 ES12 中的 Array.prototype.at 方法及其使用场景

    在 ES12 中,新增了许多有用的新特性,其中之一就是 Array.prototype.at 方法。这个方法可以方便地取出数组中指定位置的元素,不需要再使用下标来访问。

    1 年前
  • 基于 Sequelize 的数据缓存方案探讨

    前言 在 Web 应用程序中,缓存可以使页面加载速度更快,同时减少数据库交互次数,从而提高可扩展性。在本文中,我们将探讨如何使用 Sequelize ORM 创建基于 Redis 的数据缓存方案。

    1 年前
  • Mongoose 的查询过滤器,优化数据查询效率

    在进行 Web 开发中,前端经常需要与后端进行数据交互,而数据库则是实现这一目的的核心组件之一。许多前端工程师都使用 MongoDB 作为后端数据库,而 Mongoose 则是 MongoDB 的一种...

    1 年前
  • 使用 Koa2 实现权限控制

    最近,随着前后端分离的流行和网站功能的复杂化,权限控制成为了一个重要的话题。Koa2 是一个非常适合实现权限控制的 Node.js Web 框架,本文将详细介绍如何使用 Koa2 实现权限控制。

    1 年前
  • LESS 中如何去除列表标记样式

    在前端开发中,列表标记是常见的元素之一,它们可以帮助用户更好地理解页面中的信息结构。然而,有时候在设计中并不需要显示这些标记,而仅仅需要显示列表项中的内容。在这种情况下,我们可以使用 CSS 来去除列...

    1 年前
  • JavaScript 性能优化之使用 requestAnimationFrame 提高动画性能

    JavaScript 性能优化之使用 requestAnimationFrame 提高动画性能 在前端开发过程中,动画效果能够增强用户体验,但是一些复杂动画往往会影响页面性能,具体表现为卡顿、滑动不流...

    1 年前

相关推荐

    暂无文章