JavaScript中箭头函数的意义以及作用

最新推荐文章于 2025-03-12 22:04:12 发布
最新推荐文章于 2025-03-12 22:04:12 发布
阅读量2.6k 收藏 7
点赞数 1
分类专栏： JavaScript学习笔记 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42905433/article/details/105793357
版权
本文探讨JavaScript中的箭头函数，分析它与普通函数的区别，以及如何解决that和this的作用域问题。通过实例，解释箭头函数如何简化在特定场景下的代码编写，尤其是在处理作用域和对象属性访问时的优势。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于JavaScript中的箭头函数

如果你去面试前端开发人员，有一些基本问题如箭头函数的用法，它跟普通函数有什么区别，还有一个问题是什么时候用that和this，其实这两个问题是有关联的，箭头函数的出现解决了var that = this这种看起来很聪明，其实现在看很sd的写法

that和this的区别

在箭头函数没有出来之前，js中需要这么写，这里涉及到了一个作用域的问题，this的作用域是其外层的obj，什么意思,以微信小程序为例，一个page的js代码就是一个page对象，里面有data对象，还有各种方法，如果在onLoad函数里面调用data里面定义的变量，就用var i = this.data.index这种形式，但是如果在onLoad方法里面还有一个方法，如果你这么写是无法获取index的值得，因为此时的this指针的对象是onLoad方法，而不是page了，这里有两种方法获取，一种就是定义一个that来临时保存作用域为page，这样在方法中使用var i = that.data.index可以获得data里面的变量值，这只是一种写法

箭头函数作用

如上文所述，还有一种写法就是利用箭头函数，箭头函数中的作用域就是page，也就是最外层的obj，如果用箭头函数直接写var i = this.data.index可以获得data里面的变量值，我写了一个简单的函数来解释三者之间的关系。


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


                



	

		

			

				
					
如何理解JavaScript多个连续箭头函数书写方式

				
			

			

				

					Einstellung的博客
				

				

					11-15
					
					2473
					
				

			

		

		

			
				
导言： 本菜鸡在学习Vue编程的时候，看到有大佬写的代码用了多个连续箭头函数，完全不能理解是什么意思。经过多方调查和思考才初步理解。本篇文章记录一下自己学习和理解的心得。


有多个箭头函数的代码如何执行
我拿一个很普通的函数来举例子，比如下面代码：
function sum (a, b) {
  return a + b;
}

或者是这样：
let sum = function (a, b) { a + b } 

如果要写成箭头函数可以写成这样：
let sum = (a, b) => a ..

			
		

	



                

            
              



	

		

			

				
					
箭头函数的意义和函数的二义性

				
			

			

				

					白雾茫茫丶
				

				

					05-29
					
					869
					
				

			

		

		

			
				
这篇文章介绍了箭头函数的特点以及与普通函数的区别。它指出了箭头函数没有this、arguments对象和prototype原型的特点，因此不能作为构造函数使用。文章还解释了函数的二义性问题，即函数可以有多种调用方式，这在JS设计上存在缺陷。最后，文章指出箭头函数不再依赖面向对象的概念，因此没有this和原型的概念。

			
		

	



              


  
              

                


	

		

			

				
					
JavaScript的箭头函数是干什么的？底层原理是什么？

				
			

			

				

					长风破浪会有时的博客
				

				

					06-04
					
					437
					
				

			

		

		

			
				
没有自己的this和arguments：箭头函数没有自己的this值，它继承自外围作用域的this值。这意味着在箭头函数内部，this的值由函数定义的位置决定，而不是函数调用的方式。闭包的特性：由于箭头函数继承了外围作用域的this值，它可以轻松地访问外围作用域的变量和函数，形成闭包。简洁的语法：箭头函数使用箭头（=>）来定义函数，可以省略function关键字和大括号，减少了冗余的代码，使函数表达更加简洁。适用于简单的回调函数：箭头函数特别适合用作回调函数，可以更清晰地表达代码意图，减少冗余的语法。

			
		

	





	

		

			

				
					
js中箭头函数的作用

				
			

			

				

					发光如星
				

				

					05-19
					
					1145
					
				

			

		

		

			
				
