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实例收集(20个)
Apr 21 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
屏蔽script注入小例子
Nov 12 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
微信自定义分享php代码分析
2016/11/24 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Js apply方法详解
2017/02/16 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
在python里面运用多继承方法详解
2019/07/01 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
工业设计专业推荐信
2013/10/29 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
给老师的道歉信
2014/01/11 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
交通安全标语
2014/06/06 职场文书
岗位说明书怎么写
2014/07/30 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
小学校园广播稿
2015/08/18 职场文书
八年级历史教学反思
2016/02/19 职场文书