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

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 = () => {};

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)

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。