JS 箭头函数的this指向详解

JS 箭头函数的this指向详解

在 JavaScript 中,this是一个非常重要的概念,它代表函数执行时的上下文。而箭头函数作为 ES6 新增的特性之一,虽然与普通函数有些相似之处,但它的this指向却有着很大的不同之处。

箭头函数与普通函数的区别

语法

箭头函数的语法比普通函数更简洁,可以帮助我们更加快速地书写代码,同时也可以减少代码中this指向发生变化的情况。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

this指向

与普通函数不同,箭头函数没有自己的this值,它的this会继承外层作用域的this

// 普通函数中的this
const obj = {
  name: "Alice",
  sayHi: function () {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm Alice.

// 箭头函数中的this
const obj = {
  name: "Alice",
  sayHi: () => {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm undefined.

在箭头函数中,this被继承自外层作用域,也就是全局作用域。所以此时this.name实际上是 undefined。

需要注意的是,使用箭头函数并不代表所有情况下都适用,特别是当需要动态绑定this时,我们需要使用普通函数。

箭头函数中的this指向

在理解箭头函数的this指向时,主要分为两种情况讨论:全局作用域下的箭头函数和对象方法中的箭头函数。

全局作用域下的箭头函数

在全局作用域下定义一个箭头函数时,此时它的this指向的是全局对象window

const func = () => {
  console.log(this === window); // true
};
func();

这是因为箭头函数并没有改变this的指向,它的this与最近的普通函数或全局作用域是相同的。此时,最近的普通函数或全局作用域就是全局作用域。

对象方法中的箭头函数

在对象方法中使用箭头函数时,此时它的this指向的是该方法所属的对象。

const obj = {
  name: "Alice",
  sayHi: () => {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj.sayHi(); // Hi, I'm undefined.

const obj2 = {
  name: "Bob",
  sayHi: function () {
    console.log(`Hi, I'm ${this.name}.`);
  },
};
obj2.sayHi(); // Hi, I'm Bob.

在第一个例子中,因为箭头函数的this并没有指向obj,而是指向了最近的全局作用域。所以此时this.name是 undefined。而在第二个例子中,因为该函数是普通函数而非箭头函数,它的this指向对象obj2

示例说明

下面的示例说明了箭头函数在不同情况下的this指向。

示例一:定义在全局作用域的箭头函数

const func = () => {
  console.log(this === window); // true
};
func();

该例子定义了一个箭头函数func,该函数定义在全局作用域下,因此该函数中的this指向的是全局对象window。执行该函数后,控制台会依次输出true

示例二:在对象方法中定义箭头函数

const obj = {
  name: "Alice",
  setName: function (name) {
    const set = () => {
      this.name = name;
    };
    set();
  },
};
console.log(obj.name); // Alice
obj.setName("Bob");
console.log(obj.name); // Bob

该例子定义了一个对象obj,该对象包含一个属性name和一个方法setName。在方法setName中,定义了一个箭头函数set,该函数将obj对象的name属性的值修改为传入的name值。通过调用对象方法setName("Bob"),成功将objname属性修改为 Bob。

结语

总而言之,箭头函数是一种有着自己独特特性的函数,它的this指向与普通函数有着很大不同。虽然使用起来很方便,但在某些特定的场景下会出现一些问题。因此,在使用时,我们需要充分理解箭头函数的特性,结合具体的场景进行选择。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS 箭头函数的this指向详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • json获取数据库的信息在前端页面显示方法

    Sure! 在前端页面中展示数据库的数据是很常见的需求。其中一种常用的方式是利用JSON来获取数据库中的信息,然后在前端页面中渲染JSON数据来显示信息。 下面是使用JSON在前端页面中显示数据库信息的一些步骤: Step 1: 从后端获取JSON数据 要在前端页面中显示数据库的信息,首先需要从后端获取这些信息,通常情况下,会发送 GET 请求到后端 API…

    JavaScript 2023年6月11日
    00
  • JavaScript中Infinity(无穷数)的使用和注意事项

    让我详细为您讲解一下“JavaScript中Infinity(无穷数)的使用和注意事项”的完整攻略。 什么是Infinity Infinity是JavaScript中的一个特殊数值,表示正或负的无穷大,表示数值超出JavaScript可以表示的极限。具体地说,在JavaScript中,Infinity是一个大于任何数的数,可以表示一些过大的数字或计算出的无限…

    JavaScript 2023年5月28日
    00
  • 深入了解JavaScript中的Symbol的使用方法

    深入了解JavaScript中的Symbol的使用方法 Symbol是一种原始数据类型,它可以作为对象属性的唯一标识符。本攻略将引导您深入了解Javascript中Symbol的使用方法。 基本用法 创建Symbol对象可以使用Symbol()函数,该函数可以生成一个唯一的Symbol。 let mySymbol = Symbol(); console.lo…

    JavaScript 2023年6月10日
    00
  • 一起来学习JavaScript的BOM操作

    一起来学习JavaScript的BOM操作 什么是BOM BOM(浏览器对象模型)是指浏览器提供的一组API,用于控制浏览器窗口或标签页。我们可以使用BOM来操作浏览器窗口的大小、位置、前进后退等行为,以及判断当前浏览器类型、浏览器版本和语言。 BOM对象 BOM主要由4个对象组成: window对象:代表整个浏览器窗口,是BOM对象的最外层对象。 navi…

    JavaScript 2023年6月11日
    00
  • 一文详解最常见的六种跨域解决方案

    一文详解最常见的六种跨域解决方案 Web应用程序中,由于同源策略的限制,导致跨域问题成为Web开发过程中的一个热门话题。本文将详细讲解最常见的六种跨域解决方案,分别是: JSONP CORS postMessage document.domain iframe 代理服务器 1. JSONP JSONP 是最容易学习和使用的解决跨域问题的方式之一。JSONP …

    JavaScript 2023年6月11日
    00
  • 基于js 各种排序方法和sort方法的区别(详解)

    针对“基于js 各种排序方法和sort方法的区别(详解)”这个话题,我将从以下几个方面进行详细讲解。 一、基础排序算法 在介绍各种排序算法之前,我们先了解一下几个基础排序算法:冒泡排序、插入排序和选择排序。 1. 冒泡排序 冒泡排序的基本思路是比较相邻的元素,如果前面的元素比后面的大,则交换这两个元素。每完成一轮比较,就可以确定一个最大的元素,并且这个最大的…

    JavaScript 2023年6月11日
    00
  • JavaScript常用数组去重的方法及对比详解

    JavaScript常用数组去重的方法及对比详解 在JavaScript开发中,常常需要对数组进行去重操作。本文将详细介绍JavaScript常用的数组去重方法,并对它们进行比较和详细解释。 一、方法1:双重循环去重法 方法描述 通过双重循环遍历数组,把数组中的每个元素依次与之后的每个元素相比较,如果发现重复的元素,则把后面的元素从数组中删除。 示例代码 f…

    JavaScript 2023年5月27日
    00
  • js中火星坐标、百度坐标、WGS84坐标转换实现方法示例

    下面是关于js中火星坐标、百度坐标、WGS84坐标转换实现方法的详细攻略。 一、前言 在实际开发中,经常需要进行不同格式坐标之间的转换,其中火星坐标(GCJ02)是中国特有的加密坐标,百度坐标(BD09)则是在火星坐标基础上再进行了一次加密。而 WGS84 则是一种国际标准的坐标系。本文将详细讲解这三种坐标系的转换方法。 二、方法示例 1. GCJ02转WG…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部