button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...

相信很多小伙伴自从知道了ES6的箭头函数以后，都疯狂得使用，渐渐的淡忘了普通函数的使用。不过确实，箭头函数看起来比较简洁，用起来也舒服，不过它的出现是为了解决某一部分问题的，并不是用来替代普通函数的，所以我们不能在每一个地方都使用箭头函数。

箭头函数的基本使用

我们先来看看箭头函数是如何使用的吧

let fn1 = function () {  console.log('我是普通函数')}let fn2 = () => {  console.log('我是箭头函数')}fn1()fn2()//我是普通函数//我是箭头函数

在这个例子中，fn1与fn2是完全等价的，这就是箭头函数的基本使用。

有没有感觉箭头函数特别的简洁？因为他只有几个简单的符号，其实，这并不是他最简洁的时候。我们来看一下给函数传参的例子

let fn1 = function(data) {  console.log(data)}let fn2 = (data) => {  console.log(data)}

如果函数只需要传一个参数，我们可以去掉箭头函数的小括号；若传入多个参数，小括号还是要加上的哦

let fn2 = data => {  console.log(data)}

其实这个例子中，console.log(data)两边的大括号也是可以去掉的。因为在箭头函数中如果函数的代码部分只有一句代码，是可以省去大括号的

let fn2 = data => console.log(data)

当然这还不是最简单的，当我们函数的代码部分只有一句代码，并且是return语句的话，我们可以省略大括号，并且省略return

let fn2 = data => data  //相当于let fn2 = data => return data

但是，如果return的是一个对象，就尽量不要省略大括号和return了，因为大括号会被解析为代码块。我们可以在对象两边加一个小括号，就可以起到return回一个对象的作用了。

//报错let fn2 = data => {ret: data}  //本意是想return {ret: data}//不报错let fn2 = data => ({ret: data})  //等价于 let fn2 = data => {return {ret: data}}//报错let fn2 = data => return {ret: data}//不报错let fn2 = data => {return {ret: data}}

箭头函数的作用

首先ES6新增了箭头函数这个东西，一定是为了解决某个问题。我们先来看看原先没有箭头函数的一个例子

