本篇文章來簡單介紹一下JS作用域，以及BOM對象中的三個基礎對象，分別是window對象、history對象和location對象。
一、JS作用域
1、函數嵌套作用域
//函數作用域
var place="Beijing"; //外部定義的變量
function outer()
{
var place="Chengdu"; //outer函數下的重新定義
function inner()
{
var place="Guangzhou"; //inner函數下的定義
console.log(place);
}
inner();
}
// //調用outer函數，同時會執行inner函數
outer();
執行結果：
Guangzhou
2、函數多調用
var name="路飛";
function bar()
{
console.log(name);
}
function func()
{
var name="索隆";
return bar;
}
var ret=func(); //將func函數執行的返回結果賦值給ret變量，即ret將代表bar函數
ret(); //調用ret函數，即bar函數
//又因爲bar函數的作用域在外部，與它同級的name變量值爲“路飛”
執行結果：
路飛
二、window窗口
1、BOM簡介
BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。使 JavaScript 有能力與瀏覽器“對話”。
2、window對象方法彙總
- alert() 顯示帶有一段消息和一個確認按鈕的警告框。
window.alert("歡迎訪問！");
- confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
var ret= window.confirm("您確定要訪問嗎？"); //由用戶做出選擇，因此有一個返回值
console.log(ret);
- prompt() 顯示可提示用戶輸入的對話框。
var ret= window.prompt("您的訪問指令："); //要去用戶輸入內容，在控制檯顯示
console.log(ret);
- open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。（不常用）
- close() 關閉瀏覽器窗口。（不常用）
- setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
- clearInterval() 取消由 setInterval() 設置的 timeout。
setInterval(func,1000); //表示每隔1000毫秒（1秒）執行一次函數func()
function func()
{
console.log("Hello JavaScript！");
}
可以看到這個地方會一直有"Hello JavaScript！"的出現。
下面是由setInterval和clearInterval實現的動態時間更新小案例…
JS（<script>標籤內的）代碼：
showTime();
function showTime()
{
var current_time=new Date().toLocaleString(); //獲取當前時間並將其轉化成字字符串顯示
// alert(current_time);
var ele=document.getElementById("id1"); //獲取id1這個標籤的內容
ele.value=current_time; //將獲取的id1標籤的內容設置爲輸入框的值，實現動態更新時間
}
var click1
function begin()
{
if(click1==undefined) //防止多個click串行
{
showTime(); //實現無延遲效果
click1= setInterval(showTime,1000); //實現一秒更新一次時間
}
}
function end()
{
clearInterval(click1); //清除定時間隔
}
外部再加兩個標籤：
<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止！</button> <!-- 綁定一個end函數 -->
- setTimeout() 在指定的毫秒數後調用函數或計算表達式。
- clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
function func()
{
console.log("別點我了！");
}
var c= setTimeout(func,3000); //三秒鐘之後只執行一次
//清除setTimeout 的內容
// clearTimeout(c);
scrollTo() 把內容滾動到指定的座標。（少用）
三、history對象
1、簡介
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
2、history對象的方法
- back() 加載 history 列表中的前一個 URL。
- forward() 加載 history 列表中的下一個 URL。
- go() 加載 history 列表中的某個具體頁面。
3、測試代碼
history1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="JS之history2.html">通往history2</a>
<button onclick="history.forward()"> >>>>>>>> </button>
<script>
</script>
</body>
</html>
history2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="history.back()">Back</button>
</body>
</html>
這樣就可以實現一個基本的前進和返回的效果（這個其實也不太常用)
四、location對象
1、簡介
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
2、location下的方法
- location.assign(URL)
- location.reload()
- location.replace(newURL)//注意與assign的區別
3、測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="f()">點我！</button>
<script>
function f1()
{
// location.assign("www.baidu.com"); //默認跳轉的頁面
// location.reload(); //刷新當前頁面
location.replace("www.baidu.com"); //替換當前頁面
//assign可以後退，replace不行
}
</script>
</body>
</html>