好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

什么是 BOM

什么是 BOM

BOM 即浏览器对象模型( bro wser object model),其提供了一系列接口供开发者使用 JavaScript 与浏览器窗口进行交互。

BOM 不像 ECMAScript 和 DOM 有一套自己的标准,BOM 是没有公共组织制定标准的。
神奇的是所有现代浏览器在 BOM 的相关 内容 上几乎一致,所以 BOM 也足够通用,所有浏览器的实现几乎一致。

1. BOM 的作用

BOM 提供的是与浏览器窗口交互的能力,其包含了一些处理窗口的 方法 ,如打开新窗口,控制新窗口大小,也提供了窗口相关的 属性 ,如窗口尺寸。

BOM 的操作入口可以理解为 window 对象,即浏览器下的全局对象。

 window . location . href  =   '//imooc.com'  ;   //  跳转  

window .  onload   =   function  (  )   { 
   // 当前窗口的 页面 加载完毕做的事情 
 }  ; 

window .  open  (  'https://immoc.com'  )  ;   // 打开新的窗口 

window . navigator . userAgent ;   //  获取  UA 
 

2. 理解 BOM、DOM、JS 的关系

部分读者可能会进入 一个 难以理解的怪圈。

全局的对象,如 String 、 Boolean 、 Function ,或者一些 方法 parseInt , isNaN ,甚至是 DOM 的入口 document ,这些都是被放在 window 下供开发者访问的。

而 BOM 没有自己的标准,也基本和这些东西没有半毛关系,为什么这些 内容 会被放在作为 BOM 操作的入口的 window 对象下呢?

之前也有提过,JavaScript 有他自己独立的标准,本身是不具备和浏览器交互的特性的,交互的接口都由浏览器来提供。

在 ECMAScript 的标准中,这些全局的对象都是被放在 Global 上的,而标准又没指出如何直接访问 Global 对象,所以在浏览器上这个所谓的 Global 就被 window 对象所替代,所有 Global 下的 内容 全部被放到了 window 下。

window 对象就这样作为了全局对象,并且 DOM 相关的 内容 ,与窗口交互的方式都放在了 window 对象下。

扩展:globalThis

globalThis 指向当前环境的全局的this,也可以理解为指向全局对象。
这个 属性 在浏览器中指向的就会是 window ,而在 node 环境下指向的就是 global 。
这个 属性 最大的好处就是开发通用的库不必要再使用 window 或 global 这样的标志性对象来判断当前的宿主环境。
需要注意的是 globalThis 还是试验性的 内容 ,chrome 和 新版本的 node 已经 支持 。

3. window.window.window.window…window

window 对象下还有 一个 名为 window 的 属性 ,其指向 window 对象。

也就是说可以像套娃一样无限套。

这样设计也是有原因的,假设没有 window.window 这个 属性 ,那就访问不到全局的 window 了,这就等于不能直接访问到全局对象,如果想要访问直接访问 window 对象,则必须自建 一个 变量用于放置 window 对象。

  var  window  =   this  ;   // 在 代码 最外层 

window . location . href  =   'https://imooc.com'  ; 
 

4. 小结

BOM 没有自己的标准,在浏览器中 window 对象就是 BOM 相关 内容 的入口。

window 对象是 BOM 相关 内容 的入口。

在浏览器环境中,window 对象就是全局对象,所有 DOM 相关 内容 与 ECMAScript 描述的全局对象等 内容 也被放在 window 对象下。

常用的 BOM 相关对象 ? ?表单校验

查看更多关于什么是 BOM的详细内容...

  阅读:39次

上一篇

下一篇

第1节:什么是 JavaScript    第2节:学习环境准备    第3节:调试方案    第4节:JavaScript 变量    第5节:JavaScript 数据类型    第6节:JavaScript if 语句    第7节:for 语句    第8节:JavaScript 算数运算符    第9节:JavaScript 比较运算符    第10节:JavaScript 逻辑运算符    第11节:JavaScript 函数    第12节:JavaScript 表达式    第13节:JavaScript 对象    第14节:JavaScript 字符串    第15节:JavaScript 数字    第16节:JavaScript 数组    第17节:JavaScript switch 语句    第18节:JavaScript while 语句    第19节:JavaScript 的 break 与 continue    第20节:JavaScript with    第21节:document.cookie    第22节:JavaScript Function    第23节:JavaScript Math    第24节:JavaScript Date    第25节:JavaScript RegExp    第26节:JavaScript JSON    第27节:什么是 DOM    第28节:DOM 和 JavaScript 的关系    第29节:获取和操作 DOM 节点    第30节:DOM 与事件    第31节:DOM 事件绑定    第32节:DOM 事件对象    第33节:DOM 事件流    第34节:事件相关的优化    第35节:自定义事件    第36节:表单校验    第37节:什么是 BOM    第38节:常用的 BOM 相关对象    第39节:BOM 常用属性和方法    第40节:AJAX    第41节:异常处理    第42节:三元运算符    第43节:逗号操作符    第44节:void    第45节:typeof    第46节:delete 操作符    第47节:debugger    第48节:getter & setter    第49节:new 运算符与构造函数    第50节:JavaScript 原型    第51节:JavaScript instanceof    第52节:JavaScript this    第53节:严格模式    第54节:作用域    第55节:闭包    第56节:变量提升    第57节:对象包装器    第58节:Lodash    第59节:moment    第60节:swiper    第61节:ECMAScript 6    第62节:Node.js    第63节:Babel    第64节:CSS 预处理器    第65节:代码规范    第66节:TypeScript    第67节:WebComponents    第68节:Vue、React、Angular    第69节:小程序    第70节:JavaScript 关键字    第71节:分号导致的问题    第72节:对象属性访问问题    第73节:this 使用问题    第74节:浮点数精度问题    第75节:独一无二的 NaN    第76节:避免全局污染    第77节:控制台观察对象问题    第78节:根据环境选择语言特性    第79节:相关资源