Front-end Learning practice notes--javascript in-depth "1"

This year fragmented read a few JavaScript books, look back to read the previous JavaScript learning notes, it is a bit embarrassing, highlighting the "superficial" two words, but the deeper the more profound the more and more deep, a kind of feeling in this mountain, blankly but not its essentials , simply write in one side of the blog, to achieve breakthroughs, and even higher.

Read the book recommended:

The language of JavaScript Douglas Crockford

JavaScript design mode Addy Osmani

JavaScript design mode Ross Harmes

"Li Shi JavaScript"

The essence and programming practice of JavaScript language

These books are among the best in the vast majority of JavaScript books, and the JavaScript on the market has to say that there is too much water and too little nutrients. Many books have been trapped by several pages. Instead, there are some good blogs online, blog park inside, blog Park inside the Knowledge base, there are some other personal blog, are very good, but most are more scattered, knowledge points are also scattered. In addition, as JavaScript itself is updated, there are a series of plug-ins such as Jquery,yui, Nodejs rise and so on, the impact of different browser updates and compatibility issues, resulting in the gradual neglect of the original JS, but no matter how to say, also can not conceal the charm of the language itself JS.

JS has a lot of deep places to learn, the next focus on some of the more fun things, these are also I read a lot of books and blog accumulated, but the best reader is a little bit of JS Foundation, because I said things may be a little jumping, not the basic tutorial.

Do not explain the complexities of the grammar, or those deep pits, or obscure design patterns, through simple examples to learn to distinguish between static and dynamic language differences in common

Landlord is a poor memory, especially afraid of trouble, landlord loyal and firmly believe that with the simplest technology to achieve user needs, can catch mouse cat is the principle of the cat, against excessive pursuit of optimization, the pursuit of complex design patterns.

Just to be able to clean the implementation of my function. The main points to explain:
1. var variable declaration function declaration in advance

2. Use of Call apply

3. New instantiation, replication, reference differences

4. Use of the prototype chain

5. Closures keep the user state

6. Object-oriented implementation, inheritance

7. This pointer

8. Arrays, objects, JSON

9. Amd,cmd Introduction

The deep pits in the ten. js

11. Continue in-depth direction

1. var variable declaration function declaration in advance

Refer to the variable/function declaration, understand a core, Js parsing and execution of separate, understand this, a lot of problems and strange things are understood.

When the JS code executes, it passes through two steps, first parsing (precompilation), and then executing. Parsing is the declaration of variables, has not been assigned, so it is undefined, to the specific implementation of the time will be given specific values. To divide an assignment statement into two parts, such as var a = 5; var A; a = 5; In such a way, the two parts look, the complex case is as follows :

/** * Variable declaration and function expression (I think it should be called definition, but everyone seems to have declared it by default) * are declared with Var, so if you think of the function as a worthwhile thing, it's one thing to assign a value to a variable. * The following statements execute in the following order: * First variable declaration, VAR F; So the first output is undefined * because there is a definition of two Var F, after which the definition overrides the previous definition, so the second output is 25 * When the third output is the specific contents of the F function * if the var f = 0; and var f = function (x) {return x *x;} Order upside down, that second output is going to be an error, * The third output is 0 **///Console.log (f);//var f = 0;//var f = function (x) {//return x*x;//}//Console.log (f (5));//Console.log (f);/** * variable declaration and function declaration * The following statement executes the output as follows: * The first output is the specific contents of the function * The second output is 16, * The third output is 0 * The problem is that the function statement is technically not a statement. * JS in the statement will trigger dynamic behavior, * But the function definition describes a static program structure. * Statements are executed at run time, and the function is actually run before it is defined when the JS code is parsed or compiled. * When the JS parser encounters a function definition, it parses and stores the statement that makes up the body of the function * and then defines a property with the same name as the function * (if the function is defined in another function, define the property in the calling object, * otherwise define the property in the global object) to save it. This will produce some strange behavior. * In summary, the function declaration is better than the variable declaration. */Console.log (f); Console.log (f (4));functionf (x) {returnx*x;}varF = 0; Console.log (f);

In fact, theparser of JS does not treat function declaration and function expression equally. For a function declaration, theJS parser will read first, ensuring that the declaration has been parsed before all code executes, and that the function expression, like a variable of other primitive types, will be parsed only when executed to a certain sentence, so in practice, they will be different. When you define a function using the form of a function declaration, you can write the call statement before the function declaration, and the latter, in doing so, will error.

2. Use of Call apply

1. Method definition

Call Method:
Syntax: Call ([thisobj[,arg1[, arg2[, [,. ArgN]]])
Definition: Invokes one method of an object, replacing the current object with another object.
Description
The call method can be used to invoke a method in place of another object. The call method can change the object context of a function from the initial context to a new object specified by Thisobj.
If the Thisobj parameter is not provided, then the Global object is used as the thisobj.

Apply method:
Syntax: Apply ([Thisobj[,argarray]])
Definition: A method of applying an object that replaces the current object with another object.
Description
If Argarray is not a valid array or is not a arguments object, it will result in a TypeError.
If none of the Argarray and Thisobj parameters are provided, then the Global object is used as a thisobj and cannot be passed any parameters.

In simple terms, the difference is that the arguments passed after the Apply method are arrays, and the call method is Add.call (doubleadd,a,b,c). The method of concrete execution looks at the function in front of call, apply,

If Thisobj is not provided, it is equivalent to global.

Specifically, look at a few examples:

function Add (b) {    alert (a+b);} function Sub (b) {    alert (a-b);} Add.call (Sub,3,1);  = = Add.call (null,3,1); // Output 4


Output 2

//This is a bit of a reference to the this pointer, this is the runtime contextfunctionClass1 () { This. Name = "Class1";  This. Shownam =function() {alert ( This. Name); }     This. Detail = "Hello-1";  This. ShowDetail =function() {alert ( This. detail); }}functionClass2 () { This. Name = "Class2";  This. Detail = "Hello-2";  This. ShowDetail =function() {alert ( This. detail); }}varC1 =NewClass1 ();varC2 =NewClass2 (); C1.showNam.call (C2); C1.shownam (); C1.showdetail (); C2.showdetail ();//Class2//Class1//hello-1//hello-2

You can also use call to achieve inheritance, specific examples do not give, refer to the article JS in the calling () and apply () method ... It was written in detail, and all that was said.

3. New instantiation, replication, reference differences

Remember that function has the ability to object, which is embodied in the use of new. If you do not use new to create an object (that is, copy the same content), or a reference, changes to the internal variables of the function cause other reference values to change.

This involves the concept of objects, unity in the object of time to say it. It's written here today.

All of the above are personal original, please reprint the time attached to the original link: HTTP://WWW.CNBLOGS.COM/TONYLP

Front-end Learning practice notes--javascript in-depth "1"