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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 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
SONY SRF-M100的电路分析
2021/03/02 无线电
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Python学生信息管理系统修改版
2018/03/13 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
django中瀑布流写法实例代码
2019/10/14 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
求职信范文怎么写
2014/01/29 职场文书
小学教师师德反思
2014/02/03 职场文书
公益广告宣传方案
2014/02/28 职场文书
老师对学生的寄语
2014/04/09 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
体育运动会广播稿
2014/10/05 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技