且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

我对一个js问题的分析

更新时间:2022-09-27 15:50:03

qq空间好慢,把我的几个文章拿过来:
 
 
题目如下:
<script>
function foo(){
  foo.abc = function(){alert('def')}
  this.abc = function(){alert('xyz')}
  abc = function(){alert(
'@@@@@')};
  var abc = function(){alert('$$$$$$')}
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();
</script>
问题来自: 中国狐(
[url]www.foxjs.cn[/url]) 详细出处参考:[url]http://www.foxjs.cn/article.asp?id=607[/url]


我的分析结果----->
不运行看看什么结果,分析下
1.采用逐步扩展变量的方法分析:
看这个:
<script>
abc = function(){alert('@@@@@')};-----其实这里等价于window.abc=function(){alert('@@@@@')};一个赋值语句
abc();-----其实这里等价于window.abc();
</script>
结果肯定是@@@@@了。
2.放到函数里面赋值
<script>
function foo()
{
abc = function(){alert('@@@@@')};
}
abc();
</script>
在执行foo();之前是什么也不会输出的,因为还没有对abc赋值,也就是函数引用为null
如果这样,
<script>
function foo()
{
abc = function(){alert('@@@@@')};
}
foo();//函数执行了赋值语句
abc();
</script>
就会输出@@@@@了。
3.看看构造函数
function foo()
{
this.abc = function(){alert('xyz')}------有了this就成为了构造函数
abc = function(){alert('@@@@@')};--window.abc
}
foo();//产生一个匿名对象?然后销毁?
abc();
</script>
上面只是当作了普通的函数执行了赋值语句。
结果:@@@@@
再看如下:
<script>
function foo()
{
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
}
var f=new foo();
f.abc();---this指向了f
abc();---window.abc()
</script>
结果:xyz   @@@@@

再看
<script>
function foo()
{
foo.abc=function(){alert('def');};---对比下window.abc=function{alert('def');};
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
}
var f=new foo();
f.abc();
foo.abc();---这里类似window.abc();
abc();
</script>
结果:xyz   def   @@@@@
4.
<script>
function foo()
{
foo.abc=function(){alert('def');};
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')}--添加了个局部作用域的abc在foo()函数内部会覆盖
---例如在这里调用abc()会执行局部的函数
}
var f=new foo();
f.abc();
foo.abc();
abc();
</script>
结果和上面的相同。
看下面的:
<script>
foo.abc = function(){alert('123');}---在调用new foo()之前赋值会在后面被重写
function foo()
{
foo.abc=function(){alert('def');};
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')}
}
var f=new foo();
f.abc();
foo.abc();
abc();
</script>
结果还是一样。
function foo()
{
foo.abc=function(){alert('def');};
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')}
}
var f=new foo();
foo.abc = function(){alert('123');}---但是在new foo()调用之后,而foo.adb()调用之前重写函数,结果受影响
f.abc();
foo.abc();
abc();
</script>
结果:xyz  123  @@@@@
5.原型对象prototype
<script>
function foo()
{
}
foo.prototype.abc = function(){alert('456');}
var f=new foo();
f.abc();
</script>
结果:456
虽然foo()内部没有明确的定义方法abc()但是我们发现好像foo类定义了一个abc()方法似的。---等于我们为foo类的父类添加了一个可继承的方法
下面重写方法覆盖父类中的方法
<script>
function foo()
{
this.abc = function(){alert('xyz')}
}
foo.prototype.abc = function(){alert('456');}
var f=new foo();
f.abc();
</script>
结果:xyz
本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/101048,如需转载请自行联系原作者