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需刷新才能执行]

(0)

相关推荐

  • 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

  • JavaScript中变量、指针和引用功能与操作示例

    本文实例讲述了JavaScript中变量.指针和引用功能与操作.分享给大家供大家参考,具体如下: 1.变量 我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中存放的具体信息. 例如,在JS中 var a; a=10; 第一个语句在存储器中指定了一组存储单元,并命名为a: 第二个语句在这组存储单元中存储了数字10. 变量a的值为10实际上是说存储单元组a存

  • JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • JavaScript中原始值和引用值深入讲解

    目录 值和引用相关内容 1. 简单值(原始值) 2. 复杂值(引用值) 3. 访问方式 4. 比较方式 5. 动态属性 6. 变量赋值 灵魂拷问 总结 值和引用相关内容 在 JavaScript 中,数据类型整体上来讲可以分为两大类:基本类型和引用数据类型 基本数据类型,一共有 6 种: string,symbol,number,boolean,undefined,null 其中 symbol 类型是在 ES6 里面新添加的基本数据类型. 引用数据类型,就只有 1 种: object 基本数据类

  • JavaScript中变量声明有var和没var的区别示例介绍

    本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部,有var和没var声明的变量是不一样的.有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口东东. 在全局作用域内声明变量时,有var 和没var看起来都一样,我们知道,声明的全局变量,就是window的属性,究竟是否一样,我们通过ECMAScrpit5提供

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • django开发之settings.py中变量的全局引用详解

    本文主要介绍的是django中settings.py中变量的全局引用的相关资料,下面话不多说,来看看详细的介绍吧. 前言 在settings.py中添加自定义变量,可以通过setting.(点)变量名的方式访问,如: from django.conf import settings site_name = settings.SITE_NAME site_desc = settings.SITE_DESC 但是,如果遇到了一些频繁访问的变量,如:邮箱,网站标题,网站的描述,这样访问就很不方便. 解

  • 了解javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解. 首先,看一个题目: console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //报错

  • JavaScript中变量提升和函数提升实例详解

    js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端

随机推荐