Using Javascript and prototype. js frameworks to create types and their prototype attributes

Objects Created in Javascript can be classified into three methods: factory functions, constructor functions, and prototype functions. Factory functions use javascript basic class objects to add corresponding properties and methods to an Object instance to achieve the expected results of the new type. The following code demonstrates the type newcia... SyntaxHighlighter. al.

Objects Created in Javascript can be classified into three methods: factory functions, constructor functions, and prototype functions.
Factory functions use javascript basic class objects to add corresponding properties and methods to an Object instance to achieve the expected results of the new type. The following code shows that NewClassType1 contains an attribute attribute1.
[Javascript]
// The factory function method returns a specific type of object instance
FunctionNewClassType1 (){
Varo = new Object ();
O. attribute1 = 3;
Returno;
};
Obtain the NewClassType1 type instance, which is similar to the factory method in the design mode and can be called directly. The following code gets the instance NewClassType1 and operates its attribute1 attribute (the prompt result is displayed after "//-> ).
[Javascript]

          
         var t1 =NewClassType1(); 
         t1.attribute1+= 3; 
         alert("t1.attribute1= " + t1.attribute1); 
         //->t1.attribute= 6

 

Create a class using constructor. Use the keyword "this" to create a class attribute or method. Use the new Keyword to obtain the instance.
[Javascript]
// Constructor method. Use new to obtain the object instance of a specific type.
FunctionNewClassType2 (){
This. attribute2 = 2;
};
Vart2 = new NewClassType2 ();
T2.attribute2 + = 6
Alert ("t2.attribute2 =" + t2.attribute2 );
//-> T2.attribute2 = 8
The prototype method uses prototype, a unique property of javascript object-oriented objects, to dynamically extend the attributes and methods of the corresponding types.
[Javascript]
// Prototype method, using the prototype attribute of the javascript Object
FunctionNewClassType3 (){};
NewClassType3.prototype. attribute3 = 1;
Vart3 = new NewClassType3 ();
T3.attribute3 + = 2;
Alert ("t3.attribute3 =" + t3.attribute3 );
//-> T3.attribute3 = 3

The concept of prototype needs to be understood. From the above examples, we can see that the javascript type is defined in the form of functions, and its name is the type name. Each type of javascript has a prototype attribute, which returns a reference to the prototype of the object. It is an object. We can regard the prototype as a reference. When we create an instance of the type, the browser automatically attaches the prototype content (attributes and methods) to the object. In addition, javascript objects are dynamic, so the prototype is dynamic. We extend the prototype to change the prototype, which directly applies to all objects created by the prototype.
The following code shows the attributes and methods of the extended prototype (Initialization is required.
[Javascript]
/*
* Create a type using Constructors
*/
FunctionType1 (name ){
This. name = name;
}
 
// A new Type1 instance
Varobj1 = new Type1 ("chwd ");
Alert (obj1.name );
//-> Chwd
Alert (obj1.age );
//-> Undefined
 
// Add an attribute age to the prototype of Type1. Remember to assign a value.
Type1.prototype. age;
Alert (obj1.age );
//-> Undefined
Type1.prototype. age = 18;
Alert (obj1.age );
//-> 18
Obj1.age + = 8;
Alert (obj1.age );
//-> 21
 
// Add a method to the prototype of Type1
Type1.prototype. showYourNameAndAge = function (name ){
This. name = name;
Alert ("myname is" + name + "and my age is" + this. age );
};
// The object obj1 calls the showYourNameAndAge Method
Obj1.showYourNameAndAge ("cweid ");
//-> Myname is cweid and my age is 26
As shown above, after a prototype is expanded, the instances of this type have also changed accordingly. Since the prototype is an object, can the prototype be copied to change the entire prototype structure? Yes, as shown in the following code.
[Javascript]
/*
* Create a type using Constructors
*/
FunctionType1 (name ){
This. name = name;
}

// A new Type1 instance
Varobj1 = new Type1 ("chwd ");
Alert (obj1.name );
//-> Chwd

// Add a method to the prototype of Type1
Type1.prototype. showYourNameAndAge = function (name ){
This. name = name;
Alert ("myname is" + name );
};
// The object obj1 calls the showYourNameAndAge Method
Obj1.showYourNameAndAge ("chenwd ");
//-> Myname is chenwd


/*
* Create another Type2 type.
*/
FunctionType2 (){
This. age = 26;
}
// New A Type2 instance
Varobj2 = new Type2 ("chweidong ");
Alert (obj2.name );
//-> Undefined
// The obj2 object calls the showYourNameAndAge method.
// Obj2.showYourNameAndAge ("cwdong ");
//-> Undefined

// Set the prototype of Type2 to the prototype of type1.
Type2.prototype = Type1.prototype;
// Display the name of obj2 again
Alert (obj2.name );
//-> Undefined
Varobj3 = new Type2 ("chenweid ");
Alert (obj3.name );
//-> Undefined

// Set the prototype of Type2 to object obj1
Type2.prototype = obj1;
// Display the name of obj2 for the third time
Alert (obj2.name );
//-> Undefined
Alert (obj2.age );
//-> 26
Varobj4 = new Type2 ("hahahaha ");
Alert (obj4.name );
//-> Chenwd
Alert (obj4.age );
//-> 26
Obj4.showYourNameAndAge ("chenweidong ");
//-> Myname is chenweidong

The code above indicates that the value assigned to the prototype attribute of the type must be an object, and another prototype cannot be used as a value. This assignment method modifies prototype, but does not affect the previously created instances (you need to re-create instances, such as obj4 ), however, we can see from the running result of obj4 that this assignment method is to extend the original type rather than overwrite it.

Based on the above javascript creation type and extension using prototype attributes, We can briefly understand the implementation principle of prototype. js javascript framework. Prototype. js is an extension of the standard javascript library. It extends Object, Number, Function, String, and other types, and defines some new objects and types, such as Prototype objects, Class objects, and Ajax objects, it also encapsulates javaScript Ajax applications. These extensions of Prototype. js greatly facilitate developers to create highly interactive web2.0 applications.
 
This framework is mostly an extension of native object functions, but it is the basis of other javascript frameworks. The following describes how prototype. js creates a type after javascript extension.
 
The Class object is added to prototype. js. The create method can create a new type, and its syntax is:
Create ([superclass] [, methods...])
After version 1.6, the Class. create method has two parameters. The first parameter specifies the parent Class of the Class to be created. If no parent Class Object is input, the default Object is Object. The following code demonstrates the usage of Class. create.
[Javascript]
// Createclass --- Animal, it can speak
VarAnimal = Class. create ({
Initialize: function (name, sound ){
This. name = name;
This. sound = sound;
},
Speak: function (){
Alert (this. name + "says:" + this. sound + "! ");
}
});

// Experience the initialize method
// Varanimal = new Animal ("animal1", "bark ");
// Animal. speak ();
//-> Animal1says: bark!

// Create a subclass
VarDog = Class. create (
Animal,
{
Initialize: function ($ super, name ){
$ Super (name, "hahah ");
}
}
);
Vardog1 = new Dog ("dog1", "bark, bark ");
Dog1.speak ();
//-> Dog1says: hahah!

The above shows how to create prototype1.6 and later versions, and the prototype attribute of javascript used before 1.6 and the Object. extend method of prototype. js extension. Similar to each other, a large sentence after 1.6 can be used to create a class or subclass (inheritance), and two sentences are required before 1.6. The Code is as follows:
[Javascript]
 
 
1.6 method of creating a type before 
Script
 
Script
// Createclass --- Animal, it can speak
VarAnimal = Class. create ();
Animal. prototype = {
Initialize: function (name, sound ){
This. name = name;
This. sound = sound;
},
Speak: function (){
Alert (this. name + "says:" + this. sound + "! ");
}
};

// Experience the initialize method
Varanimal = new Animal ("animal1", "bark ");
Animal. speak ();
//-> Animal1says: bark!

// Create a subclass
VarDog = Class. create ();
Dog. prototype = Object. extend (
NewAnimal (),
{
Initialize: function (name ){
This. name = name;
This. sound = "hahah ";
}
}
);
Vardog1 = new Dog ("dog1", "bark, bark ");
Dog1.speak ();
//-> Dog1says: hahah!

Script

This article briefly describes how to create a type in a javascript advanced application and some properties of its prototype attribute. This attribute briefly introduces prototype. js and its creation and class inheritance methods. It is revealed that prototype. js is the first javascript framework, which can greatly improve development efficiency in work production.