• 箭头函数的语法


    箭头函数的语法

    箭头函数的语法多变,根据实际使用场景有多种形式。所有的变种都由函数参数、箭头、函数体组成,根据使用的需求,参数和函数体可分别采取多种不同形式。举个例子:

    let reflect = value => value;
    
    // 实际上相当于:
    let reflect = function(value) {
      return value;
    };
    

    当箭头函数只有一个参数时,可以直接写参数名,箭头紧随其后,箭头右侧的表达式被求值后便立即返回。即使没有显示的返回语句,这个箭头函数也可以返回出传入的第一个参数,不需要更多的语法铺垫。

    如果传入两个或两个以上参数,要在参数的两侧添加一对小括号,就像这样:

    let sum = (num1, num2) => num1 + num2;
    
    // 实际上相当于:
    let sum = function(num1, num2) {
      return num1 + num2;
    };
    

    如果函数没有参数,也要在声明的时候写一组没有内容的小括号,就像这样:

    let getName = () => 'Nicholas';
    
    // 实际上相当于:
    let getName = function( ) {
      return 'Nicholas';
    };
    

    为函数编写由多个表达式组成的更传统的函数体,那么需要用花括号包裹函数体,并显示地定义一个返回值,就像这样:

    let sum = (num1, num2) => {
      return num1 + num2;
    }
    
    // 实际上相当于:
    let sum = function(num1, num2) {
      return num1 + num2;
    };
    

    如果想创建一个空函数,需要写一对没有内容的花括号,就像这样:

    let doNothing = () => {};
    
    // 实际上相当于:
    let doNothing = function( ) {};
    

    如果想让箭头函数向外返回一个对象字面量,则需要将该字面量包裹在小括号里。就像这样:

    let getTempItem = id => ({ id: id, name: 'Temp' });
    
    // 实际上相当于:
    let getTempItem = function(id) {
      return  {
        id: id,
        name: 'Temp'
      }
    };
    

    创建立即执行函数表达式

    只要将箭头函数包裹在小括号里,就可以实现:

    let person = ((name) => {
      return {
        getName: function( ) {
          return name;
        }
      };
    })('Nicholas');
    
    console.log(person.getName()); // "Nicholas"
    
    // 实际上相当于:
    let person = function(name) {
      return {
        getName: function( ) {
          return name;
        }
      };
    }('Nicholas');
    
    console.log(person.getName()); // "Nicholas"
    

    箭头函数没有 this

    函数内的 this 值可以根据函数调用上下文而改变,这有可能错误地影响其他对象。思考一下这个示例:

    let PageHandle = {
      id: '123456',
      init: function( ) {
        document.addEventListener('click', function(event) {
          this.doSomething(event.type); // 抛出错误
        }, false);
      },
      doSomething: function(type) {
        console.log('Handling' + type + 'for' + this.id);
      }
    }
    

    实际上,因为 this 绑定的是事件目标对象的引用(在这段代码中引用的是document),而没有绑定 PageHandle,切由于 this.doSomething() 在目标 document 中不存在,所以无法正常执行。

    可以使用 bind() 方法显示地将函数的this绑定到 PageHandle 上来修正这个问题,就像这样:

    let PageHandle = {
      id: '123456',
      init: function( ) {
        document.addEventListener('click', (function(event) {
          this.doSomething(event.type); // 没有产生错误
        }).bind(this), false);
      },
      doSomething: function(type) {
        console.log('Handling' + type + 'for' + this.id);
      }
    }
    

    箭头函数中没有 this 绑定,必须通过查找作用域链来决定其值。如果箭头函数被箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this;否则 this 的值会被设置为全局对象。举个例子:

    let PageHandle = {
      id: '123456',
      init: function( ) {
        document.addEventListener('click',
          event => this.doSomething(event.type), false);
      },
      doSomething: function(type) {
        console.log('Handling' + type + 'for' + this.id);
      }
    }
    

    箭头函数缺少正常函数所以拥有的 prototype 属性,它的设计初衷是“即用即弃”,所有不能用它定义新的类型。如果尝试通过 new 关键字调用箭头函数,会报错,就像这样:

    var MyType = () => {},
      object = new MyType(); // 错误,不可以通过 new 关键字抵用箭头函数
    

    箭头函数和数组

    举个例子:

    var result = value.sort((a, b) => a - b);
    
    // 实际上相当于:
    var result = value.sort(function(a, b) {
      return a - b;
    })
    

    箭头函数没有 arguments 绑定

    箭头函数没有自己的 arguments 对象,且无论函数在哪个上下文中执行,箭头函数始终可以访问外围函数的 arguments 对象。举个例子:

    function creatArrowFunctonReturnningFirstArg( ) {
      return () => arguments[0];
    }
    
    var arrowFunction = creatArrowFunctonReturnningFirstArg(5);
    
    console.log(arrowFunction()); // 5
     
  • 相关阅读:
    springboot添加邮件发送及压缩功能
    springboot添加多数据源连接池并配置Mybatis
    SpringMVC+Mybatis初尝试
    个人课程总结
    第十六周学习总结
    第十五周学习总结
    第二阶段冲刺九
    第二阶段冲刺八
    第二阶段冲刺七
    搜狗拼音输入法使用评价
  • 原文地址:https://www.cnblogs.com/xuzhenlei/p/12410349.html
Copyright © 2020-2023  润新知