Js 箭头函数 详细介绍（多种使用场景差异，你学会了吗，前端学习路线指南

箭头函数是在ES6中添加的一种规范，简化了匿名函数定义的写法。

基本格式

完整写法

let fn = (x,y) => {

return x + y;

}

//function()写法

let fn = function(x,y) {

return x + y;

}

只有1个参数时，可以省略 ()

//只有1个参数时，可以省略 ()

let fn = x => {

return x + x;

}

//function()写法

let fn = function(x) {

return x + x;

}

没有参数或有两个以上参数时不能省略 ()

let fn1 = () => {

console.log(“没有参数，()不能省略”);

}

let fn2 = (x,y) => {

console.log(“两个或以上参数，()不能省略”);

return x + y;

}

//function()写法

let fn1 = function() {

console.log(“你瞧”);

}

let fn2 = function(x,y) {

return x + y;

}

只含一条语句，{ } 和 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 = () => {};

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

jf9-1710883062944)]
[外链图片转存中…(img-Eym0IqVa-1710883062945)]
[外链图片转存中…(img-7xLxTsIt-1710883062945)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-9ylDvC9o-1710883062946)]