JavaScript: 箭头函数JavaScript: 箭头函数JavaScript: 箭头函数JavaScript: 箭头函数
  • 首页
  • 博客
  • 书签
  • 文件
  • 分析
  • 登录

JavaScript: 箭头函数

发表 admin at 2022年7月18日
类别
  • JavaScript
标签
箭头函数可以说是es6的一大亮点,使用箭头函数,可以简化编码过程,是代码更加的简洁。

ES6 允许使用“箭头”(=>)定义函数。

    var f = a => a;
     
    var f = function (a) {
      return a;
    };

上面两个是同一个函数,实现功能都是返回a。可以看到使用箭头函数后代码简洁了很多。如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

    var f = () => 5;
    // 等同于
    var f = function () { return 5 };
     
    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
      return num1 + num2;
    };

如果箭头函数的代码块大于一行,需要用大括号包起来使用。

    var sum = (num1, num2) => { num1 = num1+1;return num1 + num2; } 
    sum(1,1)
    //3

大括号{}内容会被解释成代码块,所以如果返回的是对象,需要在外面加上一个括号。

let getTempItem = id => ({ id: id, name: "Temp" });

否则就会报错。如果代码只有一行且不需要返回,可以使用void,这样就不用大括号了。

使用箭头函数,可以让我们的回调函数特别的简洁。

    // 正常函数写法
    [1,2,3].map(function (x) {
      return x + x;
    });
     
    // 箭头函数写法
    [1,2,3].map(x => x + x);

剪头函数在使用时,this的指向会发生变化。在我们使用普通函数的时候

    function foo() {
      setTimeout(function(){
        console.log('id:', this.id);
      }, 100);
    }
     
    var id = 21;
     
    foo.call({ id: 42 });

这个时候console打印的id是全局的id也就是21。

但是如果使用箭头函数

    function foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
    }
     
    var id = 21;
     
    foo.call({ id: 42 });

这个时候就是42了,这是因为箭头函数的定义生效在函数生成时,也就是指向了{id:42}所以最后打印的是42。

因为这个特性,箭头函数包含this的自定义对象方法中使用。

    const dog= {
      age: 9,
      ages: () => {
        this.age--;
      }
    }

当我们调用dog.ages的时候会报错,这是因为对象不单独构成作用域,箭头函数的this指向的是作用域是全局的。

还有就是动态的this也是不可以使用箭头函数的。比如当监听点击事件的时候,使用this处理点击对象,如果使用箭头函数就会报错,因为this指向的是全局对象了。

发表回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

类别

  • Cat
  • Python
  • MySQL
  • Django
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • php
  • Practice
  • Virtualization
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • Router
  • Office
  • WordPress
  • SEO
  • English
  • Games
  • Recipes
  • living
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2023 艾丽卡 Blog support@alaica.com
      ajax-loader