原文地址：https://www.cnblogs.com/hailun/p/6279029.html
ES6标准新增了一种新的函数：Arrow Function（箭头函数）
x => x * x

相当于：
function (x) {
    return x * x;
}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：
x => {
 

			
		

	



		

			
		



	

		

			

				
					
箭头函数的作用及应用场景

					
最新发布

				
			

			

				

					m0_61975298的博客
				

				

					03-12
					
					223
					
				

			

		

		

			
				
2. **需要`arguments`对象时**：箭头函数没有自己的`arguments`，需改用剩余参数（Rest Parameters）。- 箭头函数没有自己的`this`，而是继承外层作用域的`this`，避免了传统函数因`this`指向变化导致的错误。**不适用场景**：需要动态`this`、构造函数、依赖`arguments`对象的方法。**场景**：数组方法（如`map`、`filter`、`reduce`）的回调。**适用场景**：短小回调、需要固定`this`指向、函数式编程。

			
		

	





	

		

			

				
					
js中（箭头函数）的作用

				
			

			

				

					dxyzhbb的博客
				

				

					06-03
					
					1321
					
				

			

		

		

			
				
ES6标准新增了一种新的函数：Arrow Function（箭头函数）


x => x * x

相当于：


function (x) {
    return x * x;
}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：


x => {
    if (x > 0) {
        return x * x;


			
		

	





	

		

			

				
					
JavaScript 语法糖 —— 箭头函数

				
			

			

				

					Dablelv 的博客专栏。
				

				

					02-04
					
					4157
					
				

			

		

		

			
				
上面代码中，setTimeout() 的参数是一个箭头函数，这个箭头函数的定义生效是在 foo 函数生成时，而它的真正执行要等到 100 毫秒后。当直接调用的时候，执行 call 方法，执行函数体。上面代码中，obj.b() 方法是一个箭头函数，本意是想输出对象 obj 属性 i 的值，结果由于 this 指向全局对象 Window，输出了错误的结果。另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。

			
		

	





	

		

			

				
					
JavaScript 面试题（十一）箭头函数有什么作用（和普通函数的区别）？简要描述一下ES6中的箭头函数及其使用场景。

				
			

			

				

					qq_42684926的博客
				

				

					08-26
					
					1996
					
				

			

		

		

			
				
箭头函数表达式的语法比函数表达式更简洁。并且没有自己的this。箭头函数更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
箭头函数的作用：
1.箭头函数的语法比函数表达式更简洁。
2.箭头函数可以解决this指向问题。箭头函数不会创建自己的this，它只会从自己的作用域链向上一层继承this。
箭头函数的使用场景：
1.简单的函数表达式，内部没有this引用，没有递归，事件绑定，解绑定。
2.需要调用this，且this指向和上一层作用域链保持一致时。如保证指向vue实例对象。

...

			
		

	





	

		

			

				
					
箭头函数，匿名函数，为什么用？怎么用？有什么不一样？使用场景是什么？

					
热门推荐

				
			

			

				

					githubcurry
				

				

					05-28
					
					1万+
					
				

			

		

		

			
				
箭头函数的使用和一些特性
JS中的箭头函数用=>来标识。箭头函数有两个主要的优点:

更简短的函数；
更直观的作用域和this的绑定(不绑定this)

因为这些优点，箭头函数比起其他形式的函数声明更受欢迎。比如，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。
1.　即它允许使用箭头（=>）来定义函数。 如
　　var f = v =>v;

这个箭头函数就等同于:
　　var f = function (v) {
　　

			
		

	





	

		

			

				
					
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

				
			

			

				

					10-15
				

			

		

		

			
				
在JavaScript编程中，函数是核心组成部分，而箭头函数和常规函数是两种常见的函数定义方式。它们之间存在显著的区别，这些差异在实际开发中具有重要的意义。以下是五个关键区别以及相关实例分析：  1. **this值的...

			
		

	





	

		

			

				
					
javascript回调函数详解

				
			

			

				

					10-18
				

			

		

		

			
				
ES6 引入的箭头函数使得处理 this 的问题变得简单，因为箭头函数不会创建自己的 this，它会捕获其所在上下文的 this 值。  尽管回调函数有很多优点，但大量使用它们也会带来一些问题。比如，大量嵌套的回调函数会...

			
		

	





	

		

			

				
					
JS中=＞箭头函数作用（以及存在的bug）

				
			

			

				

					ksx2333的博客
				

				

					04-07
					
					469
					
				

			

		

		

			
				
JS中=＞箭头函数作用（以及存在的bug）

			
		

	





	

		

			

				
					
箭头函数存在的意义（消除函数的二义性）

				
			

			

				

					qq_873366938的博客
				

				

					03-07
					
					490
					
				

			

		

		

			
				
箭头函数是ES6引入的一种快速定义函数的方式，本质上来说箭头还是本身就是一个匿名函数。普通函数箭头函数。

			
		

	





	

		

			

				
					
箭头函数的特点/作用

				
			

			

				

					lan128lan的博客
				

				

					04-09
					
					7401
					
				

			

		

		

			
				
一、箭头函数的特点

箭头函数是匿名函数

1. 箭头函数使表达更加简洁，隐式返回值


const isEven = n => n % 2 === 0;
const square = n => n * n;

箭头函数的一个用处是简化回调函数，如下：


// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数...

			
		

	





	

		

			

				
					
箭头函数的特点和作用

				
			

			

				

					weixin_58691935的博客
				

				

					08-15
					
					385
					
				

			

		

		

			
				
箭头函数让语法形式更简洁，但它的出现主要是为了解决函数中的this指向问题，特别是在匿名函数、setTimeout和setInterval等场景中，this的指向常常难以控制，导致代码难以维护和理解。箭头函数通过继承最近的父作用域的this值，简化了this的使用。‌

			
		

	





	

		

			

				
					
JS中箭头函数的特点

				
			

			

				

					qq_62528974的博客
				

				

					06-24
					
					186
					
				

			

		

		

			
				
值，并且适合于处理简单的函数逻辑。然而，由于其特殊的行为，箭头函数并不适用于所有的情况，需要根据实际需求来选择使用。JavaScript 中的箭头函数是 ES6 引入的一种新的函数声明方式。始终指向定义函数时所处的上下文，而不是调用时的上下文。如果需要访问函数的参数，可以使用剩余参数语法。属性：由于箭头函数不能用作构造函数，所以它们也没有。总结:箭头函数提供了更简洁的语法、继承外层函数的。简洁的语法：箭头函数的语法非常简洁，可以通过。对象：箭头函数也没有自己的。：箭头函数中没有自己的。

			
		

	





	

		

			

				
					
js箭头函数的特点

				
			

			

				

					qq_71191794的博客
				

				

					06-23
					
					435
					
				

			

		

		

			
				
箭头函数没有自己的this ，没有arguments，没有prototype属性

			
		

	





	

		

			

				
					
Vue里面的箭头函数 => 的作用

				
			

			

				

					从入门到放弃的博客
				

				

					05-25
					
					4765
					
				

			

		

		

			
				
转载自：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

语法节...

			
		

	





	

		

			

				
					
JavaScript的箭头函数到底是干什么的？使用场景是什么？底层原理是什么？

				
			

			

				

					长风破浪会有时的博客
				

				

					11-10
					
					1077
					
				

			

		

		

			
				
箭头函数是 ES6 引入的一种新的函数定义方式，具有语法简洁、词法this绑定和隐式返回的特点。箭头函数在回调函数、事件处理、立即执行函数和对象方法等场景中非常有用。理解箭头函数的底层原理和使用场景，可以帮助开发者编写更简洁、更可靠的代码。

			
		

	





	

		

			

				
					
深入理解ES6：箭头函数与块级作用域

				
			

			

				

					
				

			

		

		

			
				
"这篇ES6学习笔记主要涵盖了ES6中三种变量声明的异同、let与const的应用、箭头函数的使用方式、this的指向、默认参数以及箭头函数不适用于某些特定场景的情况。"  一、var、let、const异同 在ES6中，变量声明有了新...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值