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中的Screen屏幕对象
Jan 16 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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中isset()和unset()函数的用法小结
2014/03/11 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
制作特殊字的脚本
2006/06/26 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
单位实习证明怎么写
2014/01/17 职场文书
学习经验交流会主持词
2014/04/01 职场文书
学校献爱心活动总结
2014/07/08 职场文书
党员作风建设整改方案
2014/10/27 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014全年工作总结
2014/11/27 职场文书
活动总结模板大全
2015/05/11 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Python序列化与反序列化相关知识总结
2021/06/08 Python
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android