javascript - 如何解释下面这段js代码？

Question

var x = 1;
var kit = {
    x: 2,
    buf: {
        x: 3,
        fac: function() {
            return this.x;
        }
    }
}
var kbf = kit.buf.fac;
console.log(kbf());
console.log(kit.buf.fac());

Answer 1

这其实是函数运行时this的指向问题，第一个console里this指向的是window，x肯定就是全局变量var x = 1，第二个console里，this指向kit这个对象里的buf对象，x的值自然就是3了。
你只需要像下面代码这样把this打印出来就看得一清二楚了：

var x = 1;
var kit = {

x: 2,
buf: {
    x: 3,
    fac: function() {
        console.log(this);
        return this.x;
    }
}
}
var kbf = kit.buf.fac;
console.log(kbf());//this打印出来是window对象
console.log(kit.buf.fac());//this打印出来是buf对象

Answer 2

this跟代码中的位置没有关系，是在执行时赋值的。也就是说this只存在于函数调用（运行）期间，在变量作用域中是不存在的。

分析this时，不能看代码位置来确定，要看怎么调用的。

this是在函数运行期赋值的，这步由JavaScript引擎来做，如果函数内的this为undefined，则使 this = window。

具体为下面的情景：

1. 普通函数调用，this为全局对象或是undefined（kbf() 显然是普通函数调用，属于这种情况）

2. 作为对象的方法，this为那个对象（kit.buf.fac() 属于这种情况，fac中的this指向kit.buf对象）

3. new 表达式，this为以该函数为原型的新创建的对象

4. 使用 apply/call指定 this

5. 用bind绑定固定的this

6. 事件处理函数中的this是当前的触发事件的DOM元素(event.currentTarget)