js的window对象简单看

Window 对象

概念

window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

• 所有浏览器都支持 window 对象。它代表浏览器的窗口。
• 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

window对象集合

• frames[] 返回窗口中所有命名的框架

生命周期

• DOMContentLoaded 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成
• load 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等
• beforeunload 用户即将离开, 用来检查用户是否保存了修改, 并询问是否真的要离开
• unload 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据

常用属性

……

常用方法

| 方法 | 描述 |
| ———————————————————— | ————————————————– |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
……

常见应用

全局作用域

由于 window 是全局对象，因此所有的全局变量都会被被解析为该对象的属性。

var a = 100
console.log(window.a) // 100

我们也可将一些内部作用域的变量或数据挂载到window上，实现变量提升

function fn(){
    var a = 1
    window.a = a
}
fn()
console.log(window.a)    // 1

定时器

下面是一段获取手机验证码的函数代码

  getVcode() {
    const { mobile, dispatch } = this.props
    const { vTime, vTimer, mobileReg } = this.state
    let time = vTime
    /* if (!mobile || !mobileReg.test(mobile)) return message.error("请正确填写手机号") */
    if (vTimer) return false
    this.setState({ vTimer: true, vText: `重新获取({time}s)` })
   /* dispatch({
      type: "user/fetch_get_captcha",
      payload: { phone: mobile }
    }) */
    let timer = setInterval(() => {
      time--
      if (time === 0) {
        clearTimeout(timer)
        timer = null
        this.setState({ vTimer: false, vText: "获取验证码" })
        return
      }
      this.setState({ vText: `重新获取({time}s)` })
    }, 1000)
    this.setState({ timer })
  }

页面滑动

doc社区页点击评论定位到编辑器位置

提示页面退出

文章发布页退出页面的未保存提示

……