Javascript window对象详解


Posted in Javascript onNovember 12, 2014

首先看我们的源代码。

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8" />  

        <title>深入理解Javascript</title>  

        <script type="text/javascript" charset="utf-8">  

            console.log(this);  

        </script>  

    </head>  

    <body>  

        <h1>深入理解Javascript</h1>  

    </body>  

</html>

我们知道,通过浏览器打开这个页面,包含在<script> </script>标签中的 脚本会被执行,

那我们看一下 console.log(this); 这个this 到底指向的是谁呢?

在Google Chrome 中我们看到:

Javascript window对象详解

在Mozilla Firefox 中我们看到:

Javascript window对象详解

我们都看到输出的Window,那这个Window 与window是不是相等呢?

接着我们的测试

<script type="text/javascript" charset="utf-8">  

    console.log(this);  

    console.log('this == window ? ', this == window);   

</script> 

运行代码,输出this == window ?true ,这说明 Window== window,真的是这样吗?

为了搞清楚它们之间的关系,我们又接着测试

<script type="text/javascript" charset="utf-8">  

    console.log('this = ', this);  

    console.log('this == window ?', this == window);  

    console.log('window = ', window);  

    console.log('Window = ', Window)  

    console.log('Window == window ?', Window == window)  

</script>

看浏览器输出:

Google Chrome :

Javascript window对象详解
Mozilla Firefox :

Javascript window对象详解

从输出结果我们可以推出,

this是指向Window对象;

this也等于window对象;

window也是指向Window对象;

Window是指向Window{},是浏览器提供的对象;

Window不等于window;

为什么会这样呢?

我们在浏览器控制台中查看Window对象的结构;

Javascript window对象详解

Javascript window对象详解

原来 Window对象包含的一些浏览器厂商实现的API,比如 html5中 的规范 sessionStorage;
它还有一个window的属性,这个属性的值就是指向Window对象;
我的理解:Window对象 是为浏览器厂商服务的,我们不能直接操作Window对象的属性,Window新增的API会反映到 window 对象中;
我们操作window 的属性 会反映到 Window 对象中。
比如 定义一个全局变量 window.a = 'aaa';

JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。这就是说,JavaScript的所有对象,都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是window对象。

所有浏览器环境的全局变量,都是window对象的属性。

可以把window理解成JavaScriptContext 上下文环境。

Javascript 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
Javascript玩转继承(一)
May 08 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
关于vue-router路径计算问题
May 10 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
a标签的href与onclick事件的区别详解
Nov 12 #Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 #Javascript
JavaScript实现关键字高亮功能
Nov 12 #Javascript
javascript的函数作用域
Nov 12 #Javascript
浅析javascript的间隔调用和延时调用
Nov 12 #Javascript
jQuery的deferred对象详解
Nov 12 #Javascript
探寻Javascript执行效率问题
Nov 12 #Javascript
You might like
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
Laravel实现表单提交
2017/05/07 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python递归实现打印多重列表代码
2020/02/27 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
消防隐患整改通知书
2015/04/22 职场文书
上甘岭观后感
2015/06/10 职场文书
大学生军训感言
2015/08/01 职场文书
教师节主题班会方案
2015/08/17 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
java代码实现空间切割
2022/01/18 Java/Android
Oracle中DBLink的详细介绍
2022/04/29 Oracle