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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
纯js实现手风琴效果
Apr 17 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
vue组件学习教程
Sep 09 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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 解决session死锁的方法
2013/06/20 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python和c语言的主要区别总结
2019/07/07 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Django框架表单操作实例分析
2019/11/04 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python更换pip源方法过程解析
2020/05/19 Python
中专自荐信
2013/10/13 职场文书
总经理助理的八要求
2013/11/12 职场文书
单位工作证明范文
2014/09/14 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
反邪教教育心得体会
2016/01/15 职场文书
导游词之青城山景区
2019/09/27 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers