JavaScript中的this

Posted 笑花大王

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的this相关的知识,希望对你有一定的参考价值。

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 指向全局对象。这个问题是很多异步回调函
数中普遍会碰到的;

 

以上是关于JavaScript中的this的主要内容,如果未能解决你的问题,请参考以下文章

48个值得掌握的JavaScript代码片段(上)

JavaScript 代码片段

求教下面的javascript代码意思

无法解析片段中的 ViewModelProvider 构造?

在片段java类中使用“this”和getLastSignedInAccount时出现错误[重复]

你可能不知道的JavaScript代码片段和技巧(下)