Javascript Note: deeply analyzes the creation (medium) of objects in javascript)

In-depth analysis of the creation of objects in javascript this small series is the most popular article in my blog. Some bloggers urged me to finish the next article, yesterday and today, I found that I could not finish my next half of the article, so I divided the next article I was going to write into two parts. This topic... SyntaxHighlighter. all ();

 

In-depth analysis of the creation of objects in javascript this small series is the most popular article in my blog. Some bloggers urged me to finish the next article, yesterday and today, I found that I could not finish my next half of the article, so I divided the next article I was going to write into two parts.

In the previous article of this topic, I talked about three ways to create objects. Finally, I understood how to create javascript objects by analogy with java Object-oriented thinking. If I have created the core object based on the title, I have already explained the problem. However, when I wrote the last article, I always felt that I was missing something, And I lacked the in-depth analysis in my title. Creating a small javascript Object contains an extremely broad extension of the technology. When it comes to actual development, there is not a certain accumulation of divergent knowledge, and we think we will encounter problems that are hard to understand, in the middle and lower sections, I want to open this question from the knowledge development I mentioned earlier.

1. Another understanding of class attributes and Methods

In the previous article, I wrote a sentence: "1. class attributes and Methods: object initialization can be considered as class attributes and methods. This definition is widely used in jQuery."

You know that a class in java can have static attributes and methods. You can access these attributes and methods without instantiating the class objects, but does javascript simulate this feature only through object initialization? In programming languages, the method and attribute of a class are more standard: static scope-defined attributes and methods can be accessed from the same location at any time. In fact, strictly speaking, javascript does not have a static scope. object initialization can produce this effect, but it is too intuitive, in the previous blog, I talked about the class definition omitted during the javascript language design. Instead, I assigned the class definition to the constructor. So we can think about it like this, to enable the javascript language to have class attributes and methods, the best form of presentation is to enable the constructor to have attributes and Methods. You can refer to the following code:

 

Function JsObj ()

{

This. sayHello = function (){

Console. log ('Hello World !!! ');

}

}

 

JsObj. whosay = function (){

Console. log ('sharpxiajun say Hello World !!! ');

}

 

JsObj. whosay ();

Var obj = new JsObj (); // sharpxiajun say Hello World !!!

Obj. sayHello (); // Hello World !!!

This way of writing reflects the static attributes of the class and the features of the method will be clearer. Some people recently told me that the object-oriented approach in javascript has now become a kind of object-oriented standard, some new languages now use javascript to design their own object-oriented mechanisms, but I am willing to use the java method as the standard method of object-oriented, javascript is implemented in a simulated way. If javascript object-oriented is understood as a new standard, inertial thinking may make it difficult for me to have a clearer understanding of javascript object-oriented practices. If the principle used by the code above is that functions in javascript are objects, you can assign values or assign methods to them. This problem is very simple and easy to understand. Here I come up with this code to tell you that when I am reading the source code of some classic frameworks, some design ideas use this method, but I didn't understand them as static variables, so some code didn't understand them.

2. Questions about the this pointer

This is the most important concept of javascript. Its usage is the key to understanding the essence of javascript. Let's take a look at the following sentence, which shows the essence of this usage:

Keyword: this is used in object methods. this always points to the object that calls this method.

This statement indicates that this is an object method, which contains two content: object and method. The method belongs to the object. The sample format is:

 

Var obj = {}; // or var obj = new Object (); the two are equivalent.

Obj. nation = 'China ';

Obj. say1 = function ()

{

Console. log (obj. nation );

}

Obj. say2 = function ()

{

Console. log (this. nation );

}

 

Obj. say1 (); // China

Obj. say2 (); // China

The result is the same. this shows that this is used in object methods. this always points to the object that calls this method. This is a standard definition of this usage, but it is really hard to understand this concept. I will leave this definition aside and list the usage of this.

Usage 1: Use in Functions

 

Function JsObj ()

{

This. nation = 'China ';

Console. log (this. nation );

}

JsObj (); // China

Does this point to the JsObj function? The answer is NO. this points to the window. Check the following code:

 

Function JsObj ()

{

This. nation = 'China ';

Console. log (this. nation );

}

JsObj (); // China

 

