美文网首页
ES6箭头函数及this

ES6箭头函数及this

作者: 捡破烂儿的 | 来源:发表于2017-04-11 18:16 被阅读0次

    箭头函数是ES6中的新特性,他为我们提供了一种全新的书写函数的方法

    箭头函数优化了ES5的函数语法,不需要在写function,如果函数体简单的话甚至可以不用写return

    let fun = (x) => x*2;
    

    1、只有一个参数时,括号可以省略
    2、没有参数,括号不能省略
    3、多个参数不能省略括号

    回到主题,箭头函数和this

    var a = 100;
    var obj = {
        a : 10,
        fun : function(){
            console.log(this.a);
        }
    };
    obj.fun();  // 10
    

    在ES5中,要想console结果是100的话,通常是var this = that或者bind

    var a = 100;
    var obj = {
        a : 10,
        fun : function(){
            console.log(this.a);
        }
    };
    obj.fun.bind(this)();  // 100
    

    接下来用箭头函数试试

    var a = 100;
    var obj = {
        a : 10,
        fun:()=>{
            console.log(this.a);
        }
    }
    obj.fun();  // 100
    

    总结:
    箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。
    但是它对this的处理与一般的普通函数不一样,箭头函数的 this 始终指向函数定义时的 this,而非执行时
    就像上面例子看到的一样,箭头函数没有自己的this,会继承外部的this。

    相关文章

      网友评论

          本文标题:ES6箭头函数及this

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