zoukankan      html  css  js  c++  java
  • 箭头函数与普通函数的区别

    箭头函数:

    let fun = () => {
        console.log('lalalala');
    }

    普通函数:

    function fun() {
        console.log('lalla');
    }

    箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return。

    箭头函数是匿名函数,不能作为构造函数,不能使用new

    let FunConstructor = () => {
        console.log('lll');
    }
    
    let fc = new FunConstructor();

    报错:Uncaught TypeError:FunConstructor is not a constructor

    箭头函数不绑定arguments,取而代之用rest参数...解决 (rest参数:形式为...变量名

    function A(a){
      console.log(arguments);
    }
    A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
    
    let B = (b)=>{
      console.log(arguments);
    }
    B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined
    
    
    let C = (...c) => {
      console.log(c);
    }
    C(3,82,32,11323);  // [3, 82, 32, 11323]

    箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值

    (箭头函数不会重新绑定this,普通函数会)

    var obj = {
      a: 10,
      b: () => {
        console.log(this.a); // undefined
        console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
      },
      c: function() {
        console.log(this.a); // 10
        console.log(this); // {a: 10, b: ƒ, c: ƒ}
      }
    }
    obj.b(); 
    obj.c();
    var obj = {
      a: 10,
      b: function(){
        console.log(this.a); //10
      },
      c: function() {
         return ()=>{
               console.log(this.a); //10
         }
      }
    }
    obj.b(); 
    obj.c()();

    箭头函数通过 call()  或   apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。

    let obj2 = {
        a: 10,
        b: function(n) {
            let f = (n) => n + this.a;
            return f(n);
        },
        c: function(n) {
            let f = (n) => n + this.a;
            let m = {
                a: 20
            };
            return f.call(m,n);
        }
    };
    console.log(obj2.b(1));  // 11
    console.log(obj2.c(1)); // 11

    箭头函数没有原型属性

    var a = ()=>{
      return 1;
    }
    
    function b(){
      return 2;
    }
    
    console.log(a.prototype);  // undefined
    console.log(b.prototype);   // {constructor: ƒ}

    箭头函数不能当做Generator(生成器)函数,不能使用yield关键字

    总结:

    箭头函数的this永远指向其上下文的this,任何方法都改变不了其指向,如:call(),bind(),apply()

    普通函数的this指向调用它的那个对象

    补充:generator函数可以返回多次

    generator由function*定义(注意多出的*号),并且,除了return语句,还可以用yield返回多次。

    function* foo(x) {
        yield x + 1;
        yield x + 2;
        return x + 3;
    }
  • 相关阅读:
    如何将网格式报表打印成其它样式
    拥有与实力不相称的脾气是种灾难——北漂18年(23)
    8.8.1 Optimizing Queries with EXPLAIN
    mysql 没有rowid 怎么实现根据rowid回表呢?
    secondary index
    8.5.5 Bulk Data Loading for InnoDB Tables 批量数据加载
    mysql 中key 指的是索引
    8.5.4 Optimizing InnoDB Redo Logging 优化InnoDB Redo 日志
    8.5.3 Optimizing InnoDB Read-Only Transactions 优化InnoDB 只读事务
    8.5.1 Optimizing Storage Layout for InnoDB Tables InnoDB表的存储布局优化
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12703933.html
Copyright © 2011-2022 走看看