Js prototype details

Source: Internet
Author: User

JavaScript is object-based and any element can be viewed as an object. However, the types and objects are different. In this article, in addition to discussing some characteristics of types and objects, we are more important to study how to write a good and reusable type. After all, JavaScript, a popular scripting language, is very meaningful for reuse if it can be well encapsulated and form a large type library.
There are a lot of articles on prototype on the internet, and I have never understood the core idea. After writing a lot of sample code, you can understand that prototype can only be used for type.
The following are some examples of types and objects. After reading the examples, you may better understand the relationship between types and objects:
 
 

  Sample Code Description
1 Object. prototype. Property = 1;
Object. prototype. Method = function ()
{
Alert (1 );
}
 
Var obj = new Object ();
Alert (obj. Property );
Obj. Method ();
You can use proptotype to add behavior for the type. These actions can only be reflected on instances of the type.

Supported types in JS include Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
2 Var obj = new Object ();
Obj. prototype. Property = 1; // Error
// Error
Obj. prototype. Method = function ()
{
Alert (1 );
}
Prototype cannot be used on instances; otherwise, a compilation error occurs.
3 Object. Property = 1;
Object. Method = function ()
{
Alert (1 );
}
 
Alert (Object. Property );
Object. Method ();
You can define "static" attributes and methods for the type and call them directly on the type.
4 Object. Property = 1;
Object. Method = function ()
{
Alert (1 );
}
Var obj = new Object ();
Alert (obj. Property); // Error
Obj. Method (); // Error
The instance cannot call static properties or methods of the type. Otherwise, an error of undefined object occurs.
5 Function Aclass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
Var obj = new Aclass ();
Alert (obj. Property );
Obj. Method ();
This example demonstrates how to define a type in JavaScript.
6 Function Aclass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
Aclass. prototype. Property2 = 2;
Aclass. prototype. Method2 = function
{
Alert (2 );
}
Var obj = new Aclass ();
Alert (obj. Property2 );
Obj. Method2 ();
You can use prototype to add attributes and methods for custom types externally.
7 Function Aclass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
Aclass. prototype. Property = 2;
Aclass. prototype. Method = function
{
Alert (2 );
}
Var obj = new Aclass ();
Alert (obj. Property );
Obj. Method ();
You cannot use prototype to change attributes or methods of a custom type externally.
In this example, we can see that the properties and methods of the call are still defined at the beginning.
8 Function Aclass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
Var obj = new Aclass ();
Obj. Property = 2;
Obj. Method = function ()
{
Alert (2 );
}
Alert (obj. Property );
Obj. Method ();
You can change attributes on an object. (This is for sure)
You can also change the method on the object. (Unlike general object-oriented concepts)
9 Function Aclass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
Var obj = new Aclass ();
Obj. Property2 = 2;
Obj. Method2 = function ()
{
Alert (2 );
}
Alert (obj. Property2 );
Obj. Method2 ();
You can add attributes or methods to an object.
10 Function AClass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
 
Function AClass2 ()
{
This. Property2 = 2;
This. Method2 = function ()
{
Alert (2 );
}
}
AClass2.prototype = new AClass ();
 
Var obj = new AClass2 ();
Alert (obj. Property );
Obj. Method ();
Alert (obj. Property2 );
Obj. Method2 ();
This example illustrates how a type inherits from another type.
11 Function AClass ()
{
This. Property = 1;
This. Method = function ()
{
Alert (1 );
}
}
 
Function AClass2 ()
{
This. Property2 = 2;
This. Method2 = function ()
{
Alert (2 );
}
}
AClass2.prototype = new AClass ();
AClass2.prototype. Property = 3;
AClass2.prototype. Method = function ()
{
Alert (4 );
}
Var obj = new AClass2 ();
Alert (obj. Property );
Obj. Method ();
This example shows how to override the attributes or methods of the parent class.

In the above example, the important aspects of reuse by type are:
· Example 1: type of adding behavior allowed in JavaScript
· Example 2: Restrictions on prototype usage
· Example 3: how to define static members of a Type
· Example 7: Restrictions on the redefinition of prototype members
· Example 10: how to make one type inherit from another type
· Example 11: How to redefine the members of the parent class in the subclass
 
It can be seen that JavaScript can implement the following object-oriented features:
· Public field)
· Public Method)
· Private field)
· Private field)
· Method overload)
· Constructor)
· Event)
· Single inherit)
· Override)
· Static attributes or methods (static member)

From chaojie2009

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.