Function, new, constructor and prototye

Source: Internet
Author: User

From: http://maycode.com

Tip: I briefly introduced JavaScript Functions, new, constructor behavior, and prototye basic knowledge. If you have any bias, please point out that it is only for your personal understanding.

========================================================== ========================================================== ======================================
I. Several concepts related to JavaScript Functions
========================================================== ========================================================== ======================================
---------------------------------------------------------------
Concept 1. A function is defined to create a function class object.
---------------------------------------------------------------

The above conclusions are clearly displayed in the definitions of equivalent methods in the following four methods:

Method 1 (standard)
Function showtext (text)
{
Alert (test );
}
Showtext ("Hi, tomsui !~ ");

Method 2
Show = function showtext (text)
{
Alert (text );
}
Show ("Hi, tomsui !~ ");

Method 3 (anonymous)
Show = function (text)
{
Alert (text );
}
Show ("Hi, tomsui !~ ");

Method 4 (explicitly defining objects)
Show = new function ("text", "alert (text );");
Show ("Hi, tomsui !~ ");

Note: As an object, there will certainly be a default tostring (). You can directly print this object, which is actually the function body itself:
Alert (show) // function anonymous (text) {alert (text );}
Alert (showtext) // function showtext (text) {alert (TEST );}

---------------------------------------------------------------
Concept 2. The function class object has a prototype attribute.
---------------------------------------------------------------
This prototype property is an object:

Function showtext (text)
{
Alert (test );
}
Alert (showtext. Prototype); // [object, object]
Alert (typeof (showtext. Prototype); // object
Alert (showtext. Prototype. constructor); // function showtext (text) {alert (TEST );}

The prototype attribute of the constructor, as an object, has a constructor attribute that cannot be for-in, pointing to the constructor itself (printed as the function body definition)

Note: "function class objects", not every common object (generated by the New Keyword) has the prototype attribute!

---------------------------------------------------------------
Concept 3. A function class object has a constructor attribute.
---------------------------------------------------------------

Function showtext (text)
{
Alert (test );
}

Alert (showtext. constructor); // function () {[native code]}
Alert (typeof (showtext. constructor); // Function

The constructor attribute of the function class Object (showtext function:
1) it is "a segment of non-printable localCode"(Not an object like the prototype attribute of showtext)
2) its type is "function"

---------------------------------------------------------------
Summary: Prototype attributes, constructor attributes, and construct attributes
---------------------------------------------------------------

Objects (based on whether an object is a function object) are divided into two types:
A. A function object (function class Object)
B. A common object (a "non-function class" object created by constructor using the new keyword)

So:
1. The function object has the prototype attribute, but the common object does not;
2. The function object has the constructor attribute, and the common object does not exist. The type of the constructor attribute is "function", and the tostring is followed by a piece of "Local Code" (native ),
3. The common object has the construct attribute, and the function object does not exist. The construct attribute is "function", and the tostring attribute is "Function Code itself ",

========================================================== ========================================================== ======================================
Ii. Javascript object-oriented several conclusions (new, prototype)
========================================================== ========================================================== ======================================

---------------------------------------------------------------
2.1 intro
---------------------------------------------------------------

Because the object-oriented design originally designed by JavaScript has a defect, if every object has a hard copy of "class methods" problem:
Function showtext (text)
{
This. Word = text;
This. Sing = function singfunction () {alert ("helloworld !~ ");};
}

Obj1 = new showtext ("SB1 ");
Obj2 = new showtext ("sb2 ");

In this case, obj1 and obj2 respectively have a singfunction method code in the memory. Obviously, this is very Sb and there are two ways to improve it:

1) define an external function object,
Function showtext ()
{
This. Sing = singfunction;
}

Function singfunction () {alert ("helloworld !~ ");}

New showtext (). Sing ();

2) use the prototype attribute of the function object
Function showtext ()
{
}
Showtext. Prototype. Sing = function () {alert ("helloworld !~ ");}
New showtext (). Sing ();

---------------------------------------------------------------
2.2 functions of the New Keyword
---------------------------------------------------------------

Compare the following examples:
Function showtext (text)
{
This. Word = text;
}

VaR OBJ = new showtext ("Hi, tomsui !~ ");
Alert (obj. Word); // "Hi, tomsui !~ "

VaR obj2 = new object ();
Obj2.constuct = showtext;
Obj2.constuct ("Hi, tomsui !~ ");
Alert (obj2.word); // "Hi, tomsui !~ "

The running results show that the following equivalence relationship exists:
VaR ball0 = new ball ("creating new ball ");
<=>
VaR ball0 = new object ();
Ball0.construct = ball;
Ball0.construct ("creating new ball ");

After analyzing the equivalence relationship, we can get the actual action behind the "new" keyword as follows:
A. Create a new, empty object -- new object ()

B. Call the constructor of this object;
OBJ. construct is also an object, and all objects have the prototype attribute. This is not necessary.

