JS with的问题

Question

({
    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); // 这个this指向哪里？
        }
    }
}).foo();

// answer : und 30 20

有没有大神能分析下这个结果？

Answer 1

这个问题比较复杂，涉及到的知识点：

• 词法环境链(即大家常说的作用域链)和变量的解析规则

• with块可以形成一个独立的词法环境(这是解决此问题的关键)

• 变量声明的提升

首先，关于this是指谁：要先看它所属的函数(即包裹它的那个函数)是谁，然后看谁调了这个函数。

很显然this属于那个最大的函数，即foo。那么是谁调了foo函数呢？就是最大的那个对象。

所以this就是指第一个圆括号里面定义的那个大对象。

至于对输出结果的分析，我现在用手机不便回答，晚上回家再详细作答。

不过可以先提示一点：

1. 在with块中的变量，先到with后面的对象属性里面找，找不到再到包裹with的函数的局部变量找，在找不到就到外层函数的局部变量找...

2. 你这段代码等价于：

({
    x:10,
    foo: function(){
        var x, y;
        function bar(){
            console.log(x);
            console.log(y);
            console.log(this.x);
         }

        with(this) {
            x = 20;
            y = 30;

            bar.call(this); // 这个this 指向哪里？
        }
    }
}).foo();