JS的this真是好难理解啊,求高手指点
2011-05-07 23:59
411 查看
百度的前端面试题,代码如下:
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
[/code]
在Chrome上run了一下,结果是
[/code]
前三个结果好说,但对于第五个结果undefined我很疑惑,关键的就是这一句:
我的理解是,当运行到new test()这一句的时候,this指向了test,那么this.a应该就是
这一句里面的0啊!为什么是undefined呢?求解答啊求解答!
--------------------------------分割线--------------------------------------
在调试过程中我发现的几点:
源代码如下
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149251164.png)
运行test()之前,this指向DOMWindow对象:
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149262734.png)
运行test()之时(断点位于test()内部),this仍然指向DOMWindow对象,输出一次为0,5,0。
运行new test()之时(断点位于test()内部),this指向了一个test对象,但是这个对象没用任何属性或成员:
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149272668.png)
输出依次为0,undefined,0
有的大哥说在test里面写
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
并不代表给test对象加了一个a属性,a只是一个局部变量,是这样么?
那么如何给test加属性呢?(使得第二次输出为0,0,0而不是0,undefined,0呢)
才疏学浅,还望赐教!
--------------------------------分割线2--------------------------------------
有的大哥建议说把
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
改为
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
运行结果是:
[/code]
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
应该说这个结果还是可以理解的。
看来this.a和a确实不一样啊。
var a=5;
function test(){
a=0;
alert(a);
alert(this.a);
var a;
alert(a);
}
test();
new test();.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
[/code]
在Chrome上run了一下,结果是
0
[code]5
0
0
undefined
0
[/code]
前三个结果好说,但对于第五个结果undefined我很疑惑,关键的就是这一句:
alert(this.a);
我的理解是,当运行到new test()这一句的时候,this指向了test,那么this.a应该就是
a=0;
这一句里面的0啊!为什么是undefined呢?求解答啊求解答!
--------------------------------分割线--------------------------------------
在调试过程中我发现的几点:
源代码如下
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149251164.png)
运行test()之前,this指向DOMWindow对象:
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149262734.png)
运行test()之时(断点位于test()内部),this仍然指向DOMWindow对象,输出一次为0,5,0。
运行new test()之时(断点位于test()内部),this指向了一个test对象,但是这个对象没用任何属性或成员:
![](http://images.cnblogs.com/cnblogs_com/frankfang/201105/201105080149272668.png)
输出依次为0,undefined,0
有的大哥说在test里面写
function test(){ a=0; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
并不代表给test对象加了一个a属性,a只是一个局部变量,是这样么?
那么如何给test加属性呢?(使得第二次输出为0,0,0而不是0,undefined,0呢)
才疏学浅,还望赐教!
--------------------------------分割线2--------------------------------------
有的大哥建议说把
a = 0;
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
改为
this.a=0;
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
运行结果是:
undefined
[code]0
undefined
undefined
0
undefined
[/code]
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
应该说这个结果还是可以理解的。
看来this.a和a确实不一样啊。
相关文章推荐
- 彻底理解js中this的指向,不必硬背。
- 如何理解js中的this和实际应用中需要避开哪些坑
- js的this指针理解
- 彻底理解js中this的指向
- 关于js中this 和 prototype的 理解。
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
- js 深入理解this指向问题
- 理解js中this的指向问题
- 理解 JS 回调函数中的 this
- 从Ecma规范深入理解js中的this的指向
- 关于 js 中 this 的理解
- 彻底理解js中this的指向
- 如何更好的理解js中的this,分享2段有意思的代码
- 彻底理解js中this的指向,不必硬背。
- [原创]JAVA字符串池的个人理解,请各位高手指点!!
- 彻底理解js中this的指向
- 如何理解JS中的this指向问题
- js中this理解 --简单明了
- js中this的理解和实践【包含箭头函数中的this】
- 彻底理解js中this的指向,不必硬背。