window对象的常见属性及各个BOM对象的功能含义

---

window对象

BOM

BOM(Browser Object Model)是浏览器对象模型.

• window是一个全局对象，也可以说是JavaScript中的顶级对象
• 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
• 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
• window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

• JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
• 语法：setTimeout(回调函数, 等待的毫秒数)
• setTimeout只执行一次，平时省略window

注意：

• 延时函数需要等待，所以后面的代码先执行
• 每一次调用延时器都会产生一个新的延时器

清除延时函数

语法：

let timer = serTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)

js执行机制

JavaScript语言的一大特点就是单线程，也就是同一时间只能做一件事。

这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果js执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

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

• 同步：前一个任务结束后才能执行后一个任务
• 异步：在做一件花费时间很长的事情的同时，你还可以处理其他事情

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

异步任务通过回调函数实现，异步任务相关添加到任务队列中，有以下三种类型：

• 普通事件：click、resize等
• 资源加载：load、error等
• 定时器：setInterval、setTimeout等

执行顺序：

1. 先执行执行栈中的同步任务
2. 将异步任务放入任务队列中
3. 执行栈中的所有同步任务执行完毕后，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务进入执行栈开始执行
   

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

location对象

location的数据类型是对象，它拆分并保存了url地址的各个组成部分。

常用属性和方法：

• href属性获取完整的url地址，对其赋值时用与地址的跳转

  location.href = 'https://baidu.com' // 跳转到百度首页
  

• search属性获取地址中携带的参数，符号?后面部分
• hash属性获取地址中的哈希值，符号#后面的部分
• reload方法用来刷新当前页面，传入参数true时表示强制刷新（等于ctrl+F5）

navigator对象

navigator的数据类型时对象，该对象记录了浏览器自身的相关信息。

常用属性和方法：

• 通过userAgent检测浏览器的版本及平台

  // 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'https://baidu.com'
      }
    })();
    !function () { }() // !(function () { })();
  

history对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

常用属性和方法：

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	包含前进功能和后退功能，参数是1就前进一个页面，参数是-1就后退一个页面

history对象在实际开发中比较少用，但在一些OA办公系统中见到。