JavaScript is object-based, and any element can be regarded as an object. However, types and objects are different. In this article, in addition to discussing some characteristics of types and objects, more importantly, we study how to write good and reusable types. After all, if JavaScript, a popular scripting language, can be well encapsulated and form a huge type library, it will be very meaningful for reuse.
There are many articles about prototypes on the Internet, but I have never understood the core idea. Finally, after writing a lot of example code, I realized: prototype can only be used on types.
The following are some examples about types and objects. After reading the examples, it may be easier for you to understand the connection between types and objects:
| Example code | illustrate | |
| 1 | Object.prototype.Property = 1; Object.prototype.Method = function (){ alert(1);}var obj = new Object();alert(obj.Property);obj.Method(); | You can use proptotypes on types to add behavior to the type. These behaviors can only be manifested on instances of the type. The types allowed in JS are Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String |
| 2 | var obj = new Object(); obj.prototype.Property = 1;//Error//Errorobj.prototype.Method = function(){ alert(1);} | You cannot use prototype on an instance, otherwise a compilation error will occur. |
| 3 | Object.Property = 1;Object.Method = function(){ alert(1);}alert(Object.Property);Object.Method(); | You can define "static" properties and methods for a type and call them directly on the type. |
| 4 | Object.Property = 1;Object.Method = function(){ alert(1);}var obj = new Object();alert(obj.Property);//Errorobj.Method();//Error | An instance cannot call static properties or methods of a type, otherwise an object undefined error occurs. |
| 5 | function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method(); | This example demonstrates the usual way of defining 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(); | Prototypes can be used externally to add properties and methods to custom types. |
| 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(); | The properties or methods of a custom type cannot be changed externally through the prototype. As you can see from this example: the properties and methods called are still the results of the initial definition. |
| 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(); | Properties can be changed on objects. (This is for sure) You can also change methods on the object. (Different from the common object-oriented concept) |
| 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 properties or methods to objects |
| 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 one 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 illustrates how a subclass can override a parent class's properties or methods. |
・Example 2: Restrictions on prototype use
・Example 3: How to define static members on a type
・Example 7: prototype restrictions on members of redefined types
・Example 10: How to make one type inherit from another type
・Example 11: How to redefine members of the parent class in the subclass
The object-oriented features that JavaScript can implement include:
・Public field
・Public Method
・Private field
・Private method (private field)
・Method overload
・Constructor
・Event
・Single inheritance
・Subclass overrides the attributes or methods of the parent class (override)
・Static properties or methods (static member)