- HTML5权威指南
- (美)Adam Freeman
- 2367字
- 2020-08-29 00:57:11
5.4 使用变量和类型
定义变量要使用var关键字，在定义的同时还可以像在一条单独的语句中那样为其赋值。定义在函数中的变量称为局部变量，只能在该函数范围内使用。直接在script元素中定义的变量称为全局变量，可以在任何地方使用——包括在其他脚本中。代码清单5-6示范了局部变量和全局变量的用法。
代码清单5-6 使用局部变量和全局变量
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myGlobalVar = "apples";
function myFunc(name) {
var myLocalVar = "sunny";
return ("Hello " + name + ". Today is " +myLocalVar+ ".");
};
document.writeln(myFunc("Adam"));
</script>
<script type="text/javascript">
document.writeln("I like " +myGlobalVar);
</script>
</body>
</html>
JavaScript是一种弱类型语言，但这不代表它没有类型，而是指不用明确声明变量的类型以及可随心所欲地用同一变量表示不同类型的值。JavaScript根据赋给变量的值确定其类型，还可以根据使用场景在类型间自由转换。代码清单5-6的输出结果如下：
Hello Adam. Today is sunny. I like apples
5.4.1 使用基本类型
JavaScript定义了一小批基本类型（primitive type），它们包括字符串类型（string）、数值类型（number）和布尔类型（boolean）。这看起来可能有点少，但JavaScript的这三种类型具有很大的灵活性。
1．字符串类型
string类型的值可以用夹在一对双引号或单引号之间的一串字符表示，如代码清单5-7所示。
代码清单5-7 定义字符串变量
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstString = "This is a string";
var secondString = 'And so is this';
</script>
</body>
</html>
表示字符串时使用的引号要匹配。例如，字符串前端用单引号而后端用双引号是不行的。
2．布尔类型
boolean类型有两个值：true和false。代码清单5-8中这两个值都用到了，这个类型最重要的使用场合是本章稍后将要讲到的条件语句。
代码清单5-8 定义布尔变量
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var firstBool = true;
var secondBool = false;
</script>
</body>
</html>
3．数值类型
整数和浮点数（也称实数）都用number类型表示，代码清单5-9示范了其用法。
代码清单5-9 定义数值变量
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var daysInWeek = 7;
var pi = 3.14;
var hexValue = 0xFFFF;
</script>
</body>
</html>
定义number类型变量时不必言明所用的是哪种数值，只消写出需要的值即可，JavaScript会酌情处理。上例先后使用了一个整数、一个浮点数和一个以0x开头的十六进制数。
5.4.2 创建对象
JavaScript支持对象的概念。有多种方法可以用来创建对象，代码清单5-10是一个简单的例子。
代码清单5-10 创建对象
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = new Object();
myData.name = "Adam";
myData.weather = "sunny";
document.writeln("Hello " + myData.name + ". ");
document.writeln("Today is " + myData.weather + ".");
</script>
</body>
</html>
此例通过调用new Object()的方式创建了一个对象，然后将其赋给一个名为myData的变量。在此之后，即可像这样通过赋值的方式定义其属性：
myData.name = "Adam";
在这条语句之前，对象并没有一个名为name的属性。这条语句执行之后就有了这个属性，而且其值已被设置为Adam。像这样用变量名后加一句点再加属性名的方式就能获取该属性的值：
document.writeln("Hello " +myData.name+ ". ");
1．使用对象字面量
用对象字面量的方式可以一口气定义一个对象及其属性，代码清单5-11示范了其做法。
代码清单5-11 使用对象字面量
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny"
};
document.writeln("Hello " + myData.name + ". ");
document.writeln("Today is " + myData.weather + ".");
</script>
</body>
</html>
从代码清单中可以看到，属性的名称和值之间以冒号（:）分隔，而各个属性之间又以逗号（,）分隔。
2．将函数用做方法
对象可以添加属性，也能添加函数。属于一个对象的函数称为其方法。这是我最喜欢的一大JavaScript特性。我也不知道为什么，反正就是觉得这个特性很优雅，总是那么招人喜爱。代码清单5-12示范了如何以这种方式添加方法。
代码清单5-12 为对象添加方法
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
printMessages: function() {
document.writeln("Hello " + this.name + ". ");
document.writeln("Today is " + this.weather + ".");
}
};
myData.printMessages();
</script>
</body>
</html>
此例将一个函数变成了一个名为printMessages的方法。注意，在方法内部使用对象属性时要用到this关键字。函数作为方法使用时，其所属对象会以关键字this的形式作为一个参数被传给它。上述代码清单的输出结果如下所示：
Hello Adam. Today is sunny.
提示
在创造和管理对象方面JavaScript还有许多招数可用，不过在讨论HTML5的时候还用不着这些特性。有意深入钻研这门语言的读者可以去读一下本章开头推荐的书。
5.4.3 使用对象
创建对象之后，可以用来做许多事。本节将介绍一些本书后面经常会用到的方法。
1．读取和修改属性值
对象最显而易见的操作是读取或修改属性值。这些操作有两种不同的语法形式，如代码清单5-13所示。
代码清单5-13 读取和修改对象属性值
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
};
myData.name = "Joe";
myData["weather"] = "raining";
document.writeln("Hello " +myData.name+ ".");
document.writeln("It is " +myData["weather"]);
</script>
</body>
</html>
第一种形式大多数程序员都很熟悉，前面的例子用的也是这种形式。其做法是像这样用句点将对象名和属性名连接在一起：
myData.name = "Joe";
第二种形式类似数组索引，如下所示：
myData["weather"] = "raining";
在这种形式中，属性名作为一个字符串放在一对方括号之间。这种存取属性值的办法非常方便，这是因为此法可用变量表示属性名。如下所示：
var myData = {
name: "Adam",
weather: "sunny",
};
var propName = "weather";
myData["propName"] = "raining";
在此基础上才能枚举对象属性，下面就来谈这个话题。
2．枚举对象属性
要枚举对象属性可以使用for...in语句。代码清单5-14示范了其用法。
代码清单5-14 枚举对象属性
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
printMessages: function() {
document.writeln("Hello " + this.name + ". ");
document.writeln("Today is " + this.weather + ".");
}
};
for (var prop in myData) {
document.writeln("Name: " + prop + " Value: " + myData[prop]);
}
</script>
</body>
</html>
for...in循环代码块中的语句会对myData对象的每一个属性执行一次。在每一次迭代过程中，所要处理的属性名会被赋给prop变量。例中使用类数组索引语法（即使用方括号[和]）获取对象的属性值。代码清单的输出结果如下所示（格式上已做调整，以便阅读）：
Name: name Value: Adam
Name: weather Value: sunny
Name: printMessages Value: function () { document.writeln("Hello " + this.name + ". ");
document.writeln("Today is " + this.weather + "."); }
从中可以看到，作为方法定义的那个函数也被枚举出来了。JavaScript在处理函数方面非常灵活，方法本身也被视为对象的属性，这就是其结果。
3．增删属性和方法
就算是用对象字面量生成的对象，也可以为其定义新属性。代码清单5-15即为一例。
代码清单5-15 为对象添加新属性
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
};
myData.dayOfWeek = "Monday";
</script>
</body>
</html>
上例中为对象添加了一个名为dayOfWeek的新属性。这里使用的是圆点表示法（用句点将对象和属性的名称连接在一起），不过用类数组索引表示法也没什么不可以。
读者看到此处可能会猜到：通过将属性值设置为一个函数也能为对象添加新方法。代码清单5-16即是一例。
代码清单5-16 为对象添加新方法
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
};
myData.sayHello = function() {
document.writeln("Hello");
};
</script>
</body>
</html>
对象的属性和方法可以用delete关键字删除，如代码清单5-17所示。
代码清单5-17 删除对象的属性
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
};
myData.sayHello = function() {
document.writeln("Hello");
};
delete myData.name;
delete myData["weather"];
delete myData.sayHello;
</script>
</body>
</html>
4．判断对象是否具有某个属性
可以用in表达式判断对象是否具有某个属性，如代码清单5-18所示。
代码清单5-18 检查对象是否具有某个属性
<! DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny",
};
var hasName = "name" in myData;
var hasDate = "date" in myData;
document.writeln("HasName: " + hasName);
document.writeln("HasDate: " + hasDate);
</script>
</body>
</html>
此例分别用一个已有的和一个没有的属性进行测试。hasName变量的值会是true，而hasDate变量的值会是false。