全局变量的三种声明方法

2021-10-07 00:08:08

全局变量有如下三种声明方法(这里以举声明FWK这个变量为例)：

1、使用var直接声明 var FWK;

2、使用window.FWK = ….;

3、隐式声明全局变量（定义FWK前不加var） FWK

它们的区别在哪里呢？更提倡何种写法？

使用var 定义的变量，将被提前预解析，如下的代码：

<script type="text/javascript">
alert(FWK);

FWK	= 'ddd';
</script>

<script type="text/javascript">
alert(FWK);

window.FWK	= 'ddd';
</script>

<script type="text/javascript">
alert(FWK);

var FWK	= 'ddd';
</script>

其它的二种声明方法，将会被告知FWK未定义(FWK is not defined)

看看这三种声明的方式，是否能被for in出来：

<script type="text/javascript">
window.FWK = 'ddd';

for (var i in window) {
	if (i === 'FWK') {
		alert(i + '---' + window[i]);
	}	
}
</script>

<script type="text/javascript">
FWK	= 'ddd';

for (var i in window) {
	if (i === 'FWK') {
		alert(i + '---' + window[i]);
	}	
}
</script>

<script type="text/javascript">
var FWK	= 'ddd';

for (var i in window) {
	if (i === 'FWK') {
		alert(i + '---' + window[i]);
	}	
}
</script>

除了window.FWK的方式能被for in 出来，其它二种均不行。

再看看它们是否能被delete：

<script type="text/javascript">
var FWK	= 'ddd';

alert(	delete FWK	);

alert(FWK);
</script>

显示false ddd，说明var 声明的变量无法使用delete

<script type="text/javascript">
FWK	= 'ddd';

alert(	delete FWK	);

alert(FWK);
</script>

显示true FWK未定义，说明隐式声明的全局变量可以被delete，与global对象的parseInt、escape、parseFloat等等类似，可直接被delete。

<script type="text/javascript">
alert(parseInt);
alert(delete parseInt);
alert(parseInt);
</script>

<script type="text/javascript">
window.FWK	= 'ddd';

alert(	delete FWK	);
alert(FWK);
</script>

IE下会提示，其它浏览器Chrome、FireFox可以被删除，表现上与隐式声明的变量一致。

但IE下为何会提示对象不支持此操作呢？

根据《Javascript编程精髓和编程实践》中的说明，IE的Javascript引擎来自ActiveScript系统，而window对象来自浏览器的DOM系统，所以在IE中window.x使用delete类似于下面的操作：

<script type="text/javascript">
var div = document.createElement("div");

div.x = 'ddd';

alert(delete div.x);
</script>

当然是不可以了，而其它浏览器它们的Javascript引擎不像IE这么复杂，所以并不会出现此问题。

既然提到了delete操作符，那就再深入一点 :)

使用eval直接声明的var变量可以被delete

<script type="text/javascript">
eval('var FWK = "abc";');

alert(FWK);

alert(delete FWK);

alert(FWK);
</script>

其中eval本身就属于Global对象，但对于eval代码中的函数内通过var声明的变量却不能被delete。如下：

<script type="text/javascript">
var k = eval("(function() { var FWK = 42; alert(delete FWK); return FWK; })();")

alert(k);
</script>

码农公寓