Reproduced JavaScript Basics Details

Source: Internet
Author: User

Zhang Zixiu
Source: http://www.cnblogs.com/zhangziqiu/
This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility. I. Summary

This article is a series of the jquery tutorial, which is not related to the main line of jquery, mainly introduces some of the JavaScript details that you would normally ignore. Read for developers who want to consolidate the knowledge and fundamentals of JavaScript theory.

Two. Preface

Recently interviewed some people, found that even experienced developers, for some basic theories and details are often blurred.  Writing this article is because in my own case, the first time to learn the following content, I found that I do have a harvest and sentiment. In fact, we can easily ignore the details of JavaScript and more, this article is only the tip of the iceberg. I hope that we can all get some gains through this article.

Three. JavaScript Object-oriented

JavaScript is an object-oriented language, although many of the books are explained, but there are still a lot of novice developers do not understand.

Creating objects

PS: Previously wrote a detailed article about creating objects (prototype method, factory method, etc.) but I can't find it, but if I can find it, I'll add it again. The following is just a brief introduction.

In C # We use the New keyword to create objects, and in JavaScript we can also use the New keyword:

New Object ();

But actually "new" can be omitted:

var objecta = Object ();


But I recommend that you always declare an object with the New keyword in order to maintain the syntax.

Create a property and assign a value

In JavaScript, attributes do not need to be declared and are created automatically when they are assigned:

"My Name";

Accessing properties

Generally we use "." To hierarchically access the properties of an object:

alert (objecta.name);

Nested properties

The properties of an object can also be any JavaScript object:

var OBJECTB = Objecta;objectb.other = Objecta; //At this time the following three values are equivalent, and change any one of the values of the remaining two values are changed
Objecta.name;objectb.name;objectb.other.name;

Working with Indexes

If there is a property named "School.college" on objecta, then we cannot pass "." Access, because the "objectA.school.college" statement refers to the College property of the school Property object that is looking for objecta.

In this case we need to set and access the properties by index:

         objecta["BITI";         Alert (objecta["School.college"]); 

The following statements are equivalent:

        objecta["BITI";        "School.college"        alert (objecta["School.college"]);        Alert (objecta["College"]); alert (Objecta[key]);   

JSON format Syntax

JSON refers to JavaScript object Notation, which is the JavaScript objects notation.

We can declare an object with the following statement and create the property at the same time:

        JSON        var objecta = {            "MyName",            age:19,            School:            {                "university",                "High School"}, like:["Sleep","C #","or Sleep"]}      

The syntax format for JSON is to use "{" and "}" to represent an object, create an attribute using the format of the property name: value, and separate multiple properties with ",".

The school property in the previous example is another object. The like property is an array. After you have created the object in a JSON-formatted string, you can use the "." or an indexed form of access to a property:

objecta.school["High School"];objecta.like[1];

Static methods and Instance methods

A static method is a method that you can use without declaring an instance of the class.

An instance method is a method that you must first declare an instance of a class with the "new" keyword before it can be accessed through this instance.

        Declares a class        function () {alert (//Create         A static method 

The above first declares a class Staticclass, then adds a static method Staticmethod and a dynamic method instancemethod to it. The difference is that you add dynamic methods to use the prototype prototype property.

For static methods you can call directly:

Staticclass.staticmethod ();

However, dynamic methods cannot be called directly:

Staticclass.instancemethod (); Statement error, unable to run.

It needs to be instantiated before it can be called:

        New Staticclass (); //First instantiate        Instance.instancemethod ();//You can invoke instance methods on an instance

Four. The global object is the Window property


Usually we declare a global variable in the <script> tag, which can be used by any method of the current page:

    <Type= "Text/javascript">        </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

Five. What exactly is a function

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

        function MyMethod ()        {            alert ("hello!");        }        

In fact, like a global object, the name of a method created using the Function keyword (which can also create a class) actually creates the MyMethod property for the Window object, and the value is an anonymous method, the statement above is equivalent to:

        function ()        {            alert ("hello!");        }

Either way, the actual save is a property of the Window object created using the function name. And the value is only the function body has no function name.

Therefore, the following three methods of declaration are equivalent:

        function MyMethod ()        {            alert ("hello!");        }        function ()        {            alert ("hello!");        }        function ()        {            alert ("hello!");}    

Six. " This "what exactly is

In C #, this variable usually refers to the current instance of the class. In JavaScript, the "This" in JavaScript is a function context, not a declaration, but a decision on how to invoke it. because the global function is actually the property of the window, this refers to the Window object when the global function is called at the top level.

The following example can be a good illustration of all this:

        "O1 name"};        "window name";        function ShowName ()        {            alert (this.name);        }                        O1.show = ShowName;        Window.show = ShowName;        ShowName ();        O1.show ();        Window.show ();  

Results:

As a result, this points to the Window object when the function is called at the top level and when the function is called using the Window object. When the function is called in the object, this points to the current object.

Seven. Closures in JavaScript

The concept of closures is more difficult to understand, first look at the definition of closures:

A closure is an expression (usually a function) that has many variables and an environment in which these variables are bound, and therefore these variables are also part of the expression.

Simple expression:

A closure is a function instance and a variable from the environment when executing a function instance.

Let's look at the following example:

<!DOCTYPEHtmlPublic"-//w3c//dtd XHTML 1.0 transitional//en""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><Htmlxmlns= "Http://www.w3.org/1999/xhtml"><Head><Title></Title></Head><Body> <div id= " Divresult "></div> << span class= "HTML" >script type= "Text/javascript" > Span class= "KWRD" >function start () {var count = 0; Window.setinterval (function ( {document.getElementById ( "Divresult"). InnerHTML + = count +  "<br/>"; count++; }, 3000); }; Start (); </script></ body></html >               

Count is a variable in the start function body, and usually we understand that count does so within the start () function, and should also disappear after the start () function is called. However, the result of this example is that the count variable persists and is added 1 at a time:

Because the count variable is part of the closure of the anonymous function created in SetInterval (that is, the function that contains count++)!

In layman's words, closures are the function itself, such as the above anonymous function itself, plus the count variable to be used when the function is run.

Closures in JavaScript are created implicitly, rather than explicitly created as in other languages that support closures. We seldom encounter this in the C # language because the method cannot be declared again in a method in C #. Instead, calling another method in one method typically uses parameters to pass data.

This article no longer details closures, in-depth study please refer to the following article: http://www.felixwoo.com/archives/247

Eight. Summary [final]

Reproduced JavaScript Basics Details

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.