JavaScript中箭头函数和用法是什么,怎样应用?

Admin 2022-01-26 群英技术资讯 392 次浏览

    这篇文章我们来了解JavaScript中箭头函数的内容,下文介绍了什么是箭头函数,箭头函数的使用及不适用的场景等等,文中介绍很详细,有需要的朋友可以参考,感兴趣的朋友接下来就跟随小编来了解看看吧!

    1. 什么是箭头函数?

    箭头函数表达式语法比函数表达式更简洁,即函数的一种简化形式。
    它的写法:

() => {};   // 可以用来写一个匿名函数

    它的结构:

const / let 函数名 参数 => 函数体

    比如现在有一个一般形式的函数表达式

let add = function(x, y) {
	return x + y;};

    可以用箭头函数来写:

let add = (x, y) => {
	return x + y;};

    2. 箭头函数的化简写法

  • 单个参数
// 对于单个参数,我们可以省略外面的圆括号let addOne = x => {
	return x + 1;}
  • 单行函数体
// 对于单行返回函数体,可以同时省略 {} 和  returnlet add (x, y) => x + y;
  • 单行对象
// 对于返回单行对象,在外面加个 ()let add (x, y) => ({
	value: x + y;});

    3. 箭头函数的基础知识

    箭头函数没有 this,它会根据作用域链在外层中寻找 this。
    举个例子:

var A = 1;let fun = {
    A: 2,
    printA: () => {
        console.log(this.A);
    },
    printAA: function() {
        let print = () => {
            console.log(this.A);
        }
        print();
    }};fun.printA();  // 1fun.printAA();  // 2

    调用 printA,里面是输出 this.A,由于箭头函数没有 this,所以在外层寻找,外层是 fun。在这里,fun.printA()是在全局作用域中调用的,所以外层的 this 指向的是 window,由于之前用 var 定义了一个 A = 1,所以输出的是 1。

    调用 printAA,在里面调用了 print(),输出 this.A,看 print 这个函数,是个箭头函数,他没有 this,所以找外层,它的外层是 printAA,它是由 fun 调用的,所以它的 this 指向 fun,所以输出 fun 中定义的 A,也就是 2。

    4. 箭头函数不适用的场景

  1. 作为构造函数

    实例化构造函数之后,它的 this 指向实例化的对像,而箭头函数没有 this,所以它不能用来做构造函数。

  1. 需要 this 指向调用对象的时候

  2. 需要使用 arguments 的时候

    箭头函数中没有 arguments,可以使用剩余参数来存参数。

    以上就是JavaScript中箭头函数及其用法的介绍啦,有需要的朋友可以了解看看,希望对大家学习JavaScript箭头函数有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自PHP中文网

群英智防CDN,智能加速解决方案

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服