BOM概述，window对象

BOM概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。

• 把浏览器当做一个对象来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的对象

BOM的组成

BOM包含着DOM

window对象

• window对象是浏览器的顶级对象
• window是JS访问浏览器窗口的一个接口
• window是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，但在调用的时候可以省略window，如alert（），console.log()等都属于window的方法。
• window有一个特殊的属性：window.name,因此不能把变量命名为name

window对象的常见事件

1. 窗口加载事件（load、DOMContentLoad）

• window.onload,窗口（页面）加载事件，当文档内容完全加载完成就会触发该事件（包括图像、脚本文件等）然后调用相关的处理函数。

有onload以后就可以把JS的代码写到页面元素代码的上方，因为页面元素全部加载完毕之后就会执行onload的处理函数；

如果用传统的注册方式，onload只能写一次，有多个的话就以最后一个为准

//传统注册方式
<script>
//注意不能把btn写在onload函数外，因为这个时候还没加载到button那儿去，btn即使获取了事件源也为null
//var btn = document.querySelector('button');   
window.onload = function(){
//应该写在里面
    var btn = document.querySelector('button');  
    btn.addEventListener('click',function(){
        alert('123');
        })
       }
    </script>
    <button>123</button>

//方法监听注册方式
    <script>
       window.addEventListener('load',function(){
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('123');
        })
       })
    </script>
    <button>123</button>

• document.addEventListener(‘DOMContentLoaded’,function(){}),当DOM加载完成后（不包括图片、样式表、flash等）就会触发DOMContentLoaded事件

因为DOMContentLoaded的触发不需要图片等加载完成，所以触发的时间较短（短于onload），要是有很多图片的话用DOMContentLoaded的交互效果要好于onload。

<script>
       window.addEventListener('DOMContentLoaded',function(){
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('123');
        })
       })
    </script>
    <button>123</button>

2. 调整窗口大小事件（onresize）

当窗口大小发生改变时就触发onresize事件。经常利用这个事件完成响应式布局，window.innerWidth就是当前屏幕的宽度

<script>
      window.addEventListener("load", function () {
        var div = document.querySelector("div");
        window.addEventListener("resize", function () {
          console.log(window.innerWidth);
          if (window.innerWidth < 600) {
            div.style.display = "none";
          } else {
            div.style.display = "block";
          }
        });
      });
    </script>
    <div></div>

window对象的定时器相关方法

1. setTimeout()定时器
   window.setTimeout(调用的函数，【延迟的毫秒数】)

• setTimeout()定时器在延迟的毫秒结束后就执行调用函数
• setTimeout()也被称为回调函数（callback），因为它是延迟了几秒再去调用，不像其他的函数就按照代码顺序进行调用
• 延迟的毫秒数可以不写，默认为0
• 经常给定时器赋值一个标识符
• window可省略

<script>
        window.addEventListener('load',function(){
            var time1 = setTimeout(f1,2000);
            function f1(){
                console.log('过了两秒');
            }
        })
    </script>

2. 停止setTimeout()定时器

window.clearTimeout(timeoutID),会取消之前通过setTimeout（）建立的计时器。

• timeID就是取消的定时器的标识符
• window可省略

<script>
        window.addEventListener('DOMContentLoaded',function(){
            var btn = document.querySelector('button');
            var time1 = setTimeout(function(){
                console.log('时间到了');
            },5000);
            btn.addEventListener('click',function(){
                clearTimeout(time1);
            })
        })
    </script>
    <button>停止</button>

3. setInterval()定时器
   window.setInterval(回调函数，【间隔的毫秒数】)

• 每隔设置的时间就调用一次回调函数
• 延迟的毫秒数可以不写，默认为0
• 经常给定时器赋值一个标识符

var time1 = setInterval(function(){
                console.log('过了一秒哦');
},1000)

4. 停止setInterval（）定时器
   window.clearInterval(timeoutID),会取消之前通过setInterval（）建立的计时器。

<script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            var time1 = setInterval(function(){
                console.log('过了一秒哦');
            },1000)
            btn.addEventListener('click',function(){
                console.log('停止');
                clearInterval(time1);
            })
        })
    </script>
    <button>停止</button>

执行机制

JS语言是单线程，但在HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程，于是JS中出现了同步和异步。

• 同步：前一个任务结束之后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的。
• 异步：同时可以处理多个任务
• 本质区别：各个流程的执行顺序不同

JS中的同步任务和异步任务：

1. 同步任务：同步任务都在主线程上执行，形成一个执行栈
2. 异步任务：通过回调函数实现，添加到任务队列中，一般情况下有以下三个类型：

• 普通时间，如click等
• 资源加载，如load等
• 定时器

事件循环：由主线程不断重复的获得任务再执行任务（主线程任务执行完后不断地去任务队列中获得任务、执行任务，一直重复）

location对象

window对象的location属性，用于获得或设置窗体的URL，并可以解析URL，这个属性返回的是一个对象，因此称为location对象。

location对象的属性

• location.href:获取或设置整个URL
• location.search:返回参数

location对象的方法

• location.assign()跳转页面
• location.replace()替换当前页面，但不记录历史，因此不能后退页面
• location.reload()重新加载页面，如参数为true则强制刷新

navigator对象

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

history对象

history对象用于与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL。

history对象的方法：

• back()后退
• forward（）前进
• go（参数）参数为1则前进1个页面，为-1则后退一个页面

this指向

一般情况下this最终指向的是调用它的对象。

1. 全局作用域或普通函数中this指向window（定时器里的this也指向window）

        console.log(this);
        function f1(){
            console.log(this);
        }
        //这里相当于window.f1();因此this指向的是window
        f1();
        setTimeout(function(){
            console.log(this);
        },1000)

2. 方法调用中this指向调用它的对象

        var a  = {
            playGame:function(){
                console.log(this);
            }
        }
        //返回对象a
        a.playGame();

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

        function F2(){
            console.log(this);
        }
        var b = new F2();