首页 > 如何解释下面这段js代码?

如何解释下面这段js代码?

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());

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)


这其实是函数运行时this的指向问题,第一个consolethis指向的是windowx肯定就是全局变量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对象
【热门文章】
【热门文章】