window对象

前面的课程提到的document、event、requestAnimationFrame()等一系列属性或方法最终都是属于windows对象，windows对象的所有方法和属性就是Javascript语言调用浏览器平台的各种功能的一个接口，为了大家有一个完整的知识框架体系有必要进行总结。

window对象树状图

下面的树状图仅仅展示了window对象的极小一部分属性和方法不完整，大家扫一眼，有个印象即可，通过点击超链接，可以查看W3C表格文档。

观察上面的树状思维导图，你可以看出window的有些属性就是普通的属性，比如innerwidth属性表示浏览器视口（viewport）宽度；有些属性是对象，比如前面课程常常遇到的event对象、document 对象，这些对象类型的属性和普通属性的区别就是它们还可以分出属性和方法。在面向对象编程的思想面前，一切皆是对象。可以把document、event等对象称为window对象的属性，也可以成为window对象的子对象。在树状图中简单列举了一步分window的子对象、属性。你可你单击图中的超链接查看更多W3C展示的属性和子对象。在图中方法分支可以看到，基于canvas、WebGL技术的动画中常常用到的requestAnimationFrame()方法，弹出警告窗口的alert()方法，定时方法setTimeout()和setInterval()。

语法

对象调用自己的属性和方法，所有的编程语言中都是使用点(.)运算符，Javascript语言调用浏览器提供的方法和属性也不例外。比如window.alert()弹出警告窗口，window.document.body返回body元素，由于window是最顶层对象，所以很多时候你会在文档代码中见到省略window这样的形式：alert()、document.body。

window方法和属性

window对象的子对象也有很多的方法和属性，所以下面在介绍window对象属性的时候不介绍它的子对象属性，子对象的方法和属性单独讲解，由于属性和方法比较多也不能一一讲解，用的时候直接查询W3C会更方便，所以下面的教程侧重点是让你建立一个知识的轮廓和框架，学会钓鱼的方法。

定时或周期调用函数的方法

方法	作用
setInterval()	周期性调用某函数
setTimeout()	倒计时调用某函数
clearInterval()	取消setInterval()设置的定时器
clearTimeout()	取消setTimeout()设置的定时器

前面的课程讲解过这些方法，这里不再详细解释，之所以列出来，就是为了告诉你为什么这些方法被归类到window对象而不是document等其它子对象，window本意就是窗口的意思，表示浏览器中打开的当前窗口，你可以把每个新打开的浏览器窗口理解为一个window对象，所有的方法和属性都是以当前窗口为准的，比如setTimeout("fun()",2000);表示2秒后执行函数fun，这里你要注意他的时间基准是当前窗口打开的时刻，你同时打开多个窗口，每一个窗口中的这句代码都是相对自己而言，该定时器代码setTimeout("fun()",2000);完整的写法是window.setTimeout("fun()",2000);。

alert()方法

alert()方法的参数是一个字符串，执行后在浏览器页面会弹出一个小窗口，显示参数中的文字，常常用于提示程序运行错误、弹出警告、重要信息提示。

<script>
    let a = 10;
    if(a > 0){
        alert("QQ弹窗：您的老公已在另一地点上床，请您下床")
    }
</script>

open()方法

open()方法是打开一个新的窗口，该窗口显示一个URL地址指向的内容。格式open("URL","target","width=400,height=300....."),第一个参数URL必须填写，后两个可以不写，第二个参数定义的target属性，可以参考超链接的taeget属性学习，定义第三个参数会默认弹出一个新的窗口。

<button onclick="fun()">登录</button>
<script>
    function fun() {
        //方式一，类似超链接
        window.open("http://www.yanhuangxueyuan.com/HTML5/test/登录窗口.html","_blank");
        //方式二，弹出窗口
        window.open("http://www.yanhuangxueyuan.com/HTML5/test/登录窗口.html","",
            "width=400,height=300,left=500,top=500");
    }
</script>

open()方法的第三个参数的属性比较多，具体可以插W3C，这里简单介绍代码中"width=400,height=300,left=500,top=500"的含义，width=400,height=300定义的新窗口的尺寸，left=500,top=500定义的是窗口的位置，以显示器为准，left=500表示窗口左侧距离显示器左侧500px， top=500表示窗口的顶部距离显示器顶部500px。