Web APIs学习【三】（BOM对象，JS执行机制）-USB迷|专注于互联网分享

Web APIs学习【三】（BOM对象，JS执行机制）

文章目录

- 1.BOM浏览器对象模型
- - 1.1 BOM概述
  - - 1.1.1什么是BOM
    - 1.1.2 BOM的构成
    - 1.1.3 BOM和DOM对比
  - 1.2 window对象的常用事件
  - - 1.2.1 窗口加载事件
    - 1.2.2 调整窗口大小事件
  - 1.3 定时器
  - - 1.3.1 setTimeout() 定时器
    - 1.3.2 停止setTimeout()定时器
    - 1.3.3 setInterval() 定时器
    - 1.3.4 停止setInterval()定时器
    - 1.3.5 this
    - - 1.3.5.1 全局作用域中
      - 1.3.5.2 方法调用中
      - 1.3.5.3构造函数中
  - 1.4 JS执行机制
  - - 1.4.1 JS是单线程
    - 1.4.2 同步与异步
    - - 1.4.2.1 同步任务
      - 1.4.2.2 异步任务
    - 1.4.3 JS执行机制
  - 1.5 location对象
  - - 1.5.1 什么是location对象
    - 1.5.2 url
    - 1.5.3 location 对象的属性
    - 1.5.4 location对象的方法
  - 1.6 navigator 对象
  - 1.7 history 对象
  - - 1.7.1 history对象方法

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

BOM(Browser Object Model)即浏览器模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其对象核心是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性
BOM缺乏标准（js有ECMA DOM有W3C），由厂商在各自浏览器上定义
BOM把浏览器当作一个对象来看

1.1.2 BOM的构成

BOM 比 DOM 更大它包含 DOM
window（document，location，navigation，screen，history）
window 对象是浏览器的顶级对象，它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域中的变量，函数都会变成 window 对象的属性和方法在调用的时候可以省略 window ，前面学习的对话框都属于 window 对象方法如 alert()、prompt()等

注意：window 下的一个特殊属性 window.name，不要随意定义name变量

1.1.3 BOM和DOM对比

BOM

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

DOM

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

1.2 window对象的常用事件

1.2.1 窗口加载事件

window.onload 窗口加载事件，当文档内容完全加载会触发该事件（包括图像、flash、CSS)
DOMContentLoaded 当DOM加载完成时触发（不包括图片，flash,css等）
window.onload 传统注册事件方式只能写一次，如果有多个，以最后一个为准，但使用addEventListener 则没有限制

<head><meta charset="UTF-8"><title>Title</title><script>window.addEventListener('load', function () {var btn = document.querySelector('button');btn.addEventListener('click', function () {alert('button clicked');})})window.addEventListener('load', function () {alert('load 触发');})document.addEventListener('DOMContentLoaded', function () {alert('DOMContentLoaded 触发');})// alert DOMContentLoaded 触发 => alert load触发 => 点击按钮 => alert button clicked</script>
</head>
<body>
<button>click</button>
</body>

1.2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件
只要窗口大小发生变化就会触发
window.innerWidth当前屏幕的宽度，可利用来完成响应式布局

