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

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

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);

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。