preface

Window, this, and Window are often used in the front-end development process. These three are always confused. Here is a record. See the JavaScript article this and Window and the combined JavaScript reference manual

The window object

The window object

All browsers support window objects. It represents the browser window. All global JavaScript objects, functions, and variables automatically become members of the Window object. Global variables are properties of the window object. Global functions are methods of the window object.

Also, the Document object (of the HTML DOM) is a window object property. The usual history object is also a child of the window

Note that no special syntax is required to refer to the current window; you can use properties of that window as global variables. For example, you can just write document instead of window.document. Similarly, you can use the methods of the current window object as functions, such as alert() instead of window.alert().

Uncaught ReferenceError: if a = 999, Uncaught ReferenceError: A is not defined because a = 999 is essentially window. A = 999 is adding attributes to the window object, and no error will be reported

Because the browser will think that the operation of the current TAB is referring to the current TAB, and that it is accessing the property (window.document)/adding the property (window.a = 999) to the window object of the TAB, So you can abbreviate it to give the Window object access property (document)/Add property (a = 999)

Window even contains itself (window.window), which is what we normally use as a window

windoe.localstorage
Copy the code

The document page

Every HTML Document loaded into the browser becomes a Document object. The Document object allows us to access all elements of an HTML page from within a script

History Historical records

The History object contains urls that the user has visited (in a browser window).

  • History.back () : loads the previous URL in the history list (if present).
  • History.forward () : loads the next URL in the history list.
  • History. go(0) : refresh the current web page

The location address url

The Location object contains information about the current URL(Uniform Resource Locator). Uniform Resource Location, accessible through the window. Location property. A common operation is:

  • Location. href returns the full URL.
  • Location.assgin () causes the window to load and display the document in the specified URL, preserving the browsing history;

Navigator browser information

  • Navigator.appname Returns the name of the browser.
  • Navigator. platform returns the operating system platform on which the browser is running.

Screen screen

The Screen object contains information about the client’s display Screen.

  • Screen. height Returns the height of the display screen. Width Returns the width of the display screen.
  • AvailHeight The available height of the display screen (except for the Windows taskbar).
  • Screen.availwidth The available width of the display screen (excluding the Windows taskbar)

Just a few of these properties/methods are listed above; see the JavaScript Reference manual for details

The difference between window and window

I have been confused about Windows and Windows for a long time. I searched on the Internet and got some ideas:

Let’s first print both on the console:

You can see:

  • Window is a function that I understand to come with a browserThe constructor
  • Window is an object created by the constructor windowInstance objects

Verify:

The rest of history and history, document and document, location and location, etc., are also related in this way, that is, the latter is the corresponding constructor of the former, and the former is the instance object constructed by the latter. The properties/methods of the former come from the prototype object of the latter.

This keyword

  1. When the number of functions is executed, this always refers to the object on which the function was called.
function fun(){
    console.log(this.n);
}
var obj = {};
obj.n = "Here it is"; obj.m = fun; obj.m();// The execution result is: here
Copy the code
  1. When a function has no object to which it belongs, it points to a global object (window).
var n = "To me";
function fun(){
    console.log(this);
}
console.log(window.n);/ / to me
console.log(this.n);  / / to me
fun();//
Copy the code

Execution Result:

  1. When used as a constructor, this refers to the instance object generated by the constructor
function fn(){
    this.x = 123; // this points to the instance object obj created by calling this function
}
var obj = new fn(); Obj = {x: 123}
Copy the code
  1. How do I change the direction of this?
  • Call (object, parameter 1, parameter 2, parameter 3…)
  • Function.apply(object, parameter array)
  • Function. Bind (object, parameter 1, parameter 2, parameter 3…)

Where this in the function refers to the object

Example:

var x = 11;
function fn(){
    console.log(this.x)    
}
var obj = {fn:fn,x:"22"}
var obj2 = {x:"33"}
obj.fn.apply(); // 11, global objects are called by default when apply() is null. This currently refers to global objects
obj.fn.apply(obj); / / 22
obj.fn.apply(obj2); / / 33
Copy the code
function fun(){
    console.log(this);
}
fun(); // window{... }
var obj={a: "haha"};
fun.bind(obj);
obj.fun=fun;
obj.fun(); // obj {a: "haha", fun: ƒ}
Copy the code

This is just a brief introduction to the This pointer, but you can read more about it in the JavaScript series on the differences between normal functions, arrow functions, constructors and their corresponding This Pointers

In addition to my understanding:

This is like a pointer that determines who to refer to from the moment the function is called, regardless of the current execution context. Window is an instance object created by JavaScript’s own Window constructor, and contains many browser-specific properties/methods that we need to use in the open process