箭头函数以及箭头函数的this关键字

最新推荐文章于 2025-04-06 00:23:19 发布

ljlttkx

最新推荐文章于 2025-04-06 00:23:19 发布

阅读量285

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_23260455/article/details/119871341

版权

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了ES6中的箭头函数，包括其如何简化函数定义，以及在函数体中如何处理this关键字。箭头函数不绑定自己的this，而是继承上下文的this值，这与传统函数的this行为有所不同。通过示例代码，展示了箭头函数在参数和返回值简化方面的用法，并通过实例解释了箭头函数的this指向特性。

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

//箭头函数是用来简化函数定义语法的
		 const fn = () => {
		 	console.log(123)
		 }
	    fn();

		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		function sum (n1, n2){
		      return n1 + n2;
		 }
		 
		 const sum = (n1, n2) => n1 + n2;

		// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		function fn (v){
		      return v;
		 }
		const fn = v => v

在传统的函数当中，是谁调用函数的，那么函数内部的this关键字就指向谁。但是在箭头函数当中就不拥有这个特性。
因为箭头函数不绑定this，箭头函数没有自己的this关键字，如果在箭头函数中使用this， this关键字将指向箭头函数定义位置中的this

		
		
		function fn () {
			console.log("1", this);
            return () => {
                console.log("箭头函数", this)
            }
		}

		const obj = {name: 'zhangsan'};

		const resFn = fn.call(obj);

		resFn();

输出：
在这里插入图片描述
着重看下：ES6箭头函数的this指向详解