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 清空form表单中某种元素的值
Dec 26 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
vue项目实现图片上传功能
Dec 23 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
浅谈js中的闭包
2015/03/16 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
python 实现归并排序算法
2012/06/05 Python
python Django模板的使用方法(图文)
2013/11/04 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python中一行和多行import模块问题
2018/04/01 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
工程招投标邀请书
2014/01/26 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
个人培训自我鉴定
2014/03/28 职场文书
义和团口号
2014/06/17 职场文书
单位租车协议书
2015/01/29 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
MySQL 数据库范式化设计理论
2022/04/22 MySQL