JavaScript中的this

Posted 2020-08-07 笑花大王

console.log(this);
//window

 

function xioahua(){
    console.log(this);
}
xiaohua();
//普通函数调用
//window

 

‘use strict‘
function xiaohua(){
    console.log(this);
}
xiaohua();
//严格模式下函数调用
//undefined

(function xiaohua(){
    ‘use strict‘
    console.log(this);  
})()
//让他在严格模式下立即调用
//undefind

 

var obj={ 
    name:‘xiaohua‘,
    foo:function(){
        console.log(this.name)
    }
}
obj.foo();
//作为对象的方法调用
//xiaohua

 

function test(){
    console.log(this.name);
}
var obj={ 
    name:‘xiaohua‘,
    foo:test
}
obj.foo();
//作为对象的方法调用
//xiaohua
//解释:同样不变，因为在 js 中一切都是对象，函数也是一个对象，对于 test ，它只是一个函数名
，函数的引用，它指向这个函数，当 foo = test，foo 同样也指向了这个函数。如果把对象的方法赋
值给一个变量，然后直接调用这个变量呢：

 

var obj={ 
    name:‘xiaohua‘,
    foo:function(){
        console.log(this);
    }    
}
var xiaohuadawang=obj.foo;
xiaohuadawang();
//作为对象的方法调用
//Window
//解释:可以看到，这时候 this 执行了全局，当我们把 test = obj.foo ，test 直接指向了一个函数的引用
，这时候，其实和 obj 这个对象没有关系了，所以，它是被当作一个普通函数来直接调用，因此，this 指向全局对象。

 

var obj={ 
    name:‘xiaohua‘,
    foo:function(){
        console.log(this);
    },
    foo2:function(){
        console.log(this);
        setTimeout(this.foo,100);
    }
}
obj.foo2();
//obj...
//window
//解释:执行这段代码我们会发现两次打印出来的 this 是不一样的：
第一次是 foo2 中直接打印 this，这里指向 obj 这个对象，我们毋庸置疑；
但是在 setTimeout 中执行的 this.foo ，却指向了全局对象，这里不是把它
当作函数的方法使用吗？这一点经常让很多初学者疑惑；其实，setTimeout 也只
是一个函数而已，函数必然有可能需要参数，我们把 this.foo 当作一个参数传给
 setTimeout 这个函数，就像它需要一个 fun 参数，在传入参数的时候，其实做
了个这样的操作 fun = this.foo，看到没有，这里我们直接把 fun 指向 this
.foo 的引用；执行的时候其实是执行了 fun() 所以已经和 obj 无关了，它是被
当作普通函数直接调用的，因此 this 指向全局对象。这个问题是很多异步回调函
数中普遍会碰到的；