ES6：了解箭头函数，这些知识你必须拿下

(a, b) => a + b

(a) => {

a = a + 1

return a

}

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ … }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错

x => ({key: x}) // 正确

---

箭头函数的基本特征

• 箭头函数this为父作用域的this，不是调用时的this

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。

• 箭头函数不能作为构造函数，不能使用new

• 箭头函数没有arguments，caller，callee

箭头函数本身没有arguments，如果箭头函数在一个 function 内部，它会将外部函数的 arguments 拿过来使用。

• 箭头函数通过 call 和 apply 调用，不会改变 this 指向，只会传入参数

let obj2 = {

a: 10,

b: function(n) {

let f = (n) => n + this.a;

return f(n);

},

c: function(n) {

let f = (n) => n + this.a;

let m = {

a: 20

};

return f.call(m,n);

}

};

console.log(obj2.b(1)); // 11

console.log(obj2.c(1)); // 11

• 箭头函数不能作为 Generator 函数，不能使用 yield 关键字

• 箭头函数没有原型属性

var a = ()=>{

return 1;

}

function b(){

return 2;

}

console.log(a.prototype); // undefined

console.log(b.prototype); // {constructor: ƒ}

• 多重箭头函数就是一个高阶函数，相当于内嵌函数

const add = x => y => y + x;

//相当于

function add(x){

return function(y){

return y + x;

};

}

---

注意事项

参数列表与返回值的语法

• 1个参数时，左边直接写参数名，0个或者多个参数时，参数列表要用()包裹起来

• 函数体只有1条语句时，右边值自动成为函数返回值，函数体不止1条语句时，函数体需要用 {} 包裹起来，并且需要手动 return

有歧义的字符

{是唯一1个有歧义的字符，所以返回对象字面量时需要用()包裹，否则会被当作块语句解析

例：

var f1 = () => {};

f1(); // 返回undefined

// 等价于

// var f1 = function() {};

var f2 = () => ({});

f2(); // 返回空对象{}

// 等价于

// var f2 = function() {return {};};

关于this

箭头函数会从外围作用域继承 this，为了避免 that = this，需要遵守：除了对象上的直接函数属性值用 function 语法外，其它函数都用箭头函数。

// 场景1

function MyType() {}

MyType.prototype.fn = function() {/定义箭头函数/}; // 箭头函数中this指向MyType类型实例

// 场景2

var obj = {};

obj.fn = function() {/定义箭头函数/}; // 箭头函数中this指向obj

function能定义一个新this，而箭头函数不能，它只能从外层借一个this。所以，需要新this出现的时候用function定义函数，想沿用外层的this时就用箭头函数

关于arguments对象

箭头函数没有arguments对象，因为标准鼓励使用默认参数、可变参数参数解构

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

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

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

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

[外链图片转存中…(img-57zQWi8G-1712100250205)]