JavaScript中变量的相互引用
测试如下:
.my_show_textarea {
width:600px;
height:150px;
font-family:"Courier New", Courier, monospace;
overflow:auto;
border:1px solid #ccc;
font-size:11px;}
.my_show_button{
font-family:"微软雅黑",Arial, Helvetica, sans-serif
}
数组类型测试 Object类型测试 实例化函数测试 函数参数按地址传递测试
var a=b=[1,2];
a.push(3);
alert(a.length+' : '+b.length);
function $id(elem){return document.getElementById(elem);}
var my_select=$id("my_show_select");
var my_textarea=$id("my_show_textarea");
var my_button=$id("my_show_button");
my_select.onchange=function(){
var value=this.value;
var array=[];
switch(value){
case '1':
array.push('var a=b=[1,2]');
array.push('a.push(3)');
array.push("alert(a.length+' : '+b.length)");
break;
case '2':
array.push("var a=b=new Object()");
array.push("a.show=function(){alert('a: I am a')};");
array.push("b.show=function(){alert('b: I am b')}");
array.push("a.show(); b.show()");
array.push("alert('事实上我调用了两个不同函数')");
break;
case '3':
array.push("var a=function(){alert('a说:函数本身并不具有相互引用特性,虽然他也是Function的实例');}");
array.push("var c=new a();");
array.push("var b=c;");
array.push("b.show=function(){alert('b: I am b');}");
array.push("c.show=function(){alert('c: I am c');}");
array.push("b.show();c.show()");
array.push("alert('事实上我调用了两个不同函数')");
break;
case '4':
array.push("var a=[1,2]");
array.push("var b=function(arg){\nvar c=arg;\nc.push(3);\nalert(c.length);}");
array.push("b(a);");
array.push("alert('事实上参数a在函数b中被修改了')");
}
my_textarea.value=array.join(";\n");
};
my_button.onclick=function(){
eval(my_textarea.value);
};
关于对节点对象操作产生的影响:
由于是函数是按值传递,所以在插入节点时,引用的是节点本身,而不是它的一个克隆,所以节点被转移了
如:
无标题文档
.c2{
border:1px solid #ccc;
width:100px;
height:100px;}
.c1{
border:2px solid #000;
width:50px;
height:60px;}
div1
div2
function $(elem){return document.getElementById(elem);}
var div1=$("div1");
var div2=$("div2");
var button=$("button");
button.onclick=function(){
div2.appendChild(div1);
};
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后一个是关于节点的移除的,本来以为用innerHTML=""来移除元素内容的话,在IE中会把创建的节点从内存中彻底消除,事实并非如此,而是产生了很奇怪的现象:
如:
无标题文档
body{
font-family:"微软雅黑","Times New Roman", Times, serif;
font-size:12px;}
.c2{
border:1px solid #ccc;
width:500px;
height:150px;}
.c1{
border:2px solid #000;
width:300px;
height:100px;}
.c3{
border:1px solid #ccc;
width:100px;
height:50px;}
来回重复点击add_div和inner试试,会发现奇怪的现象。点击alert,又会发现创建的div没从内存清除。
用removeChild方法会很正常的表现
if(!+"\v1"){}else alert("请在IE下测试");
var elem=document.createElement("div");
elem.className="c1";
elem.innerHTML="creatediv c1";
var elem2=document.createElement("div");
elem2.className="c3";
elem2.innerHTML="creatediv c3";
elem.appendChild(elem2);
var div2=document.getElementById("div2");
var inputs=document.getElementsByTagName("input");
inputs[0].onclick=function(){div2.appendChild(elem);};
inputs[1].onclick=function(){div2.innerHTML=""};
inputs[2].onclick=function(){div2.removeChild(elem)};
inputs[3].onclick=function(){alert(elem+elem2)};
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]