作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号:老王的前端分享
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。
从零开始学前端 - 24. JS BOM之Window对象详解及常用方法
Window
是 BOM
的核心对象,它表示浏览器的一个实例,也就是说, Window
对象只存在于浏览器环境中,在其他的环境内,是以 Global
为核心对象的。在浏览器中,Window
对象既是通过 JS 访问浏览器窗口的一个接口,又是 ECMAScript
规定的 Global
对象。这意味着在网页中定义的任何一个对象、变量和函数,都以 Window
作为其 Global 对象
。
具体内容可以查看上一篇博客: JS Glabal 对象常用属性和方法。
一、 window 相关知识点
1、全局作用域
前面也提到了,在浏览器环境中,Window
对象代替了 Global
对象,因此所有在全局作用域中声明的变量、函数等内容都会变成 Window
对象的属性和方法。
var num = 1 ;
function fn(){
return this.num;
}
window.num; // 1
window.fn(); // 1
由于我们是在全局作用域内声明的变量 num
和函数 fn
,所以它们会默认归纳到 Global
对象,即 Window
对象内,所以我们可以直接通过 Window
来访问全局变量和函数。
this
永远指向的是当前调用它的对象,所以当我们在全局环境中调用函数时,this
指向的是 Window
对象。
而全局变量虽然可以通过 window
来直接访问,但它与直接在 window
对象上定义的属性还略有不同:
var a = 1 ;
window.b = 2;
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 false
delete window.a;
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 true
delete window.b;
window.a; // 1
window.b; // undefined
当我们试图用 delete
运算符在 IE9
以前版本的浏览器删除 window
对象的属性时,无论如何都会抛出错误。而在高版本的浏览器中,声明的全局变量在添加到 window
中时,会有一个名为 Configurable
的特性,这个特性的值会被设置为 false
,从而阻止其属性被删除。
当我们试图访问一个未被声明的变量时,JS 会抛出一个错误,而借助 window
对象,我们可以避免这一点:
var num1 = num; // Uncaught ReferenceError: num is not defined
var num2 = window.num; // undefined
为什么通过 window
来访问一个未被声明的变量不会抛出错误?这是因为这是一次对象属性查询的操作。我们可以通过这种方式来判断某个可能未声明的变量是否存在:
// Uncaught ReferenceError: num is not defined
if (num) {
alert("已声明");
} else {
alert("未声明");
}
// 未声明
if (window.num) {
alert("已声明");
} else {
alert("未声明");
}
总结一下相关的知识点:
- 在浏览器环境中,
Window
对象代替了Global
对象成为了全局作用已; - 全局变量不能通过
delete
删除,而直接在window
对象上的定义的属性可以; IE9
以下版本的浏览器不允许任何通过delete
对window
对象的操作;- 通过查询
window
对象,可以判断某个可能未声明的变量是否存在;
2、窗口关系及框架
所谓窗口关系及框架指的就是通过 iframe
标签来引入的页面与当前页面的关系,这里主要介绍一下页面与页面直接相互操作的方法,也就是父页面与子页面相互操作的方法。
首先要先声明,目前 W3C
已经不推荐使用 frameset + frame
,而推荐使用 iframe
来代替它们。
// index.html
<body>
<h1>我是最顶级父页面 index.html</h1>
<iframe src="./1.html" frameborder="1" name="child1" style="width: 400px;height: 400px;"></iframe>
<iframe src="./2.html" frameborder="1" name="child2" style="width: 400px;height: 400px;"></iframe>
</body>
<script>
var name = "index.html";
function fn() {
alert("index.html 页面方法"