• es6箭头函数 this 指向问题


    es5中 this 的指向

    var factory = function(){
       this.a = 'a';
       this.b = 'b';
       this.c = {
            a:'a+',
            b:function(){return this.a}
        }  
    };
    console.log(new factory().c.b());  // a+

    通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁。

    es6中 箭头函数 this 的指向

    var factory = function(){
       this.a = 'a';
       this.b = 'b';
       this.c = {
            a:'a+',
            b:() => {return this.a}
        }  
    };
    console.log(new factory().c.b());  // a

    箭头函数函数体中 this 的指向是定义时 this 的指向。在定义 b 函数时,b当中的 this 指向的是 这个factory 函数体中的 this ,这个 factory 函数体中的 this 指向的是这个构造函数的实例,这个实例当中的 a 就等于 ‘a’;虽然是调用的b对象,但这个b对象指向的是这个实例。

    箭头函数的this指向:箭头函数在定义时执行器上下文的this的指向(不具有块级作用域),即会取当前的函数的作用域链上的this,忽略块级作用域中的this

    1.

    var x=11;
    var obj={
      x:22,
      say:function(){
        console.log(this.x)
      }
    }
    obj.say(); //22

    一般的定义函数跟我们的理解是一样的,运行的时候决定this的指向,我们可以知道当运行obj.say()时候,this指向的是obj这个对象。

    2.

    var x=11;
    var obj={
     x:22,
     say:()=>{
       console.log(this.x);
     }
    }
    obj.say();//11

    es6箭头函数中的this是定义时绑定的,就是this是继承自父执行上下文!!中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。(this只有在函数被调用,或者通过构造函数new Object()的形式才会有this)

    3.

    var a=11
    function test1(){
      this.a=22;
      let b=function(){
        console.log(this.a);
      };
      b();
    }
    var x=new test1();//11
    var a=11
    function test1(){
      this.a=22;
      let b=function(){
        console.log(this.a);
      };
      b();
    }
    test1();//22

    箭头函数情况下:

    var a=11;
    function test2(){
      this.a=22;
      let b=()=>{console.log(this.a)}
      b();
    }
    var x=new test2();//22

    ES6中定义的时候绑定this的具体含义,应该继承的是父执行上下文里面的this,切忌是父执行上下文!!!

    简单对象(非函数)是没有执行上下文的!

    箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

  • 相关阅读:
    利用委托传值
    引用类型的默认值为Null
    字符串加密与解密 (MD5)
    讲解Guitar Pro如何显示吉他面板功能
    Guitar Pro 7 常见问题之版本更新
    Guitar Pro7常见问题之滑音的讲解
    Guitar Pro 7如何新建吉他谱步骤
    带你演绎Guitar Pro 7制作吉他谱前的步骤
    如何添加音效使乐曲更加丰富?
    Guitar Pro 吉他软件功能介绍
  • 原文地址:https://www.cnblogs.com/lingnweb/p/9882082.html
Copyright © 2020-2023  润新知