作用域：

作用域，顧名思義，作用的區域，也就是變數和函式的作用的區域。
作用域的作用就是隔離變數，不同作用域下同名變數不會有衝突。
舉例說明。

// 在函式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檔案的變數";

index.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

// 定義名稱空間
// 將變數x的值賦值給變數x，由於變數x的值為undefined，所以將空物件{}賦值給x
var NAMESPACE1 = NAMESPACE1 || {};
// 定義名稱空間中的變數
NAMESPACE1.str = "第一個.js檔案的變數";

index2.js

// 定義名稱空間
var NAMESPACE2 = NAMESPACE2 || {};
// 定義名稱空間中的變數
NAMESPACE2.str = "第二個.js檔案的變數";

index.html

<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都加上名稱空間，在使用其中變數的時候，也加上名稱空間，這樣就不會造成變數衝突的問題。

個人學習總結，歡迎批評指正