美文网首页
this重新理解

this重新理解

作者: zchub | 来源:发表于2019-01-23 09:02 被阅读0次
    var a = {
      b: 1,
      c: ()=>{
        console.log(this)
      }
    }
    console.log(a.c())      // window
    
    function b(){
      this.c = 1;
      this.d = ()=>{
        console.log(this)
      }
      return this;
    }
    console.log(b().d())    // window
    
    var e = new b();
    console.log(e.d());      // {c: 1, d: ƒ}
    

    this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

    经典代码

    function foo() { 
      var a = 2;
      this.bar(); 
    }
    
    function bar() { 
      console.log( this.a );
    }
    
    foo(); // ReferenceError: a is not defined
    
    

    this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。
    当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性,会在函数执行的过程中用到。

    优先级判断

    1. 由new调用?绑定到新创建的对象。
    2. 由call或者apply(或者bind)调用?绑定到指定的对象。
    3. 由上下文对象调用?绑定到那个上下文对象。
    4. 默认:在严格模式下绑定到undefined,否则绑定到全局对象。

    而对于箭头函数 =>

    ES6 中的箭头函数并不会使用四条标准的绑定规则,而是根据当前的词法作用域来决定 this,具体来说,箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这 其实和 ES6 之前代码中的 self = this 机制一样。
    

    相关文章

      网友评论

          本文标题:this重新理解

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