es6语法箭头函数

周星智

已于 2022-06-14 12:35:04 修改

阅读量374

点赞数 1

分类专栏： es6语法文章标签： javascript 前端开发语言

于 2022-06-14 12:23:57 首次发布

本文链接：https://blog.csdn.net/m0_60508194/article/details/125272752

版权

es6语法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、语法形式：

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

只有一个参数时，圆括号可加可不加：

(单一参数) => {函数声明}
单一参数 => {函数声明}

但没有参数的函数应该写成一对圆括号:

() => {函数声明}

实例：

// ES5
var x = function(x, y) {
     return x * y;
}
// ES6
const x = (x, y) => x * y; 
//如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

二、箭头函数的特性

this特性：

1、箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this，它指向的永远是自己的父作用域；
（也可以这样理解：当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。）
2、箭头函数的外层函数中的this就是箭头函数中的this,当外层函数中的this发生改变时，箭头函数中的this也会发生改变
2、箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下，执行代码中最高级别的，也就是window；
3、任何方法都改变不了this，包括call，apply，bind。

普通特性：

4、箭头函数不像普通函数，它不能函数提升

三、实例

实例一

为了更深入了解箭头函数的this特性，首先来看一个简单的例子：

var x = 1;				//定义全局变量x，值为1
var obj = {			//定义对象obj，并在对象中定义了x属性，值为2
    x:2
 };

 var fun = () =>{				//定义箭头函数fun
     console.log(this.x);    //在箭头函数fun中输出this.x
 }
 fun();

在控制台的输出结果是1。
在这里插入图片描述

因为此时调用箭头函数fun，它的指向为window，所以箭头函数内的this.x我们也可以理解为window.x。
使用call方法来改变它的指向，也是不行的

fun.call(obj)

在这里插入图片描述

实例二

如果你只是像想简单了解下箭头函数，那么下面的例子你可以不用掌握

再来看一个更难的例子：

//点击天蓝色方块，两秒后它将变为黑色
<html lang="en">
<head>
    <style>
        #btn {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <button id="btn"></button>
    <script>
           //不使用箭头函数
        let btn = document.getElementById('btn')
        btn.addEventListener('click', function () {
            //console.log(this)    //btn
            let self = this        //设一个变量self来保存this的值(btn)
     
            setTimeout(function() {   
             	// console.log(this)   //window
                self.style.background = 'black'
            }, 2000)
        })
    </script>
</body>
</html>

上面的程序，我们没有使用箭头函数
但是你可以思考一下为什么要多此一举的设一个变量self来保存this的值？

好吧揭晓答案吧：
因为self保存的this是指向btn的，但是进入方法内this则是指向window（setTimeout中的匿名函数，没有其它对象调用它。所以它的默认调用对象就是Window），所以直接在方法内用this指向的是window而不是btn，而window没有style属性会报错，无法达到改变颜色的效果，因而，我们要用保存了this的变量self

要特地设一个变量来保存this，这样做是不是觉得很麻烦，那我们来看一下使用箭头函数后：

//使用箭头函数
let btn = document.getElementById('btn')
        btn.addEventListener('click', function () {
     
            setTimeout(() => {    //setTimeout方法属于window对象
                // console.log(this)   //btn
                this.style.background = 'black'
            }, 2000)
            
        })

使用箭头函数后，箭头函数的外层函数中的this就是箭头函数中的this,而btn调用了外层函数，所以它指向btn，同样达到了修改颜色的目的
这个例子充分利用了箭头函数的this特性