跟着pink老师学前端之JavaScript-BOM_pink老师博客同步异步-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46548238/article/details/118346978

本文详细介绍了JavaScript的BOM，包括BOM的构成、window对象的事件（如窗口加载和调整大小）、定时器的使用、this关键字的理解、JS执行机制以及location对象和history对象的应用。通过案例解析了如何实现页面自动跳转和数据传递等功能。

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

文章目录

@[toc]

1. BOM概述
1.1 什么是BOM
1.2 BOM的构成

2. window对象的常见事件
2.1 窗口加载事件
2.2 调整窗口页面大小事件

3. 定时器（回调函数）
3.1 setTimeout
3.2 setInterval
3.3 倒计时案例
3.4 发送验证码案例

4. this
5. JS执行机制
5.1 JS是单线程
5.2 同步和异步
同步
同步任务

异步
异步任务

本质区别

5.3 JS执行机制

6. location对象
6.1 什么是location对象
6.2 URL
6.3 location对象的属性
5秒钟自动跳转页面案例
跳转页面案例

6.4 location对象的方法

7. nevigator对象
8. history对象

1. BOM概述

1.1 什么是BOM

BOM ( BrowserObject Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

1.2 BOM的构成

window对象是浏览器的顶级对象，它具有双重角色。

它是JS访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。

2. window对象的常见事件

2.1 窗口加载事件

window.onload = function () {};
或者
window.addEventListener('load',function(){});

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

2.2 调整窗口页面大小事件

resize

3. 定时器（回调函数）

3.1 setTimeout

window.setTimeout(调用函数，延时时间);
延时单位是毫秒，可省略，默认是0；

这个调用函数可以直接写函数，还可以写函数名。

3.1 直接写函数

setTimeout(function () {
     console.log('时间到了');
}, 2000);

3.2 写函数名

function callback() {
    console.log('爆炸了');
}
setTimeout(callback, 3000);

清除定时器clearTimeout(定时器名字)

因为清除定时器要指明清除哪个定时器，所以要给定时器起一个名字，即赋值给一个变量。

var btn = document.querySelector('button');
var timer = setTimeout(function () {
    console.log('boom!');
}, 5000);
btn.addEventListener('click', function () {
    clearTimeout(timer);
})

3.2 setInterval

window.setTimeout(调用函数，延时时间);

setInterval(function () {
    console.log('im setinterval');
}, 2000);

延时单位是毫秒，可省略，默认是0；
与setTimeout不同的是，setInterval是每隔“延时时间”间隔就调用一次，属于重复调用。

清除定时器clearInterval(定时器名字)

<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null;
    begin.addEventListener('click', function () {
        timer = setInterval(function () {
            console.log('riki');
        }, 1000);
    })
    stop.addEventListener('click', function () {
        clearInterval(timer);
    })
</script>

3.3 倒计时案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 150px;
            height: 200px;
            margin: 100px auto;
        }

        li {
            width: 30px;
            height: 30px;
            color: white;
            background-color: rgb(27, 25, 25);
            float: left;
            margin-right: 3px;
            list-style: none;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="day"></li>
        <li class="hour">1</li>
        <li class="minute">2</li>
        <li class="second">3</li>
    </ul>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var targetTime = +new Date('2021-7-13 7:10:00');   // 目标时间总毫秒数
        setInterval(countDown); // 先调用一次，防止刷新页面后有一秒的空白
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();   // 当前时间总毫秒数
            var times = (targetTime - nowTime) / 1000;  // 剩余时间总秒数
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60)
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

3.4 发送验证码案例

在我们点击发送验证码按钮后一般会出现按钮禁用的效果。

<body>
    手机号码：<input type="number">
    <button>发送验证码</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;// 定义剩下的秒数
        btn.addEventListener('click', function () {
            btn.disabled = true;    //禁用按钮
            var timer = setInterval(function () {
                // 如果到时间了，恢复初始状态：清除定时器，取消禁用按钮，改变按钮中的文字，恢复剩下的秒数
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送验证码';
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000)
        })
    </script>
</body>

4. this

全局作用域或普通函数中this指向全局对象window，因为我们一般调用函数的完整写法应该是window. xx。定时器中的this也是指向window。

console.log(this);  //window
function fn() {
    console.log(this);
}
window.fn();    //window
window.setTimeout(function () {
    console.log(this);  //window
}, 1000)

方法调用中谁调用this指向谁

var o = {
    sayHi: function () {
        console.log(this);  //sayHi这个对象
    }
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this);  // btn
}

构造函数中this指向构造函数的实例

function Fun() {
    console.log(this);
}
var fun = new Fun();    // Fun这个对象

5. JS执行机制

5.1 JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——Javacript 是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

5.2 同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTMLS提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后)，再去切菜，炒菜。

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

异步任务

JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型：

普通事件，如：click、resize等；
资源加载，如：load、error等；
定时器，包括：setTimeout、setInterval等。

异步任务相关回调函数添加到任务队列中（也称消息队列。

本质区别

这条流水线上各个流程的执行顺序不同。

5.3 JS执行机制

先执行执行栈中的同步任务。
异步任务（回调函数）放入任务队列中。
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

当有多个异步任务时，会将异步任务交给异步进程处理程序，如果回调函数被调用了（比如说点击了按钮，定时器时间到了），那么就将此异步任务写在任务队列中，等待同步任务执行完成后，进入执行栈执行。由于主线程不断地重复获得任务、执行任务、再获取、再执行，所以这种机制被称为==事件循环（event loop）==。
在这里插入图片描述

6. location对象

6.1 什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

6.2 URL

统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#1ink

组成	说明
protocol	通信协议，常用的http、ftp、maito等
host	主机（域名）
port	端口号（可选），省略时使用方案的默认端口
path	路径，由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式,通过&符号分隔开来
fragment	片段，#后面内容常见于链接锚点

6.3 location对象的属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面内容常见于锚点链接

5秒钟自动跳转页面案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>click</button>
    <div></div>
    <script>
        var time = 5;
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            location.href = 'http://www.baidu.com';
        })
        downCount();
        setInterval(downCount, 1000);
        function downCount() {
            if (time === 0) {
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '页面将在' + time + '秒后为您跳转...';
                time--;
            }
        }
    </script>
</body>

</html>

跳转页面案例

第一个登录页面，里面有提交表单，action提交到index.html页面。
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
在第二个页面中，需要把这个参数提取。
第一步去掉?利用substr(‘起始位置’,截取几个字符)
第二步利用=号分割键和值split( ‘=’ )

<form action="index.html">
    用户名：<input type="text" name='uname'>
    <input type="submit" value='登录'>
</form>

index.html

<div></div>
<script>
    console.log(location.search);    // ?uname=riki
    // 1. 先去掉? substr('起始位置',截取几个字符)
    var params = location.search.substr(1);
    console.log(params);    // uname=riki
    // 2. 利用=把字符分割成数组
    var arr = params.split('=');
    console.log(arr);
    var div = document.querySelector('div');
    div.innerHTML = '亲爱的' + arr[1] + '欢迎您';
</script>

6.4 location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面，记录历史，可以实现后退功能
location.replace()	替换当前页面，不记录历史，不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者F5，如果参数为true，相当于强制刷新

7. nevigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转。

if ((navigator.userAqent.match(/(phoneIpad/pod | iPhone | iPod | ios | iPad | Android | Mobile | BlackBerry | IEMobile | MQQBrowser | JUc | Fennec | wOSBrowser | BrowserNG | WebOS | Symbian | WindowsPhone) / i))) {
    window.location.href = "";  //手机
} else {
    window.location.href = ""; // 电脑
}