【前端三剑客——JS】异常处理以及BOM对象

132 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

今天学习的是JS出现异常时的处理以及BOM简单的介绍

异常处理

当我们的代码执行后如果出现并没有出现我们的预想情况,可以通过以下操作,找出异常代码的位置

1. 异常捕获

try-catch

try{
    //这里写可能出现异常的代码
}catch(err){
    //这里写出现异常后的处理代码
}
  • 语句 try 和 catch 是成对出现的。
  • 如果在 try 中出现了错误,try 里面出现错误的语句后面的代码都不再执行,直接跳转到 catch 中,catch 处理错误信息,然后再执行后面的代码。
  • 如果 try 中没有出现错误,则不会执行 catch 中的代码,执行完 try 中的代码后直接执行后面的代码。
  • 通过 try-catch 语句进行异常捕获之后,代码将会继续执行,而不会中断。

throw

创建自定义错误,常与try-catch一起使用

throw语句抛出一个错误,当错误发生,js会停止执行并抛出错误信息

throw "Too big"  //抛出文本,也可抛出数字

BOM浏览器对象模型

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

  • 把浏览器当做一个对象看
  • 是浏览器厂商在各自浏览器定义的,兼容性较差

1. 构成

包含DOM,是浏览器对象模型

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

  1. 是JS访问浏览器窗口的一个接口
  2. 是全局对象,定义在全局作用域的变量,函数都会变成window对象的 属性和方法

window下的一个特殊属性window.name

2. window对象的常见事件

2.1 窗口加载事件

window.onload = function(){}
//或者 
window.addEventListener("load",function(){});

window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。

window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。

如果使用 addEventListener 则没有限制

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等

2.2 调整窗口大小事件

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

我们经常利用这个事件完成响应式布局,window.innerWidth当前屏幕宽度

2.3 pageshow

页面显示时触发,在重新加载页面是,pageshow会在load事件触发

3. 定时器

3.1 setTimeout()定时器

 window.setTimeout(调用函数, [延迟的毫秒数]);
  • window可以省略

  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐

  • 默认为零

  • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符 如:

    var time1 = setTimeout(callback, 2000);
    

3.2 clearTimeout()

取消先前通过调用setTimeout()建立的定时器

  • window可省略
  • 里面的参数就是定时器的标识符

3.4 setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

  • window可省略
  • 格式与第一类一样
  • 第一次执行也是间隔毫秒后执行

3.5 停止clearInterval()

 window.clearInterval(intervalID)

注意:

标志符的声明需要在停止定时器的作用域内,可以先赋个null

3.6 this

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例