<head><meta charset="UTF-8"><title>Title</title><style>div {height: 200px;width: 200px;background-color: #ff4af4;}</style><script>window.addEventListener('load', function () {var div = document.querySelector('div');window.addEventListener('resize', function () {console.log('resize');if (window.innerWidth <= 800) {div.style.display = 'none'} else {div.style.display = 'block'}})})</script>
</head>
<body>
<div></div>
</body>

调整页面大小会让方框出现/消失

1.3 定时器

1.3.1 setTimeout() 定时器

window.setTimeout(调用函数, delay)
调用函数可以直接写函数，或者写函数名，或字符串’调用函数()’
延迟时间不写默认为0

<body>
<script>var callback = function(){console.log('callback');};var timer1 = window.setTimeout(callback, 2000);var timer2 = window.setTimeout(callback, 8000);// => callback(打开页面2s后) callback(打开页面8s后)
</script>
</body>

回调函数
- setTimeout() 里的调用函数我们也叫做回调函数
- 这个函数需要等待时间，时间到了才调用，所以叫回调函数（回调意思就是回头调用）
- document.addEventListener(‘click’, fn) 里面的函数也是回调函数

1.3.2 停止setTimeout()定时器

window.clearTimeout(timoutID) 取消先前调用的setTimeout()定时器

<body>
<button>stop setTimeout</button>
<script>var btn = document.querySelector('button');var callback = function () {console.log('callback 调用');};var timer = window.setTimeout(callback, 2000);btn.addEventListener('click', function () {clearTimeout(timer);})// => 点击按钮则不再打印callback 调用
</script>
</body>

1.3.3 setInterval() 定时器

和setTimeout()调用方法极其相似，但功能不一样，此定时器每隔一次设置时间就调用一次回调函数

<body>
<script>window.setInterval(function () {console.log('callback');}, 1000)
</script>
</body>

1.3.4 停止setInterval()定时器

window.clearInterval(intervalID);
intervalID 是定时器的标识符

<body>
<button class="stop">stop</button>
<button class="begin">begin</button>
<script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');let timer = null;begin.addEventListener('click', function () {timer = setInterval(function () {console.log('setInterval');}, 1000)})stop.addEventListener('click', function () {clearInterval(timer)})
</script>
</body>

点击begin开始循环打印，点击stop结束循环打印

1.3.5 this

一般情况下，this指向调用它的对象

个人认为：当用this的时候外面有一层函数，那么这个‘它’指的是这个函数

1.3.5.1 全局作用域中

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

<script>window.console.log(this);function f() {console.log(this);}window.f();window.setTimeout(function () {console.log(this);})// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
</script>

1.3.5.2 方法调用中

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

<script>var object = {f : function () {console.log(this);}}object.f();document.addEventListener('click', function () {console.log(this);})// => {f: ƒ}// => #document
</script>

1.3.5.3构造函数中

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

<script>function Fun() {console.log(this);}let fun = new Fun();// => Fun
</script>

1.4 JS执行机制

1.4.1 JS是单线程

JavaScript 语言一大特点是单线程，同一个时间只能做一件事。单线程意味着所有的任务都需要排队，前一个任务结束后一个任务才能开始。这样会造成页面不连贯。

1.4.2 同步与异步

为了解决问题，利用多核CPU，HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中有了同步和异步。

同步: 前一个任务执行完再执行后一个任务
异步: 在做一件事的时候可以去处理其他事

1.4.2.1 同步任务

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

1.4.2.2 异步任务

JS异步任务通过回调函数实现
一般而言，异步任务有三种类型
1. 普通事件 click resize等
2. 资源加载 load error等
3. 定时器 setTimeout setInterval

异步任务相关回调函数添加到任务队列（消息队列）中

<script>console.log(1);setTimeout(function () {console.log(2);})console.log(3);// => 1 3 2
</script>

1.4.3 JS执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行

事件循环
由于主线程不断重复获得任务，执行任务，再获取任务，再执行，这种机制被称为事件循环（解释就是执行栈的任务执行完毕，系统就会按次序读取任务队列的异步任务，异步任务也执行完毕了，又再看看消息队列有没有异步任务，有又再执行，执行完又看。。）

<script>console.log(1);document.onclick = function () {console.log('click');}console.log(2);setTimeout(function () {console.log(3);}, 3000)// => 1 2 3
</script>

document.onclick = fn 这个语句先写进异步进程处理，点击事件发生，fn进入消息队列
setTimeout(fn, 3000) 先写进异步进程处理，3s到了fn才写进消息队列

1.5 location对象

1.5.1 什么是location对象

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

1.5.2 url

URL(统一资源定位符)是互联网上标准资源的地址，互联网上每一个文件都有唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理。

1.5.3 location 对象的属性

location.href 获取或设置整个url
location.host 返回主机（域名） www.baidu.com
location.port 返回端口号（如果没有则返回空字符串）
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段

1.5.4 location对象的方法

location().assign() 转跳页面,可以回退
location().replace() 转跳页面，不可回退
locaton().reload() 刷新页面，如果参数为true则强制刷新（ctrl+f5）

1.6 navigator 对象

navigator 对象包含有关浏览器的信息，常用userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值，以转跳不同的页面（比如手机网页打开手机商场页面，电脑端打开电脑端商场页面）

1.7 history 对象

1.7.1 history对象方法

history.back() 后退
history.forward() 前进
history.go() 参数为正则前进，参数为负则后退

Web APIs学习【三】（BOM对象，JS执行机制）

文章目录

- 1.BOM浏览器对象模型
- - 1.1 BOM概述
  - - 1.1.1什么是BOM
    - 1.1.2 BOM的构成
    - 1.1.3 BOM和DOM对比
  - 1.2 window对象的常用事件
  - - 1.2.1 窗口加载事件
    - 1.2.2 调整窗口大小事件
  - 1.3 定时器
  - - 1.3.1 setTimeout() 定时器
    - 1.3.2 停止setTimeout()定时器
    - 1.3.3 setInterval() 定时器
    - 1.3.4 停止setInterval()定时器
    - 1.3.5 this
    - - 1.3.5.1 全局作用域中
      - 1.3.5.2 方法调用中
      - 1.3.5.3构造函数中
  - 1.4 JS执行机制
  - - 1.4.1 JS是单线程
    - 1.4.2 同步与异步
    - - 1.4.2.1 同步任务
      - 1.4.2.2 异步任务
    - 1.4.3 JS执行机制
  - 1.5 location对象
  - - 1.5.1 什么是location对象
    - 1.5.2 url
    - 1.5.3 location 对象的属性
    - 1.5.4 location对象的方法
  - 1.6 navigator 对象
  - 1.7 history 对象
  - - 1.7.1 history对象方法

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

BOM(Browser Object Model)即浏览器模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其对象核心是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性
BOM缺乏标准（js有ECMA DOM有W3C），由厂商在各自浏览器上定义
BOM把浏览器当作一个对象来看

1.1.2 BOM的构成

BOM 比 DOM 更大它包含 DOM
window（document，location，navigation，screen，history）
window 对象是浏览器的顶级对象，它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域中的变量，函数都会变成 window 对象的属性和方法在调用的时候可以省略 window ，前面学习的对话框都属于 window 对象方法如 alert()、prompt()等

注意：window 下的一个特殊属性 window.name，不要随意定义name变量

1.1.3 BOM和DOM对比

BOM

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

DOM

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

1.2 window对象的常用事件

1.2.1 窗口加载事件

window.onload 窗口加载事件，当文档内容完全加载会触发该事件（包括图像、flash、CSS)
DOMContentLoaded 当DOM加载完成时触发（不包括图片，flash,css等）
window.onload 传统注册事件方式只能写一次，如果有多个，以最后一个为准，但使用addEventListener 则没有限制

