Window对象介绍
Window对象在客户端JavaScript中扮演着核心的角色，它是客户端的一个全局内置对象。我们可以使用 window 来引用这个对象，比如当我们打开一个网页，window 就代表这个网页；如果打开多个页面，则他们都有各自的 window 且互不相同。
计时器
我们一定见过这样两个函数，setTimeout() 和 setInterval()，它们就是我们常说到计时器函数。其实这两个函数是被定义在客户端的一个全局函数，所以也可以理解为就是Window对象的一个方法，所以我们可以这样引用 window.setTimeout()，当然也可以省略 window，直接 setTimeout()
那么setTimeout() 和 setInterval()这两个函数是干什么的呢？简单点来说就是在指定时间之后调用设定的函数，前者是调用一次，后者是反复不停地调用。
（1）setTimeout()
该函数需要传入两个参数，第一个参数是一个函数，在指定时间之后执行该函数；第二个参数是时间，单位为毫秒
//创建了一个定时器，1秒后会打印 `执行了一次`setTimeout(function() { console.log('执行了一次')},1000) //执行了一次
我们可以看到，传入的函数只执行了一次
（2）setInterval()
该函数也需要传入两个参数，第一个参数是一个函数，在指定时间之后执行该函数；第二个参数是时间，单位为毫秒
//创建了一个定时器，每过1秒后都会打印 `执行了一次`setInterval(function() { console.log('执行了一次')},1000) //执行了一次//执行了一次//执行了一次// …………
我们可以看到，传入的函数一直在执行，因为这个函数作用就是在指定时间后反复执行。那如何让它停止呢？其实还有两个函数是专门用来清除定时器的，那就是 clearTimeout() 和 clearInterval()
（3）clearTimeout() 和 clearInterval()
看这两个函数的名字我们就知道是用来清除定时器的，那么如何使用呢？我们只需在创建定时器的时候，将定时器返回给一个变量，再将该变量传入clearTimeout() 或 clearInterval() 就可以清除对应的定时器啦。
我们就拿其中一个函数来举个例子吧
let count = 0let timer = setInterval(function() { count ++ console.log('执行了' + count + '次') if(count === 5) { clearInterval(timer) } },1000) //执行了1次//执行了2次//执行了3次//执行了4次//执行了5次
上述例子创建了一个反复调用的定时器，并返回给变量timer，每过1秒，变量count + 1 ，并打印一次，同时判断count是否等于5，如果等于5，就调用clearInterval() 函数，并把变量timer作为参数，用于清除这个设定的定时器。所以本应该反复无限执行的定时器，在执行了5次以后就被清除掉了。
补充：定时器的执行是一种异步操作，也就是说它不会阻塞接下来的代码执行，我们来看一个例子
setTimeout(function() { console.log('内部已执行')},1000)console.log('外部已执行') //外部已执行//内部已执行
我们可以看到，从上到下解析下来，先执行了最后一行的代码，再执行了定时器传入的函数。这就是因为定时器是一种异步操作，所以我们来看一种特殊的情况，这个一定要注意了
setTimeout(function() { console.log('内部已执行')},0)console.log('外部已执行') //外部已执行//内部已执行
我们可以看到，虽然我们指定的时间是0秒，但仍然是先执行了最后一行的代码，再执行了定时器传入的函数。
打开窗口
Window对象有一个 open() 方法，该方法可以打开一个新的浏览器窗口，并返回打开那个窗口的Window对象。
open() 方法共有4个可选的参数：
- 第一个参数是即将打开的新窗口的URL，若没有该参数，则打开一个空白页
- 第二个参数是即将打开的新窗口的名字。若没有该参数，则会使用指定的名字
_blank打开一个新的 、未命名的窗口
- 第三个参数是一个字符串，字符串里是
属性名1=值1, 属性名2=值2这样的形式，用来设置新打开窗口的一些状态样式。
- 第四个参数是在第二个参数设置为一个已存在的窗口名时才生效，该参数为布尔值，当为true时，第一个参数的URL会替换掉窗口浏览历史的当前条目；当为false时，会在窗口浏览历史中创建一个新的条目
接下来我们来讲解这四个参数是如何使用的：
第一个参数
这个参数很好理解，比如我们传入 http://www.baidu.com ，则会跳转到百度页面，如果我们省略这个参数，则会打开一个空白页，如下图。
第二个参数
这个参数是为我们打开的新窗口命名的。例如，我们设置该参数为 newWindow，第一次调用 open() 函数，会去查看当前浏览器是否有一个窗口名字叫做newWindow，若没有则会打开一个名为 newWindow 的窗口，那当我们第二次调用 open() 函数时，同样也会去查看当前浏览器是否有一个窗口名字叫做newWindow，因为第一次调用的时候打开了一个这样的窗口，所以我们浏览器只是会跳转到刚刚打开的那个页面。
我们来看一下例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button class="btn">调用open函数</button><script> let btn = document.querySelector('.btn') btn.onclick = function () { //打开一个空白窗口，并命名为newWindow window.open('', 'newWindow') }</script></body></html>
动图展示
第三个参数
该参数是是一个字符串，字符串里是 属性名1=值1, 属性名2=值2 这样的形用于设置新打开的窗口的一些样式的，比如窗口大小 、是否具有菜单栏 、状态栏 、工具栏等
我们来看一个简单的例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button class="btn">调用open函数</button><script> let btn = document.querySelector('.btn') btn.onclick = function () { //打开一个没有名字的空白窗口，窗口大小为400 * 350 window.open('', '', 'width=400, height=350') }</script></body></html>
动图展示
还有很多属性可以设置，我直接列出来一些常用的属性，大家可以自行测试
| 属性名 |
含义 |
| height | 窗口的高度，最小值为100 |
| width | 窗口的宽度，最小值为100 |
| toolbar | 表示是否显示窗口的工具栏。yes/no，默认为yes |
| status | 是否要添加一个状态栏。yes/no，默认为yes |
| scrollbars | 是否显示滚动条。yes/no，默认为yes |
| resizable | 是否可调整窗口大小。yes/no，默认为yes |
| menubar | 是否显示菜单栏。yes/no，默认为yes |
| location | 是否显示地址字段。yes/no，默认为yes |
还有一些值，如果大家感兴趣可以去自己查询一下。
第四个参数
这个参数我暂时是没有看出有什么实际的用处，如果大家有知道的可以评论区告诉我。
我们在刚开始说过，window.open() 会返回打开那个窗口的Window对象，这就意味着我们可以控制那个打开的窗口，比如这样
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button class="btn1">打开新窗口</button><button class="btn2">控制新打开的窗口</button><script> let btn1 = document.querySelector('.btn1') let btn2 = document.querySelector('.btn2') let new_window = null btn1.onclick = function () { //将新打开的窗口的window对象返回给变量new_window new_window = window.open() } btn2.onclick = function () { //在原窗口控制新打开的窗口弹出弹框 new_window.alert('弹出弹窗') }</script></body></html>
动画展示
继续看下文~
