Question

我们知道，JavaScript是一种词法作用域语言：

var a = 1;

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

function bar() {
  var a = 2;
  foo(); 
}

bar() // 1

但是涉及this时，javascript会使用此关键字显示动态范围功能。例如：

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // obj
bar() // window

他们到底有什么关系？

Answer 1

javascript中的函数也可以是数据的闭包。这样this代表了闭包的上下文。您可以覆盖它，例如

var MyObject = {name: 'your name'}

function NamePrinter() {
    console.log(this.name)
}

NamePrinter = NamePrinter.bind(MyObject)
NamePrinter();

还请注意，这是一个人为的示例。我通常不会尝试以这种方式覆盖上下文。有时候这很有用，例如在传递函数并在其他上下文中绑定它们时，您可以为交叉使用实用程序做些有用的事情

Answer 2

在Javascript中，比在何处定义函数更重要的是从何处调用函数以及具有什么上下文。

在第一种情况下，从窗口范围调用foo和bar（考虑到它在浏览器中运行），因此返回1。

在第二种情况下

var bar = obj.foo
obj.foo() // obj
bar() // window

obj.foo（）使用obj上下文调用foo，因此它引用obj。但在酒吧的情况下；它指的是函数foo，并且由于bar是在全局范围内调用的，因此它指的是窗口。