BOM浏览器对象模型

BOM是浏览器对象模型，提供独立于内容而与浏览器窗口进行交互的对象，核心对象是window。

• 把浏览器看着一个对象
• 顶级对象是window
• 浏览器窗口交互
• 厂商自行定制，兼容性较差

window对象

• window.document
• window.location
• window.navigation
• window.screen
• window.history

特点

1. window是一个全局对象，定义在全局作用域中的变量和函数都会变成window对象的属性和方法，在调用时可以省略。alter() 、prompt()都是属于window对象的方法。
2. window是js访问浏览器的接口。
3. window对象的特殊属性name

window常见事件

• 窗口加载事件 window.onload
  等页面内容全部加载完毕才执行，包括DOM元素、样式、图片和flash等
  而document对象的DOMContentLoaded事件不需要等样式、图片和flash加载完成才执行，只需要DOM元素加载完成就立即执行

   // 重复添加同一个事件，存在覆盖问题
    window.onload = function(){}
    // 重复添加同一个事件，不会存在覆盖问题
    window.addEventListener('load',function(){})

    // DOMContentLoaded事件触发式，仅仅当DOM元素加载完成，不包括样式、图片和flash等
    document.addEventListener('DOMContentLoaded',function(){})

• 调整窗口大小事件 window.resize

window.onresize = function(){}
window.addEventListener('resize',function(){
      // 当前浏览器屏幕的宽度
      if(window.innerWidth < 800){

      }
})

• 定时器
  window提供了两个定时器 window.setTimeout()、window.setInterval()

location对象

location对象是window对象下一个属性。

• URL
  格式：protocol://host[:port]/path[?query]#fragment
  示例：https://item.jd.com/100068892989.html#crumb-wrap
protocol：通信协议
  host：主机（域名）
  port：端口
  path：路径，主机上的文件地址
  query：参数
  fragment：片段（锚点、链接）
• 属性
  herf：获取或设置整个URL
  host：返回主机（域名）
  hostname: 主机名
  port：返回端口（http默认80端口）
  pathname：返回路径（未写，返回空串）
  search：返回参数
  hash：返回片段（#后面的内容，常见于链接、锚点）
• 方法
  assign()：跟herf一样可以跳转页面，也称重定向页面，记录浏览历史，可以后退
  reload()：刷新页面，参数为true表示强制刷新
  replace()：替换页面，不记录浏览历史，不能后退
  image.png

navigator对象

包含了浏览器相关信息，最常使用的属性是userAgent，可以通过该属性来检测客户端是PC端还是移动端。

image.png
userAgent：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

• 检测客户端是移动端还是PC端

function isMobile() {
      if (
        navigator.useAgent.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对象

history对象与浏览器历史记录进行交互

• 方法
  back()：后退
  forward()：前进
  go()：前进或后退，参数是1 就前进一个页面，是 -1 就后退一个页面

本地存储

浏览器本地储存只能存储字符串，存储对象需要进行json编码后存储。

window.sessionStorage

• 特点
  空间大小5M
  生命周期：关闭浏览器窗口，刷新页面数据不受影响
  在同一个窗口或页面下，数据可以共享
  以键值对的形式存储、使用
• 存储数据
  sessionStorage.setItem(key,value)
• 获取数据
  sessionStorage.getItem(key)
• 删除数据
  sessionStorage.removeItem(key)
• 清除全部数据
  sessionStorage.clear()

window.localStorage

• 特点
  空间大小20M
  生命周期：永久生效，关闭页面不受影响，除非手动删除
  多窗口共享数据
  以键值对形式存储、使用
• 存储数据
  localStorage.setItem(key,value)
• 获取数据
  localStorage.getItem(key)
• 删除数据
  localStorage.removeItem(key)
• 清除全部数据
  localStorage.clear()

this指向

• 全局作用域或者普通函数中this指向全局对象window。（定时器中的this也是指向window）

   window.setTimeout(function(){
        console.log(this);// this 指向window
    },2000);

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

    let user = {
        say:function(){
            console.log(this);
        }
    };
    user.say();// user调用了say函数，所以this指向user

    let btn = document.querySelector('button');
    btn.onclick = function(){
        console.log(this); // btn调用了这个函数，所以this指向btn
    }

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

    function Fun(){
        console.log(this);// this指向的是fun实力对象
    }
    let fun = new Fun();

JS执行机制

同步异步

• 同步任务
  在主线程上执行，行程一个执行栈
• 异步任务
  通过回调函数实现，将回调函数放入异步任务队列（消息队列）中。

异步任务分类

1. 普通事件 （click, resize）
2. 资源加载 (load, error)
3. 定时器

执行机制 事件循环

1. 先执行执行栈的同步任务
2. 异步任务（回调函数）放入异步任务队列中

3. 一旦执行栈中所有同步任务完成，系统会按照次序读取任务队列中的异步任务，于是异步任务结束等待状态，放入执行栈，开始执行。

   
   image.png