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 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
php4的session功能评述(二)
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
家长对孩子的感言
2014/03/10 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
地方白酒代理协议书
2014/10/25 职场文书
欢迎词怎么写
2015/01/23 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript