当前位置 博文首页 > 文章内容

    箭头函数

    作者: 栏目:未分类 时间:2020-10-20 9:00:39

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    箭头函数(★★★)

    ES6中新增的定义函数的方式。

    () => {} //():代表是函数; =>:必须要的符号,指向哪一个代码块;{}:函数体
    const fn = () => {}//代表把一个函数赋值给fn

    函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

     function sum(num1, num2) { 
        return num1 + num2;
    }
    //es6写法
    const sum = (num1, num2) => num1 + num2;

    如果形参只有一个,可以省略小括号

     function fn (v) {
        return v;
    }
    //es6写法
    const fn = v => v;

    箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

    const obj = { name: '张三'} 
    function fn () {
        console.log(this);//this 指向 是obj对象
        return () => {
            console.log(this);//this 指向 的是箭头函数定义的位置,那么这个箭头函数定义在fn里面,而这个fn指向是的obj对象,所以这个this也指向是obj对象
        }
    }
    const resFn = fn.call(obj);
    resFn();

    小结

    • 箭头函数中不绑定this,箭头函数中的this指向是它所定义的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁

    • 箭头函数的优点在于解决了this执行环境所造成的一些问题。比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性),包括setTimeout和setInterval中使用this所造成的问题

    面试题

    var age = 100;

    var obj = {
    age: 20,
    say: () => {
    alert(this.age)
    }
    }

    obj.say();//箭头函数this指向的是被声明的作用域里面,而对象没有作用域的,所以箭头函数虽然在对象中被定义,但是this指向的是全局作用域

    剩余参数(★★)

    剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数

    function sum (first, ...args) {
        console.log(first); // 10
        console.log(args); // [20, 30]
    }
    sum(10, 20, 30)

    剩余参数和解构配合使用

    let students = ['wangwu', 'zhangsan', 'lisi'];
    let [s1, ...s2] = students;
    console.log(s1);  // 'wangwu'
    console.log(s2);  // ['zhangsan', 'lisi']