带你了解ES6解箭头函数

时间:2021-6-12 作者:qvyue

箭头函数

基本语法

(param1, param2, …, paramN) => { 表达式}
(param1, param2, …, paramN) => 表达式
//相当于:(param1, param2, …, paramN) =>{ return 表达式; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { 表达式}
singleParam => { 表达式}

// 没有参数的函数应该写成一对圆括号。
() => { 表达式}

更短的表达式

    var elements = [
          'Hydrogen',
          'Helium',
          'Lithium',
          'Beryllium'
        ];

    elements.map(function(element) {
          return element.length;
    }); // 返回数组:[8, 6, 7, 9]

    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
          return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数只有一个参数时,可以省略参数的圆括号
    elements.map(element => {
         return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]

没有单独的this

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值:

  • 如果是该函数是一个构造函数,this指针指向一个新的对象

  • 在严格模式下的函数调用下,this指向undefined

  • 如果是该函数是一个对象的方法,则它的this指针指向这个对象

         function Person() {
                // Person() 构造函数定义 `this`作为它自己的实例.
                this.age = 0;
                setInterval(function growUp() {
                 // 在非严格模式, growUp()函数定义 `this`作为全局对象,
                 // 与在 Person()构造函数中定义的 `this`并不相同.
                    this.age++; // 这里的this.age为undefined
                }, 1000);
        }
        var p = new Person();
    

这时候,我们通过将this值分配给封闭的变量,可以解决this问题。

    function Person() {
        var that = this;
        that.age = 0;
    setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
        that.age++;
      }, 1000);
    }

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

    function Person(){
        this.age = 0;
        setInterval(() => {
            this.age++; // |this| 正确地指向 p 实例
      }, 1000);
    }
    var p = new Person();

通过 call 或 apply 调用

由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略。(这种现象对于bind方法同样成立)

    var adder = {
        base: 1,

        add: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            return f(a);
        },

        addThruCall: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            var b = {
                base: 2
            };

            return f.call(b, a);
            // return f.apply(b, [a]);
            // return f.bind(b, a)();
        }
    };

    console.log(adder.add(1,2)); // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2

简单说下call、apply、bind三者的用法和区别

它们在功能上是没有区别的,都是改变this的指向,它们的区别主要是在于方法的实现形式和参数传递上的不同。call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数,需要再调用一次才行

      var p = {
        a: 1,
        add: function(b) {
            console.log(this.a + b);
        }
      }
    var p2 = {
        a: 2
    }
    p.add(2) //3
    p.add.call(p2, 2);//4

    p.add.apply(p2, [2]);//4

    p.add.bind(p2, 2)();//4

区别:
①apply、call、bind的第一个参数都是this要指向的对象,但apply只有两个参数,第二个参数为一个数组,需要传输的参数值须全部放到数组中。而call、bind一样,参数用逗号分开。
②apply、call返回的的是一个值,而bind返回的是一个函数,需要执行这个函数才会得到值。

箭头函数不能用作构造器,和 new一起用会抛出错误。

    var Foo = () => {};
    var foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性。

    var Foo = () => {};
    console.log(Foo.prototype); // undefined

箭头函数不绑定Arguments 对象

    function foo(n) {
        return  arguments[0] + n
    }
    var f = () => arguments[0] + n; 

   console.log(foo(1)) ; // 2
   console.log(foo(2,1)) ; // 4

   console.log(f(1)) ; // 2//Uncaught ReferenceError: arguments is not defined

yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。

    yield 关键字:
    只能在Generator函数内部使用
    运行.next(),遇到一个yield命令,就暂停
    .next()的返回值表示一个状态{value,done}
    再运行.next(),从之前遇到的那个yield [表达式]处(后)继续恢复运行
    当.next()传参的时候,yield [表达式]整个被替换为传入的参数。

函数体

箭头函数可以有一个“简写体”或常见的“块体”。
在一个简写体中,只需要一个表达式,并附加一个隐式的返回值。在块体中,必须使用明确的return语句。

    var func = x => x * x;
    // 简写函数 省略return
    
    var func = (x, y) => { return x + y; };
    //常规编写 明确的返回值

返回对象字面量

    记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。
    var func = () => { foo: 1 };
    // Calling func() returns undefined!
    console.log(func()) //(调用返回undefined)

    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name(函数语句需要一个函数名)
    这是因为花括号({} )里面的代码被解析为一系列语句(即 foo 被认为是一个标签,而非对象字面量的组成部分)。

    所以,记得用圆括号把对象字面量包起来:

    var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行

var func = ()
       => 1;
// 报错
但是,可以通过在 ‘=>’ 之后换行,或者用 ‘( )’、'{ }'来实现换行,如下:

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

// 不会有语法错误

箭头函数也可以使用条件(三元)运算符

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

总结:

1.箭头函数this为父作用域的this,不是调用时的this
2.箭头函数不能作为构造函数,不能使用new
3.箭头函数没有arguments
4.箭头函数通过call和apply调用,不会改变this指向,只会传入参数
5.箭头函数没有原型属性
6.箭头函数不能作为Generator函数,不能使用yield关键字
7.箭头函数返回对象时,要加一个小括号
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。