最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

箭头函数详解

来源:博客园

定义箭头函数

ES6允许使用箭头 =>定义函数

let v = 100// 箭头函数let f = a => v;// 等同于let f2 = function (a){ return v}// 等同于let f3 = (a) => { return v }console.log(f());  // 100console.log(f2()); // 100console.log(f3()); // 100

箭头函数参数

箭头函数中,使用圆括号()代表参数的部分


(相关资料图)

// 无参数let a1 = () => 5;// 等同于let a2 = function () {return 5}
// 有参数let a3 = (num1,num2) => num1 + num2// 等同于let a4 = function (num1,num2) { return num1 + num2}

如果箭头函数中的代码块为一句话,可以省略大括号。如果箭头函数中的代码块多于一句,需要使用大括号括起来,使用return可以返回数据。

大括号被解释为代码块,如果箭头函数返回的是一个对象,就必须在对象外面加上括号,否则报错

// 错误写法let b1 = id => { id : id , name : "东方不败"}  // 报错
// 正确写法let id = 1let b2 = id => ({id,name:"东方不败"})console.log(b2()); // id : undefined ,name :"东方不败"

上面这个代码块中,箭头函数参数为id,调用b2函数时未传参数,所以idundefined,参数部分其实是定义了一个let id;id并没有赋值,所以是undefined;在普通函数中,函数没有参数且函数内部没有定义变量,内部的变量会向上寻找变量,所以这里内部returnid指向的是外层全局变量id

let id = 1function b3(){    return {id,name:"东方求败"}    } console.log(b3());  // id : 1 ,name :"东方不败"

如果函数有参数,但是调用函数时未传参,那么该参数就是undefined

// 这里有一个参数,但是调用的时候没有传参,所以id为undefinedfunction b4(id){    return {id,name:"东方求败"} }console.log(b4());  // id : undefined ,name :"东方不败"

函数参数部分其实是有一个作用域的,参数部分的id其实是定义了一个let id,下面这个例子就能说明:

// 报错let id = 1function b5(id = id){    return {id,name:"东方求败"}}b5()

这里的id其实就是let id = id,id为一个未声明的变量,赋值id = id,报错

// 调用函数不携带参数获取外层全局变量的正确方法let id = 1function b5(val = id){    return {val,name:"东方求败"}  }console.log(b5());  // id : 1 ,name :"东方不败"

箭头函数返回值

如果箭头函数只有一句话且没有返回值,可以在内容前面加void,不需要写大括号,直接写内容即可

let fooEmpty = () => void "无返回值";console.log("无:",fooEmpty());   // 无: undefined

箭头函数有返回值

let fooHave = () => "有返回值";console.log("有:",fooHave());  // 有: 有返回值

箭头函数大括号

let foo = () => {a : 1}console.log(foo());  // undefined

上面例子是一种特殊情况,虽然可以运行,但的到的结果是错误的,因为大括号在箭头函数中被认为是代码块,这里的箭头函数并不是return了一个{a:1}的对象,而是执行了一个表达式 a : 1,表达式执行完成后结束运行,没有返回值。正常的写法如下:

let foo2 = () => { return {a : 1} }console.log(foo2());  // {a : 1}

箭头函数解构赋值

在参数部分传入对象,解构赋值

let foo3val = {id:1, name:"孙悟空"}let foo3 = ({id,name}) => console.log(`id:${id},名称:${name}`);foo3(foo3val)  // id:1,名称:孙悟空

有了解构赋值后,箭头函数可以使表达更简洁、更加直观,例如这里封装一个简单的工具函数,一行代码完成求奇偶的工具函数封装

const isEven = n => n % 2 === 0console.log(isEven(2));  // trueconsole.log(isEven(3));  // false

简化回调函数

普通函数写法

let fil = [1,2,3].filter(function(x){   return x == 2})console.log(fil); // [2]

箭头函数写法,一行搞定

let fil2 = [1,2,3].filter(el=> el == 2 )console.log(fil2); // [2]

箭头函数的注意点

1、箭头函数没有this对象2、不可以当做构造函数,也就是说,不可以对箭头函数使用new命令,否则报错3、不能使用arguments对象,该对象在函数体内不存在4、不能使用yield命令,因为箭头函数不能用作Generator函数

箭头函数导致this总是指向函数定义生效时所在的对象

箭头函数this指向

在箭头函数的使用注意点中,最需要注意的就是this指向问题,这里举一个例子说明箭头函数this指向的问题

function arrows(){    console.log("name:",this.name);     // 中国工艺美术史        setTimeout(()=>{       console.log("name:", this.name);  // 中国工艺美术史    },100)    setTimeout(function(){        console.log("name:", this.name); // 艺术概论    },100) }       var name = "艺术概论"   arrows.call({name : "中国工艺美术史"})  // name: 中国工艺美术史

call函数:第一个参数表示:想让this指向的对象(obj)第二个参数表示:传进去的实参如果call的第一个参数未传值,或者传值为null,那么arrowsthis指向为window这里传入第一个传参数,this指向obj对象

第一个定时器setTimeout使用了箭头函数,在普通函数中,setTimeout指向的是window,但这里setTimeout使用了箭头函数,导致定时器指向的是调用函数定义生效时所在的对象,所以这里打印的是 中国工艺美术史,而不是最外层全局变量 艺术概论。第二个定时器setTimeout没有使用箭头函数,即使使用call()方法,在函数内部的定时器还是指向window

箭头函数没有自己的this,导致内部的this就是外层代码块的this。正是因为没有this,所以也就不能用作构造函数。

箭头函数里没有自己的this,而是引用外层的this。下面是 Babel转箭头函数产生的 ES5代码,就能清楚地说明this的指向。

// ES6function foo() {    setTimeout(() => {        console.log("id:", this.id);    }, 100);}// ES5function foo() {    var _this = this;        setTimeout(function () {        console.log("id:", _this.id);    }, 100);} 

箭头函数不适用的场合

1:对象内定义箭头函数

let cat = {    level : 9,    jumps : ()=> {      this.level    }}

在这个例子中,cat.jumps()是一个箭头函数,这是错误的。如果cat.jumps()是一个普通函数, 该方法内部的this指向cat。如果调用cat.jumps()是一个箭头函数时,this指向全局对象。因为对象不构成单独的作用域,导致jumps箭头函数定义时的作用域是全局作用域。

2:需要动态this的时候,不应该使用箭头函数

let button = document.getElementById("news")button.addEventListener("click",()=>{    this.classList.toggle("on")})

上面代码运行时,点击按钮报错,因为button监听函数是一个箭头函数,导致内部的this是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。

另外,如果函数体很复杂,有许多行,或者函数内部有大量的读写操作,不单纯是为了计算值,这时也不应该使用箭头函数,而是要使用普通函数,这样可以提高代码可读性。

案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

关键词: 东方不败 工艺美术 东方求败