JavaScript之BOM对象（JS函数作用域、window、history、location对象）

文章目录

一、JS作用域
二、window窗口
三、history对象
四、location对象

本篇文章来简单介绍一下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);

扫描二维码关注公众号，回复： 11238819 查看本文章

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>