Js 箭头函数 详细介绍（多种使用场景差异，你学会了吗？）

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

只含一条语句，{ } 和 return 可以省略

//只含一条语句，{} 与 return 可以省略

let fn1 = x => x * x;

let fn2 = (x,y) => x * y;

//完整写法

let fn1 = x => { return x * x; }

let fn2 = (x,y) => { return x * y; }

//function()写法

let fn1 = function(x){

return x * x;

}

let fn2 = function(x,y){

return x * y;

}

包含多条语句，{ } 和 return 不能省略

//包含多条语句，{} 与 return 不能省略

let fn = x => {

console.log(“x=”,x);

let y = x + x * x;

return y;

}

//function()写法

let fn = function(x){

console.log(“x=”,x);

let y = x + x * x;

return y;

}

返回对象字面量

省略写法返回对象时注意需要使用 () 将对象包裹，否则浏览器会把对象的 {} 解析为箭头函数的函数体开始和结束标记。

//需要使用()包裹对象

let obj = name => ({“name”: name});

//完整写法

let obj = name => { return {“name”: name}; }

//function写法

let obj = function(name) {

return {“name”: name};

}

this指向（重点！！！）

箭头函数没有自己的this，在箭头函数的函数体中使用this时，会取得其上下文中的this。箭头函数调用时并不会生成自身作用域下的this，它只会从自己的作用域链的上一层继承this。由于箭头函数没有自己的this指针，使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向。

（以下例子均在vue组件中的mounted()钩子执行）

不能作为构造器

let fn = () => {};

new fn() // Uncaught TypeError: fn is not a constructor

不绑定arguments

let fn1 = (x, y) => {

console.log(x, y);

console.log(“箭头函数中的arguments：”,arguments);

};

let fn2 = function (x, y) {

console.log(x, y);

console.log(“匿名函数function()中的arguments：”,arguments);

};

fn1(1, 2);

fn2(1, 2);

如下所示，箭头函数中的arguments长度为0，即未绑定arguments对象

对象的方法使用箭头函数

//对象方法中使用箭头函数

let obj1 = {

name: “leo”,

showName: () => {

console.log(“this：”, this);

console.log(“this.name：”, this.name);

},

};

//对象方法中使用匿名函数function()

let obj2 = {

name: “leo”,

showName: function () {

console.log(“this：”, this);

console.log(“this.name：”, this.name);

},

};

obj1.showName();

obj2.showName();

箭头函数中的this是当前组件实例（当前上下文对象），不是obj1，由于组件实例name未定义，因此为undefined；而匿名函数function()中的this指向调用该方法的对象，即obj2，因此name为leo。

数组方法中使用箭头函数

let arr = [“leo”]

arr.forEach(()=>{

console.log(this) //在vue中，则this表示当前组件实例

})

定时器中使用箭头函数

setTimeout(()=>{

console.log(this) //在vue中，则this为当前组件实例

},100)

setTimeout(function(){

console.log(this) //this为Window

},100)

addEventListener使用箭头函数

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-H9IzzQWK-1713317408058)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！