美文网首页
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时,印象中的箭头函数与普通函数的区别就...

  • 2019-01-11

    ES6 箭头函数 箭头函数表示法:()=>console.log('Hello') 箭头函数和普通函数的区别 和普...

  • es6应该搞清楚的问题

    一、箭头函数与普通functon有什么区别?箭头函数可以完全代替普通functon吗? 1.箭头函数是匿名函数,不...

  • es6箭头函数中的this的区别

    箭头函数函数看上去只是es6对匿名函数的简写,其实箭头函数和匿名函数有明显区别 普通方式定义的函数可参考我之前整理...

  • es6

    箭头函数与普通函数的区别 箭头函数是匿名函数,不能作为构造函数,不能使用new 箭头函数不绑定arguments,...

  • 箭头函数与普通函数的区别你真的明白吗

    箭头函数与普通函数的区别? 构造函数可以使用new 生成实例,那么箭头函数可以吗?为什么?/答: 箭头函数比普通函...

  • 常见前端面试题

    箭头函数与普通函数的区别 箭头函数语法比普通函数更加简洁,但箭头函数中没有arguments,所以形参可以使用展开...

  • es6相关

    1.箭头函数与普通函数的区别 箭头函数 let fun = () => { console.log('lala...

  • 箭头函数和普通函数的主要区别是什么?

    箭头函数和普通函数的主要区别: this的指向问题,箭头函数是不存在this的(也是箭头函数和普通函数最主要的区别...

  • JavaScript箭头函数

    ES6新语法箭头函数 箭头函数是ES6新语法,因为语法简单、可读性好,所以使用的也很多。箭头函数也是匿名函数,区别...

网友评论

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

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