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获取地址栏中传递的值
Jul 02 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js有序数组的连接问题
Oct 01 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jQuery定义插件的方法
Dec 18 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 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
PHP PDO函数库详解
2010/04/27 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
使用php计算排列组合的方法
2013/11/13 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
php与js的区别是什么
2013/08/05 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Javascript之String对象详解
2016/06/08 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
汽车专业毕业生推荐信
2013/11/12 职场文书
消防安全月活动总结
2015/05/08 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android