美文网首页
ES6箭头函数与普通函数区别

ES6箭头函数与普通函数区别

作者: 黄黄黄大帅 | 来源:发表于2020-09-29 15:56 被阅读0次
    箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
    箭头函数没有原型属性
    箭头函数不绑定arguments,取而代之用rest参数…解决
    function A(a){
      console.log(arguments); //[object Arguments] {0: 1}
    }
    
    var B = (b)=>{
      console.log(arguments); //ReferenceError: arguments is not defined
    }
    
    var C = (...c)=>{ //...c即为rest参数
      console.log(c); //[3]
    }
    A(1);
    B(2);
    C(3);
    
    箭头函数不能当做Generator函数,不能使用yield关键字
    普通函数中的this指向函数被调用的对象,因此对于不同的调用者,this的值是不同的。而箭头函数中并没有自己的this(同时,箭头函数中也没有其他的局部变量,如this,argument,super等),所以箭头函数中的this是固定的,它指向定义该函数时所在的对象
    var a  = 3;
    var obj = {
        a : 1,
        foo : function(){
            console.log(this.a);
        }
    }
    obj.foo(); //1
    var bar = obj;
    bar.a = 2;
    bar.foo(); //2
    var baz = obj.foo;
    baz(); //3
    

    普通函数的this总是指向它的直接调用者。
    在严格模式下,没找到直接调用者,则函数中的this是undefined。
    在默认模式下(非严格模式),没找到直接调用者,则函数中的this指向window。

    es5将this指向对象本身
    var obj = {
        a : 1,
        foo : function(){
            var that  = this;
            setTimeout(
                function(){console.log(that.a),3000})
        }
    }
    obj.foo(); //1
    
    var obj = {
        a : 1,
        foo : function(){
            setTimeout(
                function(){console.log(this.a),3000}.bind(this))
        }
    }
    obj.foo(); //1
    
    箭头函数
    ()=>{console.log(this)}
    

    其中()内是要带入的参数,{}内是要执行的语句。箭头函数是函数式编程的一种体现,函数式编程将更多的关注点放在输入和输出的关系,省去了过程的一些因素,因此箭头函数中没有自己的this,arguments,new target(ES6)和 super(ES6)。箭头函数相当于匿名函数,因此不能使用new来作为构造函数使用。箭头函数中的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: ƒ}
        },
        d:function(){
            return ()=>{
                console.log(this.a); // 10
            }
        },
        e:function(){
          setTime
        }
    
      }
      obj.b(); 
      obj.c();
      obj.d()();
    

    obj.b()中的this会继承父级上下文中的this值,也就是与obj有相同的this指向,为全局变量window;
    obj.c()的this指向即为调用者obj;
    obj.d().()中的this也继承自父级上下文中的this,即d的this指向,也就是obj。

    相关文章

      网友评论

          本文标题:ES6箭头函数与普通函数区别

          本文链接:https://www.haomeiwen.com/subject/ewseuktx.html