First look at our source code.
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>In-depth understanding of Javascript</title>
<script type="text/javascript" charset="utf-8">
console.log(this);
</script>
</head>
<body>
<h1>In-depth understanding of Javascript</h1>
</body>
</html>
We know that if you open this page through a browser, the scripts contained in the <script> </script> tag will be executed.
Then let’s take a look at console.log(this); who does this point to?
In Google Chrome we see:
In Mozilla Firefox we see:
We all see the output Window, so are the Window and Windows equal?
Next our test
The code copy is as follows:
<script type="text/javascript" charset="utf-8">
console.log(this);
console.log('this == window ? ', this == window);
</script>
Run the code and output this == window ?true, which means Window== window. Is this really the case?
To figure out the relationship between them, we continue to test
The code copy is as follows:
<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>
View browser output:
Google Chrome:
Mozilla Firefox:
From the output results we can deduce,
The code copy is as follows:
This is a Window object;
This is also equal to a window object;
window also points to Window objects;
Window is a pointing to Window{}, which is an object provided by the browser;
Window is not equal to window;
Why is this happening?
We view the structure of Window objects in the browser console;
It turns out that the Window object contains some APIs implemented by browser manufacturers, such as the standard sessionStorage in html5;
It also has a window property, and the value of this property points to the Window object;
My understanding: Window objects serve browser manufacturers. We cannot directly manipulate the properties of Window objects. The newly added APIs of Window will be reflected in the Window object;
The properties we operate on window will be reflected in the Window object.
For example, define a global variable window.a = 'aaa';
All objects in JavaScript exist in a running environment, which is also an object, called a "top-level object". This means that all objects in JavaScript are subordinates of "top-level objects". Different operating environments have different "top-level objects". In the browser environment, this top-level object is a window object.
All browser environment global variables are properties of window objects.
Windows can be understood as a JavaScriptContext context environment.