Javascript Analysis 2 -- Object

Source: Internet
Author: User

Objects are an advanced part of JavaScript, many of which are hard to understand. net chapter-attributes and characteristics of the dispute, jquery in action and other materials, This section summarizes the understanding of the objects in JS:

 

Built-in JS objects: String, math, datetime, array

Here, the string object is introduced in the previous JavaScript Analysis 1-type. For math objects (which have built-in attributes and static methods), datetime objects, and array objects, their usage is similar to C #, which is not described here;

Custom objects of JS objects:

As the most commonly used JS custom object, the rich knowledge points are worth exploring (I think, haha ). Use the followingCodeSee the object creation:

< Script Type = " Text/JavaScript " Language = " Javascript "   >
// Method 1: Add object attributes directly to make them have attributes
VaR Cartype = New Object ();
Cartype. Make = ' Ford ' ;
Cartype. Model = ' Focus ' ;
Cartype. Year = 2009 ;
Cartype. purchased = New Date ( 2010 , 1 , 27 );
// Comment: This object creation method is not intuitive, and it is easy to cause errors due to changing the attribute name, so it is not recommended to use

// Method 2-object literal volume
VaR Cartype = {
Make: ' Ford ' ,
Model: ' Focus ' ,
Year: 2009 ,
Purchased: New Date ( 2010 , 1 , 27 ),
Owner :{
Name: ' Yang ' ,
Occupation: ' Engineer '
}
};
// Comment: This object creation method is intuitive, and this notation becomes JSON (JavaScript Object Notation)


< / SCRIPT>

In JavaScript, there is no reference type storage method for objects in C #, but in terms of operations, it can still be considered to assign the memory object to the reference of the corresponding type (similar to the object in C ). As shown in the preceding example, the property of an object can still be an object! (Same as the combination of objects in C ++ and C ).

At this point, we will introduce the most important topic in this article-functions. How are functions stored in JavaScript? Is it the same in C?

It would be difficult to answer without preparation, but it would be vaguely felt that there would be a difference. Yes? Let's take a look at the function definition method:

< Script Type = " Text/JavaScript " Language = " Javascript "   >
// The first method to implement functions is also the most common method.
Function Clickbutton ()
{
// Function body implementation
}

// Method 2
VaR Clickbutton = Function ()
{
// Function body implementation
}

< / SCRIPT>

How can a function be defined in multiple ways? Are there any mistakes? The answer is: no!

Next we will reveal the essence of the function: the function is maintained as the most special JS object (NOTE: Some places even turn the function into a first-class citizen (object!

That is, in general, you can regard a function as an object. For a value assignment, that is, assign a value to a Common Object-assign a memory object to its reference type, this makes it easy to understand the various creation methods of the above functions.

 

Appendix: Control event -- "Return checkboxvoid ();" parsing:

When learning the interaction between JavaScript and Dom and determining the verification conditions (assuming that the textbox is determined to be not empty in this example), it is hard to understand the above description in The onclick event of the button, however, you have no intention to obtain the answer in jquery in action:

First look at the following code:

< IMG ID = "Yangimage" SRC = "Yang.gif" ALT = "An image" Class = "Class1" Title = "This Yang's image"   />

How does the browser parse this HTML code? First, we need to talk about the DOM (Document Object Model) model. It is object-based, that is, it abstracts elements into element objects, and has attributes, which is not hard to understand. However, the focus is on whether the attributes of element objects are the same as those in HTML code? What should I do?

In fact, the name is not strictly matched in the conversion process, and there will be deviations. Observe:

 

 

As shown in the figure, the property SRC is converted to an absolute URL, and the class feature is converted to the attribute classname. We can see some changes that may occur when the HTML feature is converted to the DOM element attribute. Now let's look at the following code to see how the event is defined:

< Script Type = " Text/JavaScript " Language = " Javascript "   >
// Assume that the submission button ID is btnsubmit.
Document. getelementbyid ( " Btnsubmit " ). Onclick = Function ()
{
Checkboxvoid ();
}
Function Checkboxvoid ()
{
If (Document. getelementbyid ( " Txtbox " ). Value = "" )
Return   False ;
Return   True ;
}

< / SCRIPT>

As previously discussed, in an object, its attributes can still be objects. Because the function is maintained as a special object, function reference is assigned to the onclick event attribute of the button element. For HTML code that achieves the same effect (as shown below :), how can I explain it:

< Input Type = "Submit" ID = "Btnsubmit" Onclick = "Return checkboxvoid ();"   />

This will start with parsing HTML from the browser into the DOM document tree, which maps the onclick component --"Return checkboxvoid ();"Put it into the self-built function (as shown in the following code), and "return" indicates that a boolean type is returned.

Document. getelementbyid ( " Btnsubmit " ). Onclick = Function ()
{
If (Document. getelementbyid ( " Txtbox " ). Value = "" )
Return   False ;
Return   True ;
}

You can see the event in HTML code.ProgramThe conversion process, that is"Return checkboxvoid ();"I can fully understand it.

 

 

 

 

 

 

 

 

 

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.