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 相关文章推荐
使用jsonp完美解决跨域问题
Nov 27 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
java解析json方法总结
2019/05/16 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
JavaScript实现两个数组的交集
2022/03/25 Javascript