美文网首页
ES6 箭头函数this指向

ES6 箭头函数this指向

作者: 秦hy | 来源:发表于2018-06-07 20:50 被阅读0次

    普通函数this的指向

    普通函数this的指向是,在调用函数时所在的对象

     var x=11;
    var obj={
        x:22,
        y : function (){
            return function say(){
                console.log(this.x);
            }
        }
    }
    obj.y()();      //输出11,即this指向的是全局对象
    

    上述就是在全局作用域中调用函数,所以this对象指向全局对象
    即使有很多层作用域

     x=11;
    var obj={
        x:22,
        y : function (){
            return function say(){
                console.log(this.x);
            }
        }
    }
    
    var aa = {
        x: 5,
        say : function () {
           obj.y()();
        }
    }
    aa.say();   //输出11
    

    箭头函数this的指向

    下面代码执行环境的全局对象是window,如果在global中会有一些差别。

    • 箭头函数没有自己的this, 它的this是继承而来,所以箭头函数不可以当作构造函数
    • 箭头函数体内的this对象是指向定义时所在的作用域,而不是调用时所在的作用域
    var x=11;
    var obj={
        x:22,
        y : function (){
            return say=()=>{
                console.log(this.x);
            }
        }
    }
    obj.y()();     //输出22
    

    通俗来说,因为箭头函数实质没有this,所以箭头函数的this就是它所在的词法作用域中的this。如今,第一个箭头函数就在y()中。因此,它的this就是y()的this。根据this的默认绑定原则,此时谁调用了y(),y()中的this就指向谁,因此既然是obj调用了this,那么y()的this就是obj,所以箭头函数的this就是obj。如果不懂还可以看下面的例子

    var x=11;
    var obj={
        x:22,
        say : ()=>{
                console.log(this.x);
            }
        };
    
    obj.say();    //输出11  如果在global为全局对象中则输出的是undefined
    

    这里的say()箭头函数在obj对象的作用域中,所以箭头函数this就是obj中的this,而obj所在地执行环境是window,即window调用了obj,所以this对象就指向的window。

    箭头函数还可以让setTimeout里面的this,绑定定义时所在的作用域,而不是运行时所在的作用域。

    ps:这里只是个人的一点小理解,欢迎各位大神能给出意见。

    相关文章

      网友评论

          本文标题:ES6 箭头函数this指向

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