web前端学习（三十四）——JavaScript对象、函数及作用域（全局变量、局部变量）的相关设置

原创已于 2024-04-24 11:29:21 修改 · 8.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #javascript

于 2021-02-14 11:04:25 首次发布

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了JavaScript中的对象、函数及其作用域。JavaScript对象是键值对的容器，可以通过点号或方括号语法访问属性。对象方法是作为属性存储的函数，可通过调用来执行。函数是可执行的代码块，可以接受参数并返回值。局部变量在函数内部声明，全局变量在整个页面中可访问。未声明的变量会自动成为全局变量，与window对象关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JS对象

JavaScript 对象是拥有属性和方法的数据。在JavaScript中，几乎所有的事物都是对象。（这和Java一样啊，万物皆对象！！！）

可以使用字符来定义和创建 JavaScript 对象，定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的。

可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。

这里的键值对的写法类似于：C语言中的哈希表、Java中的哈希映射、Python中的字典。

1.1 访问对象属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>创建 JavaScript 对象</p>
		<p id="demo"></p>
		<script>
			var person={
				hisName: "zhangsan",
				hisSex: "男",
				hisAge: 25,
				hisHobby: "sleep"
			};
			document.getElementById("demo").innerHTML=
				"姓名：" + person.hisName + "，性别：" + person.hisSex + "，年龄：" + person.hisAge + "，爱好：" + person.hisHobby + "。";
			//也可以写为 person["hisName"]，后面的属性类似
		</script>
	</body>
</html>

1.2 访问对象方法

对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。

调用方法时，如果是对象.方法()，此时正常返回方法执行的结果；如果是对象.方法，此时返回方法的定义。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>创建和使用对象方法。</p>
		<p>对象方法作为一个函数定义存储在对象属性中。</p>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<script>
			var person={
				hisName: "zhangsan",
				hisSex: "男",
				hisAge: 25,
				hisHobby: "sleep",
				fullInformation: function() {
					return this.hisName + "，" + this.hisSex;
				}
			};
			document.getElementById("demo1").innerHTML="不加括号输出函数表达式：" + person.fullInformation;
			document.getElementById("demo2").innerHTML="加括号输出函数执行结果：" + person.fullInformation();
		</script>
	</body>
</html>

2.JS函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

2.1调用带参数的函数

在调用函数时，可以向其传递值，这些值被称为参数，这些参数可以在函数中使用，也可以发送任意多的参数，由逗号 (,) 分隔。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击下面这个按钮，来调用带参数的函数。</p>
		<button type="button" onclick="myFunction('我爱编程','Hello World!!!')">按钮</button>
		<script>
			function myFunction(first,second) {
				alert("主信息：" + first + "，附加信息：" + second);
			}
		</script>
	</body>
</html>

2.2 带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>本例调用的函数会执行一个计算，然后返回结果：</p>
		<p id="demo"></p>
		<script>
			function myFunction(a,b) {
				return a*b;
			}
			document.getElementById("demo").innerHTML=myFunction(5,6);
		</script>
	</body>
</html>

当仅仅希望退出函数时，也可使用 return 语句。返回值是可选的。

如果 a 大于 b，则下面的代码将退出函数，并不会计算 a 和 b 的总和。

function myFunction(a,b) {
    if (a>b) {
        return;
    }
    x=a+b;
}

3.JS作用域

作用域是可访问变量的集合。

在 JavaScript 中, 对象和函数同样也是变量，作用域为可访问变量，对象，函数的集合，函数作用域：作用域在函数内修改。

3.1 JS局部变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。局部变量会在函数运行以后被删除。因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>局部变量在声明的函数外不可以访问。</p>
		<p id="demo"></p>
		<script>	
			function myFunction() {
				var color="red";
			}
			document.getElementById("demo").innerHTML="局部变量color的类型是：" + typeof color;
		</script>
	</body>
</html>

3.2 JS全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>全局变量在任何脚本和函数内均可访问。</p>
		<p id="demo"></p>
		<script>
			var color="red";
			function myFunction() {
				document.getElementById("demo").innerHTML=
					"函数体内部可以访问到全局变量color：" + color;
			}
			myFunction();
		</script>
	</body>
</html>

3.3 未声明的JS变量将自动转为全局变量

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>如果你的变量没有声明，它将自动成为全局变量：</p>
		<p id="demo"></p>
		<script>
			function myFunction() {
				color="red";
			}
			myFunction();
			document.getElementById("demo").innerHTML="可以访问到全局变量color：" + color;
		</script>
	</body>
</html>

3.4 HTML中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>在HTML中, 所有全局变量都会成为window变量。</p>
		<p id="demo"></p>
		<script>
			function myFunction() {
				color="red";
			}
			myFunction();
			document.getElementById("demo").innerHTML="可以访问到全局变量color：" + window.color;
		</script>
	</body>
</html>