Console. log (nation); // China

Console. log (window. nation); // China

Console. log (this. nation); // China

If you see the effect, it points to the window. I think some kids shoes may not quite understand why. It doesn't matter. This question will lead to what I will talk about in the next section.

Usage 2: Call an object Method

This usage is similar to the usage of the this pointer. The Code is as follows:

 

Function say ()

{

Console. log (this. nation );

}

 

Var obj = {};

Obj. nation = 'China ';

Obj. objSay = say;

Obj. objSay (); // China

Usage 3: Call the constructor

Speaking of javascript constructor, I will emphasize a basic knowledge repeatedly: the constructor in javascript contains the features of the class. The code I wrote is as follows:

 

Function JsObj ()

{

This. nation = 'China ';

}

Var obj = new JsObj ();

Console. log (obj. nation); // China

This nation is definitely not a window. Do you believe it or not? We can test it:

 

Var nation = 'usa ';

Function JsObj ()

{

This. nation = 'China ';

}

Var obj = new JsObj ();

Console. log (obj. nation); // China

Console. log (nation); // USA

Usage 4: this

Apply () is a method of a function object. Its function is to change the object called by the function. Its first parameter indicates the object called by the function after the change. Therefore, this is the first parameter. The test code is as follows:

 

Var nation = 'usa ';

Function say ()

{

Console. log (this. nation );

}

Var obj = {};

Obj. nation = 'China ';

Obj. objSay = say;

Obj. objSay. apply (); // USA

Obj. objSay. apply (obj); // China

When the apply () parameter is null, The Global object is called by default. Therefore, the running result is USA, which proves that this is a global object. When the object obj is input to apply, this points to the object obj, and the running result is China.

3. Execution Environment and scope

In the summary above, I raised a question when I used this in javascript. Why does this point to window? To explain this question, there will be a very important concept execution environment and scope in javascript.

The first thing we talk about is the execution environment. What is the execution environment? In javascript, the execution environment is divided into two types: global environment and local environment. The shared methods and attributes on the entire page are in the global environment, the execution environment in function {} is a local environment. The execution environment defines other data that variables or functions have the right to access and determines their respective behaviors, each execution environment defines a variable object related to it. All variables and functions defined in the environment are stored in this object, although the code we write cannot access this object, however, the parser will use it in the background when processing data.

The global execution environment is also the peripheral execution environment, which is within the scope of the web browser, the global scope is different from the global scope of javascript. The Global execution environment is considered a window object. Therefore, global variables and functions are created as methods and properties of the window object, the global execution environment knows that the application will be destroyed only when it exits, for example, the web page is closed or the browser is closed. The local environment uses the function object as the correlated object.

The javascript language defines the concept of a global execution environment and a local execution environment, which generates an extremely important application: the scope chain. When the code is executed in an environment, it creates a scope chain composed of variable objects. Its purpose is to ensure that the execution environment has the right to access all variables and functions in an orderly manner. The front end of the scope chain is always the variable object in the environment where the code is currently executed. If the environment is a function, the activity object is used as the variable object. The activity object contains only one variable at the beginning, which is the arguments object. arguments does not exist in the global environment, the next object in the scope chain comes from the external environment that contains the previous object, and the next variable object comes from the next stage, and so on, continues to the global environment, the global environment is always the last object of the scope chain.

Well, check whether this explanation is a bit dizzy. I want to think about it from another angle. In javascript, all attributes and Methods belong to a certain object, in javascript, all method or attribute calls are obj. method (), obj. name Style. If the calling object cannot be found when calling a property or method in the program code, the javascript parser will find it in the upper-level scope of the function scope until the window global environment, if it cannot be found, it is granted to the window object by default.

Well, let's write so much about today's content. I really didn't expect that the creation of simple javascript objects can extend so much knowledge. I think this kind of research method is quite good, there have been too many java projects recently (I want to start a new series recently and I have always wanted to develop android series, but someone told me that I have limited energy, I still need to write something I haven't written). I don't have enough passion to write the commit Crip. I really hope to have a full-time front-end environment, but java is also very interesting, after talking with Boyou recently, I became more motivated to write the three javaEE frameworks and cheer myself up.

 

 

Author's summer forest