let obj = {    name: '张三',    fn: function () {        return function() {            console.log(this.name)  //本意是想打印 '张三'        }    }}obj.fn()()//打印结果：undefined

在这个例子中，我们本来是想打印 张三的，但最后却是undefined，这是为什么呢？

普通函数中的this的指向是运行时绑定的，就像这个例子中的，先调用了obj.fn，返回了一个嵌套的匿名函数，此时该匿名函数处于全局中，也就是不在obj这个对象内了，因为普通函数的this是运行时绑定的，所以此时的this指向的是全局，如果在浏览器中，就是window对象。

那么我们的本意是什么呢？希望这个this指向的是obj中的name，那么我们可以这么做

let obj = {    name: '张三',    fn: function () {      let _this = this  //在定义是将this赋值给一个变量_this        return function() {            console.log(_this.name)  //调用被赋值的_this去获取obj里的name        }    }}obj.fn()()//打印结果： 张三

此时我们就可以在嵌套函数中，获取到obj中的name值了，因为在定义时，就把正确的this保存在一个变量中，并给嵌套函数使用。

那么当箭头函数就可以解决这种情况。普通函数的this是运行时绑定，箭头函数的this是定义时绑定。我们将上面例子中的嵌套函数用箭头函数代替

let obj = {    name: '张三',    fn: function () {      //此处有个this，该this指向obj，并且被箭头函数所绑定        return () => {            console.log(this.name)  //这里的this是向上寻找，找到function() {}内有一个this，并与之绑定，而这个this指向的就是obj        }    }}obj.fn()()//打印结果： 张三

这样就轻松地解决了普通函数this随着运行环境的改变而改变的问题了。

箭头函数的注意点

箭头函数内没有this，如果在箭头函数内使用this，会自动往上寻找，直到找到this才停止寻找。
箭头函数的this是定义时绑定，而不是运行时绑定
箭头函数内没有arguments对象
箭头函数不能作为构造函数，原因也是因为它内部没有自己的this

我们来用几个例子验证这几个注意点

(1)例子1

function fn() {  //此处有个this，指向全局对象，被箭头函数所绑定  return () => {    console.log(this.name)    return () => {      console.log(this.name)    }  }}//给全局对象设置一个属性name，值为 李四window.name = '李四'//调用fn内的第一个箭头函数fn()()             //返回 '李四'//调用fn内第二个箭头函数fn()()()           //返回 '李四'

在这个例子中，函数fn内部有两个嵌套的箭头函数。

第一个箭头函数内调用this，因为箭头函数内没有this，所以向上找，发现函数fn有一个this，于是就与该this绑定。因为该this指向window，所以console.log(this.name)返回了李四

第二个箭头函数内调用this，因为箭头函数内没有this，所以向上找，因为上一级还是箭头函数，仍然没有this，所以继续向上找，同样发现了函数fn中有一个this指向window，与之绑定，最后也返回了李四

(2)例子2

let fn = function (data1, data2) {    return (data3, data4) => {        console.log(arguments)    }}fn(1, 2)(3, 4)//返回 [Arguments] {'0': 1, '1': 2}

函数中有一个arguments对象，它的作用是返回一个函数传入的实参的。在这个例子中，我们在箭头函数中打印的arguments，最后返回的却是普通函数传入的实参内容，说明箭头函数内是没有arguments对象的。

(3)例子3

我们来看看平时申明构造函数是如何做的

function My_constructor() {  this.name = '张三'  this.age = 18}

然后再通过关键字new来调用这个构造函数，创建一个新的对象

let new_obj = new My_constructor()

这里简单的给大家说一下，通过new调用构造函数，其实就是先创建一个新的空对象，然后将构造函数内的属性或方法都赋值给这个空对象，再将this指向这个新创建的对象。

所以从这个过程中我们可以看出，需要函数内部有一个this，但是箭头函数没有自己的this啊，所以箭头函数不能作为构造函数。

不宜使用箭头函数的场景

在第三部分介绍了箭头函数的注意点以后，我们可以看到，有些时候使用箭头函数是不合适的。

(1)定义类的方法

let obj = {  name: 'Lpyexplore',  get_name: () => {    console.log(this.name)  }}obj.get_name()//返回  undefined

我们可以看到在定义类的方法时，我们使用了箭头函数，准备通过this.name获取obj中的name，最后返回了undefined。

我们来看一下为何返回undefined，首先obj.get_name是一个箭头函数，内部没有自己的this，所以会向上找，找到了obj，但对象不构成单独的作用域，所以最后就与全局绑定在一起了，但在全局没有定义一个名为name的变量，所以最后this.name返回的就是undefined。

(2)绑定动态this

例如我们给一个按钮button绑定一个点击事件，要求点击按钮以后，获取到被点击的这个按钮，进行一些相关操作。这里我们就通过this来获取被点击的按钮对象

<html><head>    <meta charset="UTF-8">    <title>title>head><body><button class="btn">按钮button><script>    let btn = document.querySelector('.btn')    btn.onclick = function () {      console.log(this)    }script>body>html>

这里我们给按钮绑定点击事件，使用的是普通函数。我们来看一下，当我们点击了按钮，会打印什么

我们可以看到，如愿以偿地获取到了被点击的按钮。那么如果使用箭头函数作为点击事件的处理函数呢？

//省略重复代码btn.onclick = () => {  console.log(this)}

这时我们再来点击一下按钮，看看会打印什么

我们可以看到，打印的是全局的window对象，因为箭头函数内没有自己的this，所以往上找，就直接找到了全局的window对象了。所以像这种情况，是不建议使用箭头函数的。

(3)代码复杂

我们都知道，箭头函数看起来很简洁，写起来也非常的方便，但我们有没有发现，使用了箭头函数以后，代码的可读性就变差了。例如这样一个例子

let fn = data => data

你第一眼看到这句代码的时候，你能瞬间读懂这句代码的意思吗？我想你肯定会多思考几秒，那如果换成普通函数呢？是不是就能一眼读懂代码的意思了

let fn = function (data) {  return data}

说实话，普通函数虽然写法比箭头函数麻烦一点，但是可读性还是很强的。设想一下，如果有一大堆的代码，涉及到很多很多的函数，甚至有很多嵌套函数，如果我们都使用箭头函数，那么这代码阅读起来是不是就非常的困难呢。

总而言之，如果遇到频繁地使用函数，并且代码特别复杂，我们可以在功能 、代码简洁 、代码可读性这三者之间进行权衡，并有选择性地使用箭头函数。

结束语

写完这一篇关于箭头函数的文章，我对箭头函数又有了更深刻的印象。同时也告诫自己，不要平时为了方便或者为了装高手，无脑地使用箭头函数，有时可能用法不当造成了一些bug，然后花费大量的时间去解决。

希望这篇文章能对你们有所帮助，我是Lpyexplore，创作不易，喜欢的加个关注，点个收藏，给个赞~

关注我，不迷路~

我是Lpyexplore，带你在python爬虫的过程中学习前端

完是

完

图文：CSDN

作者：Lpyexplore

扫码关注我

button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...相关推荐

es6语法箭头函数
一.语法形式: (参数1, 参数2, -, 参数N) => { 函数声明 }(参数1, 参数2, -, 参数N) => 表达式(单一) // 相当于:(参数1, 参数2, -, 参数N) ...
ES6语法---箭头函数/关于this指向
this指向问题: ES5:var obj = {x:1,func:function(){console.log(this.x);},test:function(){//定时器为异步setTimeou ...
ES6中箭头函数解释
箭头函数任何可以书写匿名函数的位置,都可以书写箭头函数箭头函数将会绑定this为函数书写位置的this值模块化(nodejs带来的模块化) 没有模块化的世界:全局变量污染,难以管理常见的模块化 ...
criteria函数_干货铺 | 二级MS office考试中一些常考函数（2）
同步文章:二级MS office考试中一些常考函数(2) 1.AVERAGE(Number1,Number2,-)函数--计算平均值函数: 参数解释:Number1,number2,...是要计算平均 ...
python多个函数_请教：一个类中可以定义多个同名函数?
python认为每个文件是一个module 每个函数的的作用域就是本module 但是module可以被import import进来的module相当于在本module内谢谢,你说得对,昨晚太晚了 ...
python filter函数_第九篇：Python中lambda、filter和map函数
修修心养养性世无常贵,事无常师,靠人不如靠己. 大纲函数类型定义及特性 lambda函数定义及使用 filter函数定义及使用 map函数定义及使用引入函数类型概念函数类型定义:python中 ...
如何查看python有哪些内置函数_如何查看 Python 全部内置变量和内置函数？
查看python内置函数的方法:1.打开Python IDLE编辑器:2.输入" dir(__builtins__)"命令,按下回车键(Enter)得到Python全部内置变量和函 ...
[译]深入ES6之箭头函数
原作者:江凌箭头一族缺少的家庭成员在JavaScript出现以来,箭头(Arrow)就一直是其语法的一部分.一般来说,JavaScript教程的第一篇就会讲如何在HTML中插入箭头括号来作为注释, ...
JavaScript中的函数中arguments、参数、默认值和表达式以及箭头函数
箭头函数: 箭头函数虽然语法简洁.但也有很多场合不适用.箭头函数不能使用arguments.super和new.target,也不能用作构造函数.此外箭头函数也没有prototype属性. 1. 函数 ...

button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...

button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...相关推荐

最新文章

热门文章