JavaScript: this can be used to explain and javascript can be used to explain.

JavaScript: this can be used to explain and javascript can be used to explain.

I recently studied JavaScript and read the book "You Don't Know JS". I think this JavaScript is an excellent method, you must check the JavaScript BASICS (not recommended for beginners ). The author has profound knowledge, thorough understanding, smooth writing, classic cases, and exclusive talents.

This article will make a summary of the story about this in JavaScript, and also add some understanding. It can be regarded as a brick-and-mortar.

What is this in JavaScript?

This is a identifier pointing to an object or undefined.

What is JavaScript? What is a programming language? Write code; why write code? Execute the code and run the command on the computer to process things. Well, the written JavaScript code is used for Execution, and the JavaScript Engine specifies an Execution Environment (Execution Environment ). The execution environment is complex. In short, it can be understood as an execution data container (called an object in JavaScript ).JavaScript code (a series of statements) will be executed in two places, global region, and Function.

This is a Property in the execution environment, pointing to an object targeted for execution..

To describe the relationship between this and the execution environment, you can simply describe it as follows:

Executor_Environment = {invoke_stack:[statck1, statck2, ...],params: [param1, param2, ...],scope_chain:[scop1, scope2, ...],this: execute_ object,...}

Continue to ask. What is the object that this points? When a function is called, this points to the context of the function execution. A target object isDynamic binding by the JavaScript Engine during runtime.

Four scenarios of this in the function

There are four binding conditions for this in the function. The following describes them one by one. The author of the original book emphasizes that in some scenarios, one or two of the four scenarios may be applicable and the strength of the utility needs to be sorted. I do not agree with this, I think it can still be integrated into a certain scenario.

New Keyword

The new keyword in JavaScript is followed by a Function call. A new object is created. When the Function is executed, the JavaScript Engine assigns the newly created object to this, that is, this points to the newly created object. The following are two examples:

New Example 1:

function Func1(){this.a = 3;}var a1 = new Func1();console.log(a1.a); // 3

New Example 2:

function Func2(){this.a = 3;return {};}var a2 = new Func2();console.log(a2.a); // undefined

In the following example,If the Function contains a return statement, the newly created object of the new statement will be discarded.!

Call and apply

Call and apply are used to forcibly specify the object to which this should be pointed in the Function.

A small example of call:

function sayHi(){console.log("Hi,"+ this.name);}var p = {name:"Kevin", age: 26};sayHi.call(p);

Called as an object property

Function is an attribute of an object. The Function is accessed through an object andNowCall. In this case, this in the Function points to this object.

Example:

function sayHi(){console.log("Hi,"+ this.name);}var p = {name:"Kevin", age: 26, hi: sayHi};p.hi();

Directly call Function

The Function name is used to directly call the Function. Generally, the JavaScript Engine binds Global to this. In the browser, Global is window. However, it is said that "use strict", this points to undefined (strictly speaking, undefined is not an object in JavaScript ).

A small example of direct Function call:

function sayHi(){console.log("Hi,"+ this.name);console.log(this);}var name = "Just Joke";sayHi(); // output：Hi, Just Joke// followed global object, which contain name, sayHi。

What does this represent in the global region?

To be honest, I just guess. The statement in the Global region also needs an execution environment, which also has a this identifier pointing to the Global object. Window is in the browser. This is not mentioned in the original book "You Don't Know JS.

Enter the following code in the global region:

var name = "James";console.log("I am "+ this.name); // I am James

Reference

You Don't Know JS

Explains a function for this in javascript.

"Easy to understand": My understanding.
Js functions are an object.
The new Keyword can be used to instantiate a function object as a new object.
After the object is instantiated, this in the source object will point to this new object. Otherwise, if the new object is not instantiated, this points to the default top-level Object window.
For example, the difference between Test () and new Test () is that the former executes only once, and this points to window. The latter executes only once and returns a new object, this points to an empty object (in memory) during instantiation, and alert (this. aa) is undefined. This. aa = 22; adds the aa attribute to this object, so the second alert (this. aa); pop-up 22;
Var aa = 33 in the function; this aa! = This. aa, and aa! = Window. aa, so alert (aa) pops up with 33;
Finally, alert (new Test (). aa); (new Test () the anonymous object already has the aa attribute and the value is 22.

What exactly does this in javascript mean?

JavaScript: What is this?

Definition: this is the object to which the function that contains it is called as a method.
Note: This sentence is a bit, but there is no extra word, the definition is very accurate, we can understand it in three parts!
1. contains its functions. 2. When the method is called. 3. object.
Example:
Function to_green (){
This. style. color = "green ";
}
To_green ();
Who is this in the above function?
Analysis: the function that contains this is to_green.
This function is called as a method.
The object to which the function belongs is ..? We know that by default, all objects are window objects.
OK. this refers to the window object. The execution statement in to_green is changed to window. style. color = "green"
This makes the window very popular, because it does not have the style attribute, so this statement has no effect.
Let's change it.

Window. load = function (){
Var example = document. getElementById ("example ");
Example. onclick = to_green;
}
What is this?
We know that through the value assignment operation, The onclick of the example object gets the to_green method, then the function containing this is onclick,
This is the html object referenced by example.
This environment can be changed as the function is assigned to different objects!
The following is a complete example:

<Script type = "text/javascript">
Function to_green (){
This. style. color = "green ";
}
Function init_page (){
Var example = document. getElementById ("example ");
Example. onclick = to_green;
}
Window. onload = init_page;
</Script>
<A href = "#" id = "example"> click green </a>
Reference: hi.baidu.com/..0.html