<head><meta charset="UTF-8"><title>Title</title><script>window.addEventListener('load', function () {var btn = document.querySelector('button');btn.addEventListener('click', function () {alert('button clicked');})})window.addEventListener('load', function () {alert('load 触发');})document.addEventListener('DOMContentLoaded', function () {alert('DOMContentLoaded 触发');})// alert DOMContentLoaded 触发 => alert load触发 => 点击按钮 => alert button clicked</script>
</head>
<body>
<button>click</button>
</body>

1.2.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件
只要窗口大小发生变化就会触发
window.innerWidth当前屏幕的宽度，可利用来完成响应式布局

<head><meta charset="UTF-8"><title>Title</title><style>div {height: 200px;width: 200px;background-color: #ff4af4;}</style><script>window.addEventListener('load', function () {var div = document.querySelector('div');window.addEventListener('resize', function () {console.log('resize');if (window.innerWidth <= 800) {div.style.display = 'none'} else {div.style.display = 'block'}})})</script>
</head>
<body>
<div></div>
</body>

调整页面大小会让方框出现/消失

1.3 定时器

1.3.1 setTimeout() 定时器

window.setTimeout(调用函数, delay)
调用函数可以直接写函数，或者写函数名，或字符串’调用函数()’
延迟时间不写默认为0

<body>
<script>var callback = function(){console.log('callback');};var timer1 = window.setTimeout(callback, 2000);var timer2 = window.setTimeout(callback, 8000);// => callback(打开页面2s后) callback(打开页面8s后)
</script>
</body>

回调函数
- setTimeout() 里的调用函数我们也叫做回调函数
- 这个函数需要等待时间，时间到了才调用，所以叫回调函数（回调意思就是回头调用）
- document.addEventListener(‘click’, fn) 里面的函数也是回调函数

1.3.2 停止setTimeout()定时器

window.clearTimeout(timoutID) 取消先前调用的setTimeout()定时器

<body>
<button>stop setTimeout</button>
<script>var btn = document.querySelector('button');var callback = function () {console.log('callback 调用');};var timer = window.setTimeout(callback, 2000);btn.addEventListener('click', function () {clearTimeout(timer);})// => 点击按钮则不再打印callback 调用
</script>
</body>

1.3.3 setInterval() 定时器

和setTimeout()调用方法极其相似，但功能不一样，此定时器每隔一次设置时间就调用一次回调函数

<body>
<script>window.setInterval(function () {console.log('callback');}, 1000)
</script>
</body>

1.3.4 停止setInterval()定时器

window.clearInterval(intervalID);
intervalID 是定时器的标识符

<body>
<button class="stop">stop</button>
<button class="begin">begin</button>
<script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');let timer = null;begin.addEventListener('click', function () {timer = setInterval(function () {console.log('setInterval');}, 1000)})stop.addEventListener('click', function () {clearInterval(timer)})
</script>
</body>

点击begin开始循环打印，点击stop结束循环打印

1.3.5 this

一般情况下，this指向调用它的对象

个人认为：当用this的时候外面有一层函数，那么这个‘它’指的是这个函数

1.3.5.1 全局作用域中

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

<script>window.console.log(this);function f() {console.log(this);}window.f();window.setTimeout(function () {console.log(this);})// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
</script>

1.3.5.2 方法调用中

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

<script>var object = {f : function () {console.log(this);}}object.f();document.addEventListener('click', function () {console.log(this);})// => {f: ƒ}// => #document
</script>

1.3.5.3构造函数中

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

<script>function Fun() {console.log(this);}let fun = new Fun();// => Fun
</script>

1.4 JS执行机制

1.4.1 JS是单线程

JavaScript 语言一大特点是单线程，同一个时间只能做一件事。单线程意味着所有的任务都需要排队，前一个任务结束后一个任务才能开始。这样会造成页面不连贯。

1.4.2 同步与异步

为了解决问题，利用多核CPU，HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中有了同步和异步。

同步: 前一个任务执行完再执行后一个任务
异步: 在做一件事的时候可以去处理其他事

1.4.2.1 同步任务

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

1.4.2.2 异步任务

JS异步任务通过回调函数实现
一般而言，异步任务有三种类型
1. 普通事件 click resize等
2. 资源加载 load error等
3. 定时器 setTimeout setInterval

异步任务相关回调函数添加到任务队列（消息队列）中

<script>console.log(1);setTimeout(function () {console.log(2);})console.log(3);// => 1 3 2
</script>

1.4.3 JS执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行

事件循环
由于主线程不断重复获得任务，执行任务，再获取任务，再执行，这种机制被称为事件循环（解释就是执行栈的任务执行完毕，系统就会按次序读取任务队列的异步任务，异步任务也执行完毕了，又再看看消息队列有没有异步任务，有又再执行，执行完又看。。）

<script>console.log(1);document.onclick = function () {console.log('click');}console.log(2);setTimeout(function () {console.log(3);}, 3000)// => 1 2 3
</script>

document.onclick = fn 这个语句先写进异步进程处理，点击事件发生，fn进入消息队列
setTimeout(fn, 3000) 先写进异步进程处理，3s到了fn才写进消息队列

1.5 location对象

1.5.1 什么是location对象

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

1.5.2 url

URL(统一资源定位符)是互联网上标准资源的地址，互联网上每一个文件都有唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理。

1.5.3 location 对象的属性

location.href 获取或设置整个url
location.host 返回主机（域名） www.baidu.com
location.port 返回端口号（如果没有则返回空字符串）
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段

1.5.4 location对象的方法

location().assign() 转跳页面,可以回退
location().replace() 转跳页面，不可回退
locaton().reload() 刷新页面，如果参数为true则强制刷新（ctrl+f5）

1.6 navigator 对象

navigator 对象包含有关浏览器的信息，常用userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值，以转跳不同的页面（比如手机网页打开手机商场页面，电脑端打开电脑端商场页面）

1.7 history 对象

1.7.1 history对象方法

history.back() 后退
history.forward() 前进
history.go() 参数为正则前进，参数为负则后退

USB迷 | 专注于互联网分享

Web APIs学习【三】（BOM对象，JS执行机制）

文章目录

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

1.1.2 BOM的构成

1.1.3 BOM和DOM对比

1.2 window对象的常用事件

1.2.1 窗口加载事件

1.2.2 调整窗口大小事件

1.3 定时器

1.3.1 setTimeout() 定时器

1.3.2 停止setTimeout()定时器

1.3.3 setInterval() 定时器

1.3.4 停止setInterval()定时器

1.3.5 this

1.3.5.1 全局作用域中

1.3.5.2 方法调用中

1.3.5.3构造函数中

1.4 JS执行机制

1.4.1 JS是单线程

1.4.2 同步与异步

1.4.2.1 同步任务

1.4.2.2 异步任务

1.4.3 JS执行机制

1.5 location对象

1.5.1 什么是location对象

1.5.2 url

1.5.3 location 对象的属性

1.5.4 location对象的方法

1.6 navigator 对象

1.7 history 对象

1.7.1 history对象方法

Web APIs学习【三】（BOM对象，JS执行机制）

文章目录

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

1.1.2 BOM的构成

1.1.3 BOM和DOM对比

1.2 window对象的常用事件

1.2.1 窗口加载事件

1.2.2 调整窗口大小事件

1.3 定时器

1.3.1 setTimeout() 定时器

1.3.2 停止setTimeout()定时器

1.3.3 setInterval() 定时器

1.3.4 停止setInterval()定时器

1.3.5 this

1.3.5.1 全局作用域中

1.3.5.2 方法调用中

1.3.5.3构造函数中

1.4 JS执行机制

1.4.1 JS是单线程

1.4.2 同步与异步

1.4.2.1 同步任务

1.4.2.2 异步任务

1.4.3 JS执行机制

1.5 location对象

1.5.1 什么是location对象

1.5.2 url

1.5.3 location 对象的属性

1.5.4 location对象的方法

1.6 navigator 对象

1.7 history 对象

1.7.1 history对象方法

与本文相关的文章

评论列表 (0)