ES6 箭头函数的使用

作者：bo

2022 年 7 月 23 日
本文字数：1053 字
阅读完需：约 3 分钟

前言

箭头函数是 ES6 当中对函数的一种全新的表示方法，看起来也非常简洁，我在之前也经常使用，但是没有整体的学习，今天突发奇想，决定进一步的学习一下箭头函数

起步

我们以前在写函数的时候会这样写

function fun() {    return 100;}
console.log(fun());     //100

复制代码

也会这样写

const fun = function() {    return 100;}
console.log(fun());     //100

复制代码

在 ES6 中，我们将代码简化

const fun1 = () => {    return 100;}console.log(fun1());     //100

复制代码

再次简化

const fun2 = x => x;console.log(fun2(100));     //100

复制代码

()中定义参数，如果只有一个参数，()可以省略
{}中写函数体，如果函数体中只有返回值，可以不写 return

箭头函数与普通函数的区别

举个例子

let obj = {    name: '小明',    age: 3,    sayName() {        setTimeout(function() {            console.log("我是" + this.name);        }, 500)    }}obj.sayName();

复制代码

这串代码执行结束后，打印的是 我是undefined ，那么为什么“小明”不能被打印出来呢？

let obj = {    name: '小明',    age: 3,    sayName() {        setTimeout(function() {            console.log(this);        }, 500)    }}obj.sayName();

复制代码

所以我们打印一下 this，打印的结果是 window 对象，所以这个 this 指向的是 window 对象，也就是全局对象。因为这里的代码是 sayName 函数里面套了一个函数，内函数里面的 this 指向不到小明，但是 sayName 函数的 this 可以指到小明，解决的办法就是在 sayName 函数里定义一个变量，值为 this，内函数再通过变量指向小明，代码如下

let obj = {    name: '小明',    age: 3,    sayName() {        let self = this;        setTimeout(function() {            console.log("我是" + self.name);        }, 500)    }}obj.sayName();

复制代码

这样就能够打印出我是小明了

使用箭头函数

看下面这串使用了箭头函数的代码

let obj = {    name: '小明',    age: 3,    sayName() {        setTimeout(() => {            console.log("我是" + this.name);        }, 500)    }}obj.sayName();

复制代码

打印的结果就是 我是小明

我想你们和我都有同样的一个疑惑：为什么使用箭头函数就可以实现了呢？

箭头函数与普通函数的区别

this 指向不同
普通函数：谁调用这个函数，this指向谁
箭头函数：在哪里定义函数，this指向谁

片尾

嘻嘻嘻，小白暂时用到的也就这么多（其实我就是会这么多），后续我会继续更新这篇博客的

发布于: 3 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/31147a6074075a661eab1468b】。文章转载请联系作者。

bo

关注

还未添加个人签名 2022.07.11 加入

还未添加个人简介

发布

暂无评论

创作场景

ES6 箭头函数的使用

前言

起步

箭头函数与普通函数的区别

举个例子

使用箭头函数

箭头函数与普通函数的区别

片尾

bo

评论