BOM概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

那我DOM和BOM的区别是什么呢？

DOM是文档对象模型 DOM 就是把「文档」当做一个「对象」来看待 DOM 的顶级对象是document DOM 主要学习的是操作页面元素 DOM 是W3C 标准规范

BOM浏览器对象模型 把「浏览器」当做一个「对象」来看待 BOM 的顶级对象是window BOM 学习的是浏览器窗口交互的一些对象 BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

window对象是浏览器的顶级对象，它具有双重角色。 1.它是JS 访问浏览器窗口的一个接口。 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，对话框都属于window 对象方法，如alert()、prompt()等。 注意：window下的一个特殊属性window.name

window对象的常见事件

• 窗口加载事件

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

window.onload 是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数 有了window.onload 就可以把JS 代码写到页面元素的上方，因为onload 是等页面内容全部加载完毕，再去执行处理函数。 window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload 为准。 如果使用addEventListener 则没有限制

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。 Ie9以上才支持如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded 事件比较合适。

• 调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

定时器

两种定时器 setTimeout和setInterval接下来来介绍他们的区别

• setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器。

可以理解为延迟一定时间，才去做某事。其中有一个回调函数，我们简单把回调函数理解为上一件事干完，再回头调用的这个函数 element.addEventListener(“click”, fn); 这个点击事件的fn就可以理解为回调函数，必须等这个元素被点击后，才会调用这个函数

    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>

这个代码表示5秒钟后关闭这个图片。并且有一个停止计时器的操作，我们使用clearTimeout就可以啦！停止计时器可以减少占用的资源，提升浏览器速度。

• setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>

同样的我们可以用clearInterval来清除定时器。简单介绍一下this的使用

this的指向在函数定义的时候是确定不了的 只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象现阶段，我们先了解一下几个this指向 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） 方法调用中谁调用this指向谁 构造函数中this指向构造函数的实例

  <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);
        }, 1000);
  --------------------------------------------------------------
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象
----------------------------------------------------------------
            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>

JS执行机制

我在以前的文章中已经做过详细讲述，在此只进行补充事件循环的概念

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。

location对象

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

我们用的最多的就是href和search，就比如下面的代码表示点击后跳转到指定页面

        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.baidu.cn';
        })

    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.baidu.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.baidu.cn');
            location.reload(true);
        })
    </script>

navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent 头部的值。下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href = "";     //手机
} else {
 window.location.href = "";     //电脑
}

history对象

window 对象给我们提供了一个history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL