Learning about the essence of JavaScript language (I). Objects and functions

Recently, I have been studying the essence of JavaScript language translated by pony and Qin GE. It is rumored that the content is profound and profound. The meaning of some chapters often needs to be suddenly enlightened only when the content of the subsequent chapters is viewed. Therefore, it is said that this book needs to be studied repeatedly and is truly worthy of the name. In the past two days, I have read the objects and functions. Here I take a note of what I think I need to pay attention:

 

① Naming rules for Attribute names in object Constants

I remember that when I first learned object constants, I thought it was really easy. One object name, one braces, and N "name/value" pairs. OK, OK! However, during the learning process, I also encountered some questions. For example, in some JS books, when writing an object constant, some attribute names in the object are enclosed by quotation marks, some attribute names do not have quotation marks, such as the following object constants:

VaR flight = {<br/> Airline: "oceannic", <br/> first_name: "Li", <br/> "first-name ": "Hu" <br/>}

This should be a familiar object constant. But why does first_name have no quotation marks, while first-name requires quotation marks. I have never explained any JS books I have read before, and I am also used to enclose all attribute names in quotation marks when writing object constants. In this book, I finally give a detailed explanation. In the object literal, if the attribute name is a legal JavaScript identifier (the identifier is a word, followed by one or more letters, digits, or underscores) and is not a reserved word, the attribute name can be enclosed in quotation marks. For the first time, the attribute name must be enclosed in quotation marks. In this example, first_name and airline are valid identifiers, while first-name is not identifiers, so quotation marks must be added.

 

② Prototype

As we all know, JS inheritance is not traditional object-oriented, but prototype inheritance. Therefore, in JS, each object is connected to a prototype object and inherits attributes from it. The object is literally connected to object. prototype. It is important to note that the prototype connection does not work when it is updated. It only works when the value is retrieved. The update does not take effect, that is, the object can only change its own attributes, but cannot change the attributes in the prototype chain it connects. When an object is retrieved, it first checks whether it has this attribute. If not, it then retrieves the prototype object it is connected to. If no prototype object exists, continue to search for the prototype object, that is, search for the prototype object along the prototype chain.

 

③ Initialize the parameters in the Function Definition

We know that the function definition usually includes four parts: function, function name (anonymous function can be omitted), parameter, and curly brackets. But how does the JS engine initialize the parameters. We know that JS is generally divided into two steps when parsing functions:

The first is to build a syntax analysis tree through syntax analysis and pre-resolution.

The second is to execute a function. When executing each function, a specific execution environment and activity object will be created for the function.

For details, see the syntax and lexical scopes of a blog reposted. What I want to talk about here is that common variables are initialized when the syntax analysis tree is built, and they are initialized to undefined (except for global variables, global variables are directly initialized to the values assigned to them), while the form parameters in the function are initialized to the actually provided parameter values only when the function is called.

 

④ This

We know that a function can be called either as an object method or independently. When it acts as an object's method, it is obvious that it points to the object that calls it. But what if it is called independently? An example is provided:

VaR flight = {<br/> Airline: "oceanic", <br/> Number: 815, <br/> 'first-name': 'hu ', <br/> Departure: {<br/> IATA: "Syd", <br/> time: "", <br/> city: "sysydney" <br/>}< br/> flight. double = function () {<br/> var that = This; <br/> var helper = function () {<br/> alert (that = This ); <br/>}< br/> helper (); <br/>}< br/> flight. double (); 

First, I assign this of the outer function to that, and then compare this keyword with that in the internal function to make a full equal sign. The result is a false one! It hurts. In the inner function, this is not bound to the outer function. So what is it bound? Okay. modify the code:

Flight. double = function () {<br/> var that = This; <br/> var helper = function () {<br/> alert (window = This ); <br/>}< br/> helper (); <br/>}< br/> flight. double (); 

Execute this and window, and then run it again. The displayed result is true. It is concluded that when a function is called independently (the Independent method here is that it neither belongs to an object nor is called using new), it is bound to a global object. At this time, in order to use this in the outer function, we have demonstrated in the example that we can define a that variable in the outer function scope, and then assign this reference to it, in the internal function, you can use that for access.

 

⑤ Great closures

In practice, we define an object constant as follows:

VaR myobject = {<br/> value: 0, <br/> increment: function (INC) {<br/> This. value + = typeof Inc === 'number '? INC: 1; <br/>}< br/>} 

This is a simple definition. However, there seems to be some problems !! Yes, it is safe. In some cases, I need to use the Increment Function to modify the value. However, if this is defined, it seems that the value can be changed (myobject. value), which completely violates our original intention. How can we modify it? Good. Use closures.

VaR myobject = function () {<br/> VaR value = 0; <br/> return {<br/> increment = function (INC) {<br/> value + = typeof Inc = 'number '? INC: 1' <br/>}< br/> getvalue: function () {<br/> return value; <br/>}< br/> }();

Let's look at it again. At this time, the value of value can be changed at will in the above example. Of course, the file is no. The function scope makes it only available to two methods in the returned object and unavailable to other programs. Alas, the value of myobject is not a function, but a closure returned after an anonymous function is called. Alas, closure is really great!

 

Level 6

When using jquery, You should know why a jquery object can call so many methods in a statement. Yes. cascade is used. So what is the cascade principle? We know that some methods in the method operation type do not return any values. At this time, undefined returned by these methods. If we set it a little, let these methods that do not need to return this, that is to say, adding the 'return this 'statement at the end of these methods will not implement cascading ~ Hey, the following is a small demo I have made. I believe you will understand cascade:

Function $ (e) {<br/> return new $. FN. init (E); <br/>}< br/> $. fn = $. prototype = {<br/> init: function () {<br/> var ELEM = document. getelementbyid (arguments [0]); <br/> This [0] = ELEM; <br/>}, <br/> width: function () {<br/> alert (this [0]. style. width); <br/> return this; <br/>}, <br/> Height: function () {<br/> alert (this [0]. style. height); <br/> return this; <br/>}< br/>}; <br/> $. FN. init. prototype = $. FN; <br/> $ ("DV "). width (). height ();

Run this code and the DV width and height are displayed at one time. The seemingly mysterious cascade is so simple.

 

The above summary is all of the knowledge points I think are more valuable or I have not noticed before. Of course, the summary in many places is not perfect. In the next study of this book, I will continue to summarize it.