您的位置:首页 > Web前端 > JavaScript

彻底理解JavaScript中this的指向

2018-02-18 11:12 591 查看
在网上,大部分文章都会出现下面这段话:

this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,实际上this最终指向的是那个调用他的对象

这句话总是让人有哦一种琢磨不透的感觉。
为什么要理解this?如果已经学过了面向对象,那么就应该指导this的重要性!

1.我们来看一个例子:

function fun(){
var userName = "lzh";
console.log(this.userName); //undefined
console.log(this); //Window
}
fun();

按照上面加粗的字体所说的 this最终指向的是那个调用他的对象。上述代码中的函数fun,实际上是属于window这个大对象下的一个方法,下shutdown代码便可证明:
function fun(){
var userName = "lzh";
console.log(this.userName); //undefined
console.log(this); //Window
}
window.fun();

2.我们来看下面的例子2:

var obj = {
userName:"lzh",
fun:function(){
console.log(this.userName);  //lzh
}
}
obj.fun();

在这个例子里,this的指向是对象obj,调用的fun是通过obj.fun实现的,那么this的指向自然就是obj这个对象;
再次强调一下:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,哪个对象调用,this就指向谁

3.我们来看第三个例子:

var obj = {
userName:"lzh",
fun:function(){
console.log(this.userName); //lzh
}
}
window.obj.fun();

例2和例3两段代码,只有在调用时候的写法不一样;
但是,例3 里面的this为什么不指向window?
我们首先要知道window是js中的全局对象,我们创建的变量市级上就是给window这个大对象添加属性,
接着我们来看代码段4
var obj = {
a:6,
b:{
a:12,
fun:function(){
console.log(this.a); //12
}
}
}
obj.b.fun();

代码4中的fun是由对象obj ”.“出来的,同样this并没有指向obj;所以本文最开始那一段黑体字说的难道有错误吗?
应该算是说的并不准确(我觉得说的很别扭,就当他不对)
来看下面三短话(百度了好多资料觉得这几句写的非常好):
1. 如果一个函数中有this,但是他没有被上一级的对象所调用,那么this的指向就是window
2. 如果一个函数中有this,这个函数有被上一级对象所调用,那么this的指向就是上衣及对象
3. 如果一个函数中有this,这个函数中包含了多个对象,尽管这个哈哈哈书是被最外层的对象所调用,this的指向也只是他上一级的对象
对于第三段话 我们来看下面这段代码:
var obj = {
a:6,
b:{
// a:12, 对象b中的 a 已经被隐掉
fun:function(){ console.log(this.a); //undefined } }}obj.b.fun();
尽管对象b中没有属性a,但是这个this仅指向对象b,并不会向上一级寻找。
但是(万事万物都有但是,哈哈哈):我们来看一个特殊的例子:
var obj = {
a:6,
b:{
a:12,
fun:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var fun1 = obj.b.fun;
fun1();

在这里 this的指向就变成了 window,奇怪吗?不奇怪!原因是因为:
this永远指向的是最后调用他的对象;这句话的意思就是说:看他执行的时候是谁调用的,上面的例子中,虽然函数fun是被对象b引用的,但是将fun赋值给变量fun1的时候并没有执行,而是有fun1执行的,所以this最终的指向是window,而例子3中是直接执行了fun;
   
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息