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日

相关文章

  • javascript引用类型之时间Date和数组Array

    接下来我会给你详细讲解JavaScript引用类型之时间Date和数组Array的完整攻略。 JavaScript引用类型之时间Date 在JavaScript中,时间是以Date对象的形式存在的。我们可以使用Date对象表示一个日期,也可以使用它来执行与日期相关的操作。 创建Date对象 创建一个Date对象的方式有以下三种: 使用new Date()构造…

    JavaScript 2023年5月27日
    00
  • js 深拷贝函数

    当我们需要对一个 JavaScript 对象进行复制或者赋值操作时,通常会遇到一个问题:当我们仅仅对该对象进行简单的赋值时,实际上我们并没有将其作为一个全新的对象重新创建一份,而是在实际上仅仅对原有对象进行了一份引用。由此,如果我们修改了其中一个引用,那么其他的引用也将受到影响。因此,为了避免这种问题,我们需要使用深拷贝函数来创建一个全新的对象。本文将会提供…

    JavaScript 2023年5月27日
    00
  • 让我们一起来学习一下什么是javascript的闭包

    下面就来详细讲解一下“让我们一起来学习一下什么是javascript的闭包”的攻略。 什么是闭包? 闭包其实指的是一种能够访问外部函数作用域中变量的函数,也就是说,在一个函数内部定义的函数能够访问到这个函数的作用域中的变量。同时,这个内部函数也可以在外部被引用和调用。这里可以理解为函数自身以及函数被调用时所处的上下文环境。 闭包的实现原理 在JavaScri…

    JavaScript 2023年6月10日
    00
  • JS.getTextContent(element,preformatted)使用介绍

    JS.getTextContent(element,preformatted)使用介绍 简介 JS.getTextContent(element,preformatted) 是一个JS函数,用于获取元素中的文本内容。该函数常用于网页数据爬取、文本处理等场景。 该函数包含两个参数,分别为 element 和 preformatted。其中,element 是需…

    JavaScript 2023年6月10日
    00
  • JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

    判断浏览器是否为IE浏览器的方法有很多种,包括通过检测UserAgent(用户代理字符串)、检测浏览器特性、检测IE浏览器独有的属性等方式。以下是一些方法的示例说明。 方法一:检测UserAgent中是否包含”MSIE”或”Trident” function isIE() { const ua = window.navigator.userAgent; co…

    JavaScript 2023年6月10日
    00
  • JS 自动完成 AutoComplete(Ajax 查询)

    下面我将详细讲解 JS 自动完成 AutoComplete(Ajax 查询) 的完整攻略。 什么是 JS 自动完成 AutoComplete? JS 自动完成 AutoComplete 是前端开发中常用的一种交互技术,它可以实现输入框中的关键字联想提示和自动完成。通常情况下,我们通过 Ajax 查询服务器获取关键字列表,然后将返回的结果展示在输入框下面,用户…

    JavaScript 2023年6月11日
    00
  • Javascript里的两种使用正则的方法

    当我们需要在JavaScript中进行字符串匹配、替换或者提取操作时,常常需要用到正则表达式。在JavaScript中,我们可以使用两种不同的方法来使用正则表达式。 方法一:RegExp对象的方法 RegExp对象是JavaScript内置的正则表达式对象,我们可以使用它的方法来处理字符串。 1. 创建RegExp对象 我们可以使用RegExp对象的构造函数…

    JavaScript 2023年6月10日
    00
  • JavaScript中反正弦函数Math.asin()的使用简介

    Math.asin()函数是一个JavaScript中的反正弦函数,用于计算一个数(参数)的反正弦值并返回结果。其函数定义如下: Math.asin(x) 其中x为一个介于-1与1之间的数值,表示要计算其反正弦值的数。函数返回值的单位为弧度,且其取值范围为[-π/2,π/2]。 下面是两个示例,说明Math.asin()函数的使用方法: 示例一:计算一个数字…

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