首先看我们的源代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>深入理解Javascript</title>
  6. <script type="text/javascript" charset="utf-8">
  7. console.log(this);
  8. </script>
  9. </head>
  10. <body>
  11. <h1>深入理解Javascript</h1>
  12. </body>
  13. </html>

我们知道,通过浏览器打开这个页面,包含在<script> </script>标签中的 脚本会被执行,

那我们看一下 console.log(this);  这个this 到底指向的是谁呢?

在Google Chrome 中我们看到:

在Mozilla Firefox 中我们看到:

我们都看到输出的Window,那这个Window 与window是不是相等呢?

接着我们的测试

  1. <script type="text/javascript" charset="utf-8">
  2. console.log(this);
  3. console.log('this == window ? ', this == window);
  4. </script>

运行代码,输出 this == window ?true ,这说明 Window == window,真的是这样吗?

为了搞清楚它们之间的关系,我们又接着测试

  1. <script type="text/javascript" charset="utf-8">
  2. console.log('this = ', this);
  3. console.log('this == window ?', this == window);
  4. console.log('window = ', window);
  5. console.log('Window = ', Window)
  6. console.log('Window == window ?', Window == window)
  7. </script>

看浏览器输出:

Google Chrome :


Mozilla Firefox  :

从输出结果我们可以推出,

this是指向Window对象;this也等于window对象;window也是指向Window对象;Window是指向Window{},是浏览器提供的对象;Window不等于window;

为什么会这样呢?

我们在浏览器控制台中查看Window对象的结构;

原来Window对象包含的一些浏览器厂商实现的API,比如 html5中 的规范 sessionStorage;
它还有一个window的属性,这个属性的值就是指向Window对象;
我的理解:Window对象 是为浏览器厂商服务的,我们不能直接操作Window对象的属性,Window新增的API会反映到 window 对象中;
我们操作window 的属性 会反映到Window 对象中。
比如 定义一个全局变量 window.a = 'aaa';

JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。这就是说,JavaScript的所有对象,都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是window对象。

所有浏览器环境的全局变量,都是window对象的属性。

可以把window理解成JavaScript Context 上下文环境。

深入理解Javascript window对象的更多相关文章

  1. JavaScript Window 对象

    < JavaScript Window Object > && < IE check > JavaScript Window Object Window.loa ...

  2. javascript Window对象 第16节

    <html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...

  3. JavaScript—window对象使用

    window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性: 1. 打开新窗口 window.open(pageURL,name,parameters) 其中:pageU ...

  4. javascript window对象属性和方法

    window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...

  5. JavaScript - window对象相关

    1 . window对象常用方法 : 写法 : window.方法() 注意 : window可以省略不写 alert(), confirm(), prompt()是JavaScript提供和用户交互 ...

  6. 14 JavaScript Window对象

    Window对象表示一个浏览器窗口或者一个框架. 在客户端JavaScript中,window对象是全局对象,所有的表达式都在当前的环境中计算. Window对象的子对象: JavaScript do ...

  7. JavaScript——Window对象

    1.serTimeout()和setinterval()可用于注册在指定的时间之后单词或者重复调用的函数. 2.window对象的location属性引用的是Location对象,表示该窗口当前显示的 ...

  8. JavaScript Window对象

    1.Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档.Location对象的href属性是一个字符串,后者包含 ...

  9. JavaScript Window对象属性

    window 代表浏览器中一个打开的窗口. Window的属性 属性 描述 closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dia ...

随机推荐

  1. 代理设置。 安卓工作室配置用http代理。gradle可能需要这些http代理设置去访问互联网。例如下载依赖。 你想要复制ide的代理配置到这个项目的gradle属性文件吗?

    代理设置. 安卓工作室配置用http代理.gradle可能需要这些http代理设置去访问互联网.例如下载依赖. 你想要复制ide的代理配置到这个项目的gradle属性文件吗? 查看更多细节,请参阅开发 ...

  2. 深入理解指针—>指针函数与函数指针的区别

    一. 在学习过程中发现这"指针函数"与"函数指针"容易搞错,所以今天,我自己想一次把它搞清楚,找了一些资料,首先它们之间的定义: 1.指针函数是指带指针的函数, ...

  3. STM32 Timer : Auto-reload register register

    Auto-reload register (TIMx_ARR) The auto-reload register is preloaded. Writing to or reading from th ...

  4. STM32F4 Timer Internal Trigger Connection

    The Timers can be cascaded to make more complex timing relationships, or longer periods. Internally ...

  5. STM32定时器级联 -- AN2592

    Master configuration When a timer is selected as a master timer, the corresponding trigger output si ...

  6. Spring boot配置多个Redis数据源操作实例

    原文:https://www.jianshu.com/p/c79b65b253fa Spring boot配置多个Redis数据源操作实例 在SpringBoot是项目中整合了两个Redis的操作实例 ...

  7. TStream实现多表提交

    TStream实现多表提交 function TynFiredac.SaveDatas(const ATableName, ATableName2: string; ADeltas: TStream; ...

  8. C#程序中判断DEBUG和RELEASE状态

    编辑 删除 习惯了用老方式(注释的方式)来对程序进行调试,不过昨天才发现这样调试存在很大的隐患:在工程发布的时候如果忘记把该注释的代码注释掉,而让这些调试信息随工程一起发布,如果是可见的调试信息倒好发 ...

  9. 如何调试 Android 上 HTTP(S) 流量

    http://greenrobot.me/devpost/how-to-debug-http-and-https-traffic-on-android/ 如何调试 Android 上 HTTP(S) ...

  10. Android倒计时功能的实现

    Android中的倒计时的功能(也能够直接使用CountDownTimer这个类直接实现,相关此Demo可查看我的博客).參考了网上写的非常好的一个倒计时Demo: watermark/2/text/ ...