JavaScript踩坑笔记03---作用域、命名空间

作用域：

作用域，顾名思义，作用的区域，也就是变量和函数的作用的区域。
作用域的作用就是隔离变量，不同作用域下同名变量不会有冲突。
举例说明。

// 在函数fn外部定义一个字符串
var str = "Hello";

function fn() {
	// 在函数fn内部再定义一个字符串
	var str = "JavaScript!";
	// 在函数fn内部再定义一个数值
	var num = 11;

	console.log(str); // JavaScript
	console.log(num); // 11
}

console.log(str); // Hello
console.log(num); // ReferenceError: num is not defined

在上述例子中，我在函数fn外部和内部各定义了一个变量str，结果在函数外部输出外部str变量的值，在函数内部输出内部str变量的值。当在函数外部输出函数内部num变量的值时，程序报错。
也就是说，函数内部的变量，无法在外部调用，函数创建了一个作用域。
在JavaScript中，除了全局作用域之外，只有函数可以创建作用域。

命名空间：

命名空间的作用和作用域的作用相同，它们都是为了隔离变量。
在编写html页面时，我们会引入多个.js文件，假设这些.js文件都有一个相同变量名的变量，那么在使用这个变量的时候，程序很可能不知道我们到底要用那个变量。

index1.js

var str = "第一个.js文件的变量";

index2.js

var str = "第二个.js文件的变量";

page.html

<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script>
	console.log(str); // 第二个.js文件的变量
</script>

假设我现在需要使用index1.js文件中的变量，但是程序输出的是index2.js文件中的变量，这就是变量名的冲突。
原因是，我先引入了index1.js，然后又引入了index2.js，程序由上到下执行，index1.js中的str变量，被index2.js中的变量覆盖，所以输出的是index2.js中的str变量。
假设我现在同时需要index1.js和index2.js这两个文件，但是我又不希望这两个文件中的变量冲突。
命名空间就是专门用来解决变量冲突的问题。
index1.js

// 定义命名空间
// 将变量xxx的值赋值给变量xxx，由于变量xxx的值为undefined，所以将空对象{}赋值给xxx
var NAMESPACE1 = NAMESPACE1 || {};

// 定义命名空间中的变量
NAMESPACE1.str = "第一个.js文件的变量";

index2.js

// 定义命名空间
// 将变量xxx的值赋值给变量xxx，由于变量xxx的值为undefined，所以将空对象{}赋值给xxx
var NAMESPACE2 = NAMESPACE2 || {};

// 定义命名空间中的变量
NAMESPACE2.str = "第二个.js文件的变量";

page.js

<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script>
	// 使用变量时，也要加上命名空间
	console.log(NAMESPACE1.str); // 第一个.js文件的变量
	console.log(NAMESPACE2.str); // 第二个.js文件的变量
</script>

我现在给index1.js和index2.js都加上命名空间，在使用其中变量的时候，也加上命名空间，这样就不会造成变量冲突的问题。
其实命名空间的本质就是一个对象，我们将要用的属性和方法放入其中，每次以对象名.属性名的方式使用。

---

个人学习总结，欢迎批评指正