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重建星际争霸
Dec 22 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
javascript实现前端分页功能
Nov 26 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
其他功能
2006/10/09 PHP
php获取远程文件大小
2015/10/20 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
实例解析php的数据类型
2018/10/24 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
使用Python写个小监控
2016/01/27 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
会计应聘求职信范文
2013/12/17 职场文书
写自荐信要注意什么
2013/12/26 职场文书
青安岗事迹材料
2014/05/14 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
python异常中else的实例用法
2021/06/15 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android