javascript中的“调用上下文”和“执行上下文”:我们在谈论同样的事情吗?

时间:2016-12-29 19:10:47

标签: javascript

有时我读“调用上下文”有时候是“执行上下文”。我想知道我们是否在讨论相同的概念。

我必须说在ECMAScript6规范中我没有找到任何对“调用上下文”的引用。

2 个答案:

答案 0 :(得分:11)

这两个术语密切相关,但相同。

简而言之,他们定义范围上下文范围是关于代码运行的环境(有点像房间 - - 它是关于代码的位置)和上下文是关于导致某些代码被执行的实际对象(比如谁负责将你带到那个房间)。

  

“执行上下文”指的是 "scope chain"   某些代码正在运行时效果。范围链是一个列表   应检查的内存位置(按特定顺序)   要解析的标识符(变量,常量和函数名称)   一个值。由于JavaScript是在单线程中执行的   环境,一次只能执行一个任务。目前   执行代码(及其关联的范围)定义执行   上下文。

一个简单的例子可以这样显示:

// This area is in the Global execution context (scope) because the code is 
// not wrapped in a function or any other kind of code block.
var x = "Global";

// "Global" is the result because the JavaScript engine will always look
// in the current scope for a declaration for the identifier in question.
// It will find a declaration for "x" right here in the Global scope, so
// that's the value it will use.
console.log(x); 

var y = "Also Global";

function parent(){
   // This area is in the "parent" execution context (scope)
   var x = "parent";

   // "parent" is the result (not "Global") because when this function is
   // executing, its scope is the most accessible. The JavaScript engine
   // looks here first to find out what "x" is:
   console.log(x); 

   function child() {
      // This area is in the "child" execution context (scope)
      var x = "child";

      // "child" is the result (not "Global" or "parent") because when this 
      // function is executing, its scope is the most accessible. The 
      // JavaScript engine looks here first to find out what "x" is:
      console.log(x); 

      // "Also Global" is the result here. First the current execution
      // context (scope) is checked for a "y" variable. There isn't one,
      // so the next scope in the scope chain (function parent) is checked.
      // There is no "y" declared there either. So, again, the next highest
      // scope in the chain (Global) is checked and that is where "y" is
      // found, so the value of that "y" is used.
      console.log(y);

      // Here, we will get "undefined". All the scopes in the chain will
      // be checked and if we go all the way up to Global and still don't
      // find a declaration for "z", there is no other scope to look in.
      console.log(z);
   }
}

上面显示的三个执行上下文(范围)可以通过各种方式输入。这些不同的方式产生了“调用背景”。

  

“调用上下文”也可以更准确地称为“调用上下文”   “调用上下文对象”,指的是 对象   用来调用一些代码。这可能看起来像是一样的东西   “执行上下文”,但“调用上下文”指的是    object 导致代码执行并且执行代码正在执行此操作   在自己的执行上下文(范围)内。

这两个术语之间最大的区别在于理解调用上下文导致在执行上下文的持续时间内将关键字this绑定到对象。 this绑定在JavaScript中是易失性的,this绑定到的对象在您进入新的执行上下文时会发生变化。出于所有意图和目的,this 调用某些代码的对象,或this是“调用上下文”。

我写了另一个答案,详细说明如何确定this将绑定到哪个,你可以看到 here

有关调用上下文的说明,请参阅以下代码段。它说明了一个 执行上下文function foo),但两个 调用上下文(按钮和全局) )。

function foo() {
  // When this function is "invoked" via the button click
  // the invocation context is the button and the console will
  // log this as: [object HTMLButtonElement]
  
  // But, when the function is invoked from a direct call to foo
  // from the Global execution context, this will be bound
  // to the window object. So, in that case we'll get: [object Window]
  console.log("The 'this' object (invocation context object) is: " + this);
}

// Call foo from the Global execution context.
foo();

var btn = document.getElementById("btnTest");

// When the button is clicked, execute foo
btn.addEventListener("click", foo);
<button id="btnTest">Click Me</button>

答案 1 :(得分:3)

execution context ”是堆栈帧的官方术语(即规范使用)。正如措辞所说,它提供了(当前)代码执行的上下文,它基本上由内部评估状态,当前评估的函数(代码)和活动变量范围组成。作为堆栈的一部分,它知道函数执行结束时的返回位置。

“调用上下文”可能是是指调用方法的上下文对象,即obj中的obj.method()。它将成为该函数中this的值。该规范不会在任何地方使用此术语,您会发现thisArgumentthisValuereceiver。它在environment record中被称为 ThisBinding ,它是每个执行上下文中包含的lexical environment(范围)的一部分。