背景

JavaScrip中的this是一道靓丽的风景线，是那么地迷人，那么地吸引人入坑。为啥？因为this的指向总是让人捉摸不透。

看如下代码，告诉我，打印的this是啥？

function foo() {
  console.log(this);
}

const obj1 = { 
  foo: function() {
    console.log(this);
  }
}

const obj2 = { 
  foo: function() {
    function bar() {
      console.log(this);
    }
    bar();
  }
}

 const obj3 = { 
  foo: function() {
    const bar = () => {
      console.log(this);
    }
    bar();
  }
}

const obj4 = { 
  foo () {
    const bar = () => {
      console.log(this);
    }
    bar();
  }
}

如果你的回答是：window、obj1……

那我要恭喜你，恭喜你成功入坑。

this的指向取决于调用，而不是定义。上面代码你只是定义了this，你根本没有去调用执行，this指向谁根本就无法确定？

分析

function foo() {
  console.log(this);
}

// 1. 普通函数调用
// 注意严格模式的问题!!!
foo()   //=> 全局（在浏览器环境下是Window，在Node环境下是global），严格模式 undefined

// 2. new 调用
new foo();  //=> foo {}
// 指向生成的实例对象

// 3. call / apply / bind 
foo.call('123') => '123'

const obj1 = { 
  foo: function() {
    console.log(this);
  }
}

obj1.foo(); //obj1

const fn = obj1.foo;
fn(); // 全局

const obj2 = { 
  foo: function() {
    function bar() {
      console.log(this);
    }
    bar(); 
  }
}

obj2.foo(); // 全局

 const obj3 = { 
  foo: function() {
    const bar = () => {
      console.log(this);
    }
    bar();
  }
}

obj3.foo(); //obj3 (箭头函数和this没有关系，箭头函数没有自己的this, 箭头函数无法改变this指向)

const obj4 = { 
  foo () {
    const bar = () => {
      console.log(this);
    }
    bar();
  }
}
obj4.foo(); // obj4

总结

1. this的指向取决于调用，而不是定义。
2. 沿着作用域向上找最近的一个 function，看这个 function 最终是怎样执行的。