彻底理解JavaScript中this的指向
2018-02-18 11:12
591 查看
在网上,大部分文章都会出现下面这段话:
为什么要理解this?如果已经学过了面向对象,那么就应该指导this的重要性!
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();
在这个例子里,this的指向是对象obj,调用的fun是通过obj.fun实现的,那么this的指向自然就是obj这个对象;
再次强调一下:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,哪个对象调用,this就指向谁
userName:"lzh",
fun:function(){
console.log(this.userName); //lzh
}
}
window.obj.fun();
例2和例3两段代码,只有在调用时候的写法不一样;
但是,例3 里面的this为什么不指向window?
我们首先要知道window是js中的全局对象,我们创建的变量市级上就是给window这个大对象添加属性,
接着我们来看代码段4
代码4中的fun是由对象obj ”.“出来的,同样this并没有指向obj;所以本文最开始那一段黑体字说的难道有错误吗?
应该算是说的并不准确(我觉得说的很别扭,就当他不对)
来看下面三短话(百度了好多资料觉得这几句写的非常好):
1. 如果一个函数中有this,但是他没有被上一级的对象所调用,那么this的指向就是window
2. 如果一个函数中有this,这个函数有被上一级对象所调用,那么this的指向就是上衣及对象
3. 如果一个函数中有this,这个函数中包含了多个对象,尽管这个哈哈哈书是被最外层的对象所调用,this的指向也只是他上一级的对象对于第三段话 我们来看下面这段代码:
var obj = {
a:6,
b:{
尽管对象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;
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;
相关文章推荐
- JavaScript中this指针指向的彻底理解
- JavaScript中this指针指向的彻底理解
- 彻底理解JavaScript中this指向
- JavaScript中this指针指向的彻底理解
- JavaScript中this指针指向的彻底理解
- JavaScript--彻底理解js中this的指向
- JavaScript中this指针指向的彻底理解
- [javascript]彻底理解 JS 中 this 的指向
- 灵活的理解JavaScript中的this指向
- 彻底理解js中this的指向,不必硬背。
- 彻底理解js中this的指向
- 彻底理解JS中This指向问题
- 彻底理解js中this的指向,不必硬背。
- 彻底理解 JS 中 this 的指向
- 彻底理解js中this的指向,不必硬背。
- 彻底理解js中this的指向
- 彻底理解js中this的指向
- [置顶] 彻底理解js中this的指向,不必硬背。
- 彻底理解js中this的指向!
- 彻底理解js中this的指向,不必硬背。