javascript - 'with' 语句和调用的一些复杂行为

Question

var a = ({
    x: 10,
    foo: function () {
        function bar() {
            console.log(x);
            console.log(y);
            console.log(this.x);
        }
        with (this) {
            var x = 20;
            var y = 30;
            bar.call(this);
        }
    }
}).foo();

结果为 undefined, 30, 20。

如果能得到一些有关其工作原理的逐步调试式解释，我们将不胜感激。

Answer 1

好吧，让我们先简化一下代码。我已经重构出 foo 是一种方法，不需要证明意外行为。

function foo(a) {
    // var x, y, bar - hoisting
    function bar() {
        console.log(x);
        console.log(y);
        console.log(a.x);
    }
    with (a) {
        var x = 20;
        var y = 30;
        bar();
    }
}
foo({x:10});

那么当我们调用 foo 时会发生什么？

1. 安 execution context设置并填充声明的函数和变量。这就是俗称的“提升”。在 foo 中，有函数 bar 和变量 x 和 y(以及函数 foo 本身及其参数 a，仅在我的重构版本中)。这是 bar 可以访问的范围。
2. with statement被执行。它将当前词法环境与基于 a 对象的词法环境进行交换 - 现在可以像变量一样访问其任何属性。
3. 值 20 被分配给一个 x。这是什么 x？解析该标识符时，将检查 a 对象，并且 - 哦 - 它具有与该名称的绑定(bind)!所以我们将值放在该绑定(bind)中，这会将 20 放在对象的 .x 属性上。
4. 值 30 分配给 y。这是什么 y？同样，检查了当前的词法环境，但我们没有在 a 对象上找到 y 属性。因此，我们继续父环境，即具有上面创建的 x、y、bar 变量的环境。实际上，我们在这里找到了一个 y 变量，因此我们将值 30 放入该槽中。
5. bar 函数被调用。同样，设置了一个新的执行上下文(如上所示)，将步骤 1 中的上下文作为其父范围(由 bar 在 foo 中的词法位置确定) ，当 bar 函数被实例化时——词法闭包)。现在我们记录这三个感兴趣的表达:
   • x 解析为 foo 范围内的变量 x，它的值仍然是 undefined。
   • y 解析为 foo 范围内的变量 y，它包含值 30 我们刚刚分配。
   • a.x 解析为 a 对象的 x 属性，它包含我们刚才的值 20分配。