JavaScript语言基础(一) 变量定义

最新推荐文章于 2024-07-11 20:55:36 发布

iteye_11480

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量140

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近又重新再看了一遍《javascript从入门到精通》，整理一些学习笔记，从另一个侧面，从平时使用中经常遇到的概念和问题来学习一遍javascript。

都知道变量定义统一都是var;变量命名也由相应规范：

首先avaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则：

1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)

2.后续的字符可以是字母、数字、下划线或美元符。

3.变量名称不能是保留字。

但这里不得不提一下变量作用域的概念。

作用域：编程语言通用概念，可以简单理解为定义的变量有效使用的范围

一、在js里，如果变量定义在function里，如

<html>
<head>
<title>test</title>
<script type="text/javascript">
function test() {
var param = "hello world!";
alert(param);//页面弹出提示框显示"hello world!"
}
/*
 浏览器控制台会报错 ReferenceError: param is not defined;
 因为param超出了其作用域;即param只在function test内有效,
  	  在外部相当于不存在一样
 * */
alert(param);
</script>
</head>
<body οnlοad="test()">
</body>
</html>

二、如果在相同作用域中定义了2个名称一样的变量，那第二个变量将覆盖前一个，包括类型的覆盖。

<html>
<head>
<title>test</title>
<script type="text/javascript">
function test() {
var param = "hello world!";
alert(param);//页面弹出提示框显示"hello world!"
var param =100;
alert(param);//因为变量名称重复，因此会覆盖,显示"100"
}
</script>
</head>
<body οnlοad="test()">
</body>
</html>

此规则同样适用于方法名的定义，例如

<html>
<head>
<title>test</title>
<script type="text/javascript">
function test() {
var param = "hello world!";
alert(param);//页面弹出提示框显示"hello world!"
}
function test() {
var param =100;
alert(param);//方法的覆盖，最终执行的是这个方法,显示"100"
}
</script>
</head>
<body οnlοad="test()">
</body>
</html>

三、如果在function外部定义的变量，就会作为全局变量，会被当前页面的所有js共享。所以一定要慎用全局变量。这里又不得不提一点，整个页面引入的js，或者页面中script标签中写的js，可以简单的想象为这些js其实相当在一个js文件中；所有的全局方法名和全局变量名都要保证不冲突。

有时候在2个js文件中实现了2中业务逻辑，然后在一个页面中同时引这2个js；如果全局名称重复，就经常出现莫名的问题。

这里又不得不提及一下关于变量的"命名空间"问题。所谓"命名空间"，可以简单的理解为：为了解决全局变量名带来的问题，所谓为每个变量名分配自己的空间(这个概念所有语言是相同的)，这样变量在自己空间里定义，不管叫什么都不会影响其他空间内的变量。(当然如果你可以在自己项目中，对每个js中变量的定义都有规范，可以忽略此条；但一般估计不会)。关于如何实现命名空间后面再详细说明。

这里又会问了，我写了那么多js，肯定出现了同样名称的变量，为啥没出问题了。这里要强调的是，在当前页面中。就像页面中的id属性一样，理论上应该在整个浏览器显示出来的当前页面中都不重复(frame页面另说)，但2个页面中相同的id,浏览地址切换了，当然上个页面就不存在了。因此id肯定也不冲突。

但要注意一些js的tabpanel框架，例如Extjs的tabpanel。虽然它展现了我们编写的不同页面，但实际这些页面都在当前一个页面中(直观的说因为浏览地址没有改变;frame页面另说)，因此你就要注意所有的页面中的id，js中的变量名，方法名都不能重复。

<html>
<head>
<title>test</title>
<script type="text/javascript">
var param = "hello world!";
function test() {
test1();
test2();
}
function test1(){
alert(param);//页面弹出提示框显示"hello world!"
}
function test2(){
alert(param);//页面弹出提示框显示"hello world!"
}
</script>
</head>
<body οnlοad="test()"></body>
</html>

但全局变量被覆盖的情况有个神奇的地方;如下

<html>
<head>
<title>test</title>
<script type="text/javascript">
var param = "hello world!";
function test() {
alert(param);//页面弹出提示框显示"undefined"
/*
 这是一个神奇的情况,如果方法内定义了与全局变量同名的变量,
 那上边的alert显示的其实是undefined,在对param赋值后
 alert的结果是"100"
 * */
var param =100;
alert(param);
}
</script>
</head>
<body οnlοad="test()"></body>
</html>

四、如果定义变量时没有加上var,将会有自动补全的效果,就好像是你已经写了var一样。例如

<html>
<head>
<title>test</title>
<script type="text/javascript">
function test() {
param = "hello world!";
alert(param);//页面弹出提示框显示"hello world!"
}
alert(param);//浏览器控制台会报错 ReferenceError: param is not defined;
</script>
</head>
<body οnlοad="test()"></body>
</html>

iteye_11480

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语言基础(一) 变量定义

最近又重新再看了一遍《javascript从入门到精通》，整理一些学习笔记，从另一个侧面，从平时使用中经常遇到的概念和问题来学习一遍javascript。都知道变量定义统一都是var;变量命名也由相应规范：首先avaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。另外，变量名称的长度是任意的，但必须...
复制链接

扫一扫