JQuery theatrical edition: javascript_jquery

Learning jQuery (Theatrical Version) from scratch what you must know about javascript 1. Summary

This is the Theatrical Version of the jQuery series of tutorials, which is irrelevant to the main line of jQuery. It mainly introduces some javascript details that you will ignore at ordinary times. It is suitable for developers who want to consolidate the theoretical knowledge and basic knowledge of javascript.

Ii. Preface

I recently interviewed some people and found that even experienced developers often blur some basic theories and details. I wrote this article because I learned the following content for the first time and found that I had some gains and insights. in fact, we can easily ignore more details about javascript. This article is only the tip of the iceberg. I hope everyone can gain some benefits through this article.

Iii. Javascript object-oriented

Javascript is an object-oriented language. Although many books have explained it, many novice developers still do not understand it.

Create object

Ps: I have previously written a detailed article on Object creation (prototype method, factory method, etc.) but cannot find it. If I can find it again, I will add it. the following is a brief introduction.

In C #, we use the new keyword to create an object. In javascript, we can also use the new Keyword:

var objectA = new Object();

But in fact, "new" can be omitted:

var objectA = Object();

However, we recommend that you keep the syntax unchanged,An object is always declared with the new keyword.

Create attributes and assign values

In javascript, attributes do not need to be declared. They are automatically created when values are assigned:

objectA.name = "my name";

Access attributes

Generally, we use "." To access object properties hierarchically:

alert(objectA.name);

Nested attributes

The attributes of an object can also be any javascript Object:

VarObjectB = objectA; objectB. other = objectA;// At this time, the three values below are equivalent, and changing any of the values changes the other two values.

objectA.name;objectB.name;objectB.other.name;

Use Index

If there is an attribute named "school. college ", so we cannot pass ". "Access, because" objectA. school. the college statement is the college attribute of the school attribute object of objectA.

In this case, you need to set and access attributes through the index:

     objectA["school.college"] = "BITI";     alert(objectA["school.college"]);

The following statements are equivalent:

    objectA["school.college"] = "BITI";    var key = "school.college"    alert(objectA["school.college"]);    alert(objectA["school" + "." + "college"]);        alert(objectA[key]);

JSON format syntax

JSON refers to Javascript Object Notation, that is, Javascript Object Notation.

We can use the following statement to declare an object and create attributes at the same time:

    // JSON    VarObjectA = {name:"MyName", Age: 19, school: {college:"University","High school":"High School"}, Like :["Sleeping","C #","Sleeping"]}

The JSON syntax format uses "{" and "}" to represent an object. The format of "attribute name: value" is used to create an attribute. Multiple Attributes are separated.

In the preceding example, the school attribute is an object. The like attribute is an array. After an object is created using a JSON string, you can access the attribute in the form of "." or an index:

objectA.school["high school"];objectA.like[1];

Static Method and instance method

Static Method is a method that can be used without declaring an instance of the class.

An instance method is a method that requires you to declare an instance of a class using the "new" keyword before you can access the instance.

    FunctionStaticClass (){};// Declare a classStaticClass. staticMethod =Function() {Alert ("Static method")};// Create a static methodStaticClass. prototype. instanceMethod =Function(){"Instance method"};// Create an instance method   

The staticClass class is declared first, and a static method staticMethod and a dynamic method instanceMethod are added to it. The difference is that prototype attributes are used to add dynamic methods.

You can directly call static methods:

staticClass.staticMethod();

However, dynamic methods cannot be called directly:

StaticClass. instanceMethod (); // The statement is incorrect and cannot be run.

You must instantiate it before calling it:

    VarInstance =NewStaticClass ();// First instantiateInstance. instanceMethod (); // you can call the instance method on the instance.

4. The Global object is the window attribute.

We usually declare a global variable in the script label. This variable can be used by any method on the current page:

  <script type="text/javascript">    var objectA = new Object();  
  script>

However, we should also know that the global variable objectA is actually created on the window object and can be accessed through the window object:

window.objectA

5. What is a function?

We all know how to create a global function and call it:

    function myMethod()    {      alert("Hello!");    }    myMethod(); 

In fact, like a global object, the name of the method created using the function keyword (you can also create a class) is actually the myMethod attribute created for the window object, and the value is an anonymous method, the preceding statement is equivalent:

    window.myMethod = function()    {      alert("Hello!");    }

No matter which method is used for the Declaration, the function name is used to create the properties of the window object during actual saving, and the value is only the function body without the function name.

Therefore, the following three declaration methods are equivalent:

    function myMethod()    {      alert("Hello!");    }    window.myMethod = function()    {      alert("Hello!");    }    myMethod = function()    {      alert("Hello!");    }

6. What is "this "?

In C #, this variable usually refers to the current instance of the class. It is different in javascript,In javascript, "this" is the context of the function, not the declaration, but the call.Because the global function is actually a window attribute, this indicates the window object when the global function is called on the top layer.

The following example demonstrates all of this:

    var o1 = { name: "o1 name" };    window.name = "window name";    function showName()    {      alert(this.name);    }            o1.show = showName;    window.show = showName;    showName();    o1.show();    window.show();

Result:

The result shows that this points to the window object when calling the function at the top level and calling the function using the window object, and this points to the current object when calling the function in the object.

7. Closure in javascript

The concept of closure is hard to understand. Let's first look at the definition of closure:

A closure is an expression (usually a function) that has many variables and is bound to these variables. Therefore, these variables are part of the expression.

Simple expression:

Closure refers to the variables from the environment when the function instance is executed.

Let's take a look at the following example:

  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>
   title>
    head><body>  <p id="pResult">
     p>  <script type="text/javascript">    function start()    {      var count = 0;      window.setInterval(function()      {        document.getElementById("pResult").innerHTML += count + "
";        count++;      }, 3000);    };    start();  
      script>
       body>
        html>

Count is a variable in the start function. Generally, we understand the role of count. Therefore, in the start () function, it should disappear after the start () function is called. however, the result of this example is that the count variable will always exist, and 1 is added each time:

Because the count variable is part of the closure of the anonymous function created in setInterval (that is, the function containing count ++!

In other words, the closure is the function itself first. For example, the above anonymous function itself is added with the count variable required for running the function.

Closures in javascript are implicitly created, but they do not need to be explicitly created as other languages that support closures. we rarely encounter this in C # Because C # cannot declare a method again in the method. while calling another method in one method usually uses parameters to pass data.

This article will not detail closures. For more information, see the following article.

8. Summary