C. [Supplement] copying the prototype attribute of construct of this object to the new object (soft copy reference)

Note: 1) the "new" keyword changes a common function to a constructor. It can be understood as an "Convention" used to simplify the steps for object creation"
2) The equivalence relationship can only prove the first two functions of New. For prototype descriptions, see "2.3 prototype"

---------------------------------------------------------------
2.3 prototype
---------------------------------------------------------------
1. First note:
1) prototype is a property of a function object. Common objects do not exist.
-- I am confused when I say it is the attribute of all objects (because it is the attribute of the object) in some Sb books.

2) The prototype attribute of the constructor is an object and has the following features:

A. It has a constructor attribute pointing to the code of the function object (if it is not specified, remember it as OK). For example:

function showtext (text) {alert (TEST) ;}< br> // The prototype attribute of showtext is proved to be an object
alert (typeof (showtext. prototype); // object
// showtext is described below. the prototype object cannot be printed with the default tostring ()
alert (showtext. prototype); // [object, object]
// The showtext. prototype. constructor
alert (showtext. prototype. constructor); // function showtext (text) {alert (TEST) ;}< br> alert (typeof showtext. prototype. constructor); // function

B. It can add attributes like other objects, for example:
// Add the text property.
Function showtext (){};
Showtext. Prototype. Text = "helloworld !~ ";

// Add the shout () method
Function showtext (){}
Showtext. Prototype. Shout = function () {alert ("tomsui wants to smoke !~ ");};

2. Prototype

Recall the behind-the-scenes mechanism of the New Keyword:
First, generate an object with the constructor, and then "soft copy the content of the constructor prototype attribute to the newly generated object ".
Below are two necessary explanations for the content highlighted in quotation marks:

1) What is "Contents of the prototype attribute of the constructor?
The prototype attribute of the constructor is an object, and its content includes two parts: a. Attribute Value B. Method

2) What is "soft copy "?
That is, just copy the reference of the content to generate a new OBJ, not the content in prototype (soft copy is the description of tomsui borrowed "ln-s" from Linux, which is more concise ~)

"The content of the prototype attribute of the soft copy constructor is included in the newly generated object" is probably the core of prototype.

3. Introduce the influence of prototype on JavaScript

1) add additional actions for the created object
Any "attribute" and "method" newly added for the prototype of the constructor will be appended to the new object when the New Keyword creates an object using the constructor.
For example:

Function showtext (){};
// Add text attributes
Showtext. Prototype. Text = "helloworld !~ ";
Alert (New showtext (). Text); // helloworld !~

// Add the shout () method
Showtext. Prototype. Shout = function () {alert ("tomsui wants to smoke !~ ");};
New showtext (). Shout (); // tomsui wants to smoke !~

In the preceding example, the constructor showtext () does not have the text attribute and the shout () method ~

2) prototype does not affect the actions of the constructor.
So if there is a conflict between the two, the constructor will take effect-this is worth noting!

For example:
Function showtext ()
{
This. Text = "tomsui is handsome !~ ";
This. Say = function () {alert ("Absolutely! ")};
}

Showtext. Prototype. Text = "j.j. is handsome !~ ";
Showtext. Prototype. Say = function () {alert ("perhaps? ")};

VaR OBJ = new showtext ();
Alert (obj. Text); // tomsui is handsome !~
OBJ. Say (); // absolutely!

The result is: "j.j. is handsome! ~" defined by prototype !~ "It didn't take effect (is it pseudoscience after all );
The constructor says "tomsui is handsome !~ "," Absolutely! ", Because this is the truth, not prototype can be overturned.

3) The emergence of prototype has caused js to be "very late binding ".
For details about late binding ("late binding"), refer to tij or other object-oriented books.
"Very late binding" makes JavaScript pseudo-object-oriented more abnormal: even if an object instance has been created, you can still add new behaviors and attributes to it,
For example:
Function person (name)
{
This. Name = Name;
This. wordsinheart = "Tell rora I love her ~ ";
}
VaR TTS = new person ("tomsui"); // tell rora I love her ~
Alert (TTS. wordsinheart );

Person. Prototype. saysomeotherwords = function () {alert ("Tell rora I need her ~ ")};
TTS. saysomeotherwords ();

No:
When the person object named tomsui appears, it will only say "Tell rora I love her ~ ",
However, since he has learned prototype tricks, Niu's technology has taken a higher level,
Then, he said, "Tell rora I need her ~ ".

This example shows the benefits of "very late binding". If there are many such actions, your JS costs will be very high (that is, the slow Bay), so be cautious when using them.

PS.
I. "Very late binding" is an official term and can be safely used. It is not like "soft copy.
II. It is not a complete introduction to the pseudo-object-oriented Javascript. It is only used as an example for Js.
Iii. Again, tomsui written on the http://www.maycode.com, if reprinted please indicate the source, joking said, otherwise the rain on the cloudy day you server will go down Oh ~ :)

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.