this重新理解

2019-01-23  本文已影响0人  zchub
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 机制一样。
上一篇下一篇

猜你喜欢

热点阅读