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

    箭头函数:  

    let fun = ()  =>{
        console.log(this) //Window 
    }
    fun()

    普通函数:

    function fun(){
    console.log(this)//Window
    }

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

    let fun = () =>{
    console.log('111)
    }
    let fc = new fun';

    会报如下错误:

    2.箭头函数不绑定arguments,取而代之用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]

    3.箭头函数不绑定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()();

    4.箭头函数通过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

    5.箭头函数没有原型属性

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

    6.箭头函数不能当作Generator函数,不能使用yield关键字。

  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/lucky-fellow1/p/10764618.html
Copyright © 2011-2022 走看看