JavaScript

前端

发布日期: 2021-10-01

文章字数: 2k

阅读时长: 8 分

阅读次数:

BOM(浏览器对象模型)

概述

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

BOM 缺乏标准，Javascript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分

BOM 和 DOM

BOM 构成

BOM 比 DOM 更大，它包括 DOM。

window 对象是浏览器的顶级对象。

它是 JS 访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量函数都会变成 window 对象的属性和方法。调用时可以省略 window,alert()和 prompt()都是 window 对象方法。

例子：

var num = 1;
      console.log(num); //实际console.log(window.num);

      function fn() {
          alert(1); //window.alert(1);
      }
      fn(); //window.fn();

window 对象的常见事件

窗口加载事件

load 事件

window.addEventListener("load", function(){});

是窗口（页面）加载事件，当文档内容完全加载完成后会触发事件（包括图像、脚本文件、CSS 文件等），就调用的处理函数。

作用：有了窗口加载事件就可以把 JS 代码放在页面元素上方。因为 load 事件是等页面内容完全加载完毕，才去执行事件处理函数。

例子：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  		<meta charset="UTF-8">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<title>Myself</title>
  		<script>
      		window.addEventListener("load", () => {
          		const btn = document.querySelector("button");
          		btn.addEventListener("click", () => {
              		alert(1);
          		});
      		});
  		</script>
</head>

<body>
  		<button>点击</button>

</body>

</html>

DOMContentLoaded 事件

document.addEventListener("DOMContentLoaded", function(){});

DOMContentLoaded 事件触发时，仅当 DOM 加载完成时，不包括样式表，图片等。IE9 以上才支持。

应用背景：当页面的图片很多时，从用户访问到 onload 触发可能需要较长的时间，会影响到用户的体验，此时用 DOMContentLoaded 事件更合适。

用法和 load 事件类似。

调整窗口大小事件

window.addEventListener("resize", function(){});

只要窗口大小发生变化，就会触发事件。

例子：

const btn = document.querySelector("button");
      window.addEventListener("resize", () => {
          if (window.innerWidth < 800) { //window.innerWidth是当前窗口大小
              btn.style.display = "none";
          } else {
              btn.style.display = "inline";
          }
      })

定时器

setTimeout()定时器

window.setTimeout(调用函数，[延迟的毫秒数]);

用于设置一个定时器，在时间到后执行调用函数。

注意：

window 可以省略
延迟的毫秒数默认是 0
一般给定时器一个标识符，方便停止定时器等操作

调用函数也称为回调函数 callback。普通函数按照代码顺序直接调用，而 setTimeout 需要等待时间，时间到了才调用函数，因此被称为回调函数。

注册事件时的事件处理函数也是回调函数。

例子：

let timer = setTimeout(fn, 1000);

      function fn() {
          console.log("时间到了");
      }

停止 setTimeout()定时器

window.clearTimeout(timeoutID)

例子：

let timer = setTimeout(fn, 1000);

      function fn() {
          console.log("时间到了");
      }

      clearTimeout(timer);

setInterval()定时器

window.setInterval(回调函数，[延迟的毫秒数]);

和 setTimeout()基本一样，不一样的是，setInterval()会重复调用回调函数，每隔一段时间，就调用一次回调函数。

注意：第一次执行也是需要等待延迟的毫秒数才会执行

例子：

let timer = setInterval(fn, 1000);

      function fn() {
          console.log("时间到了");
      }

案例

倒计时效果

停止 setInterval()定时器

window.clearInterval(intervalID)

需要注意的是 setTimeout()和 setInterval()共用一个编号池，技术上，clearTimeout()和 clearInterval() 可以互换。但是，为了避免混淆，不要混用取消定时函数。来源

例子：

const start = document.querySelector(".start");
      const stop = document.querySelector(".pause");
      let timer = null;

      start.addEventListener("click", () => {
          timer = setInterval(() => {
              console.log("时间到了");
          }, 1000);
      });
      stop.addEventListener("click", () => {
          clearInterval(timer);
      });

案例

发送短信案例

this 指向

this 的指向只有在函数执行的时候才能确定指向，一般情况下 this 指向的是调用它的对象。

全局作用域和普通函数中 this 指向全局对象 window,定时器里面的 this 也是指向 window

例子：

console.log(this);

      function fn() {
          console.log(this);
      }
      fn();

      setTimeout(function () {
          console.log(this);
      }, 200);

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

注意：匿名函数和箭头函数的区别：匿名函数和传统方式一样会创建独有的this对象（即触发事件的元素），而箭头函数是继承绑定它所在函数的this对象

例子：

1	`let o = { sayHi: function () { console.log(this); } }; o.sayHi();`

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

例子：

1	`function Student() { console.log(this); } let st = new Student();`

JS 执行机制

Javascript 语言的一个特点是单线程。

同步和异步

单线程会导致所有任务都要排队，即假如有计时器，程序会堵住。为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 Javascript 开启多个线程，于是，JS 出现了同步和异步。

同步：前一个任务结束后再执行下一个任务。

异步：可以同时执行多个任务。

JS 为防止任务有排队或者等待时间较长的问题，把任务分为同步任务和异步任务两大类。

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

异步任务：JS 的异步时通过回调函数实现的。一般有三种类型。异步任务的相关回调函数放在任务队列(消息队列)中。

普通事件，如 click,resize 等
资源加载，如 load,error 等
定时器，如 setTimeout,setInterval 等

例子：

1	`console.log(1); //① setTimeout(function () { console.log(3); }, 0); //② console.log(2); //③`

分析：

首先，执行主线程执行栈第一个任务，打印出 1
第二个任务有回调函数，通过异步进程处理，满足条件后（即点击事件点击了，定时器事件时间到了），把异步任务（回调函数）添加到任务队列中，但是不执行
继续执行第三个任务，打印出 2；
如果执行栈中的同步任务执行完后，系统会按顺序读取任务队列的异步任务，被读取的异步任务进入执行栈，执行。
执行栈中没有任务后，还会一直监听着任务队列（比如 click 事件，用户一直有点击的可能），又称为”事件循环”,任务队列中有新任务，则该任务进入执行栈。

更详细见 P280

location 对象

什么是 location 对象

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

URL

统一资源定位符（Uniform Resource Locator, URL）是互联网上标准资源的地址。互联网上每个文件都有一个唯一的 URL。

URL 的一般语法格式:

protocal://host[:port]/path/[?query]#fragment

样例：http://www.itcast.cn/index.html?name=andy&age=18#link

location 对象的属性

location 对象属性	返回值
location.href	获取或设置整个 URL
location.host	返回域名
location.post	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，上图的 fragment 部分（#后面内容）