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代码
Sep 07 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
javascript中layim之查找好友查找群组
Feb 06 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巧获服务器端信息
2006/12/06 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php桥接模式应用案例分析
2019/10/23 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python实现石头剪刀布程序
2021/01/20 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python常用库大全及简要说明
2020/01/17 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
竞聘上岗演讲稿
2014/05/16 职场文书
档案保密承诺书
2014/06/03 职场文书
公司收款委托书范本
2014/09/20 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
小班下学期个人总结
2015/02/12 职场文书
行政二审代理词
2015/05/25 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python