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与Prototype并存的冲突的解决方法
Aug 29 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
DOM精简教程
2006/10/03 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python如何存储数据到json文件
2020/03/09 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
python Matplotlib模块的使用
2020/09/16 Python
python实现移动木板小游戏
2020/10/09 Python
Django框架请求生命周期实现原理
2020/11/13 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技