Javascript is a flexible language that allows us to simulate many machine mechanisms in Object-Oriented Programming and fully use the object-oriented design idea in Javascript, this greatly improves code reuse, reduces inter-module coupling, and improves logical hierarchy and parallel development. The following describes my understanding in several steps.
I. Data Types and packages
Packaging ...... Type name ...... Common values ...... Category
Number ...... Number ...... 123.123 ...... Basic Data Type
Boolean ...... Boolean ...... True, false ...... Basic Data Type
String ...... String ...... "Hello world !" ...... Basic Data Type
Object ...... Object ...... {}, []… Composite data type
Function ...... Function ...... Function (){}...... Special Type
None ...... Undefined ...... Undefined, undefined ...... Small Data Type
None ...... Null ...... Null ...... Small Data Type
The built-in types are not relevant to this document and are not listed.
Ii. Reference Type and Value Type
Reference Type: object function
Value Type: number, boolean, string, null, undefined
3. new function and prototype)
I will not talk much about the prototype design mode. I will introduce it many times online. I will give an example to introduce the process of constructing objects using new in js.
Function classname () {this. id = 0;} var v = new classname ();
When using function to construct an object, perform the following process:
1. Search for the prototype of classname and perform a shortest copy.
2. Bind The this pointer to the Copied object.
3. Set this. constructor attribute to classname.
[Note: in fact, the value of classname. prototype. constructor is also set to classname. The sixth part will explain]
4. Run the code in user.
5. Return this pointer to assign the left value v.
4. Implement the three basic features of object-oriented
1. Encapsulation
We all know that in js, the focus is on access permissions. In other native languages that support object-oriented language, the public, protected, and private keywords are generally supported to control access permissions. However, in js, we can only control access by using complex scope relationships:
The Code is as follows:
Function classname (){
Var uid = a; // uin is a simulated private with the scope of {}, which cannot be used externally
This. getuid = function () {return a;} // provides an external read-only interface obj. getuid () for uid ();
This. setuid = function (val) {a = val} // provides an external writable interface obj. setuid (5) for uid );
This. id = uid; // id is used to simulate public obj. id
}
Classname. prototype. func = function () {}; // simulate the public method obj. func () call
Classname. stafunc = function () {}; // simulate static method classname. stafunc () call
Var obj = new classname (1 );
[!] It is worth noting that because function is a reference type, classname. prototype. func is a function object shared by all objects (each object only has reference), so the object size is not large. This. getuid and this. setuid are used to define a function. Therefore, each object instance stores a copy. If you use this method, the object size will be huge and performance will be affected. I personally think it is of little significance to simulate private variables.
[!] If you need to use this in large quantities. xxx = function () {} in this case, the this pointer in function () {} is different from the outermost this pointer, it is best to add var _ this = this; in the first line of the class definition, so that in this. the bound pointer can also be easily used in xxx = function.
2. Inheritance
There are two main methods to implement inheritance: the first is to use the prototype of javascript itself to implement inheritance by assigning values to prototype and changing its constructor attribute; the second method is to manually copy all attribute methods of the parent object to the sub-object without using prototype. For example, if A needs to inherit B, the first method can be:. prototype = new B ();. prototype. constructor = A; the second method can write A recursion, or use the extend method in jquery. In addition, if you want to implement multi-inheritance, prototype is really troublesome (you need to create multiple classes in sequence and empty objects to pick them up). The second method is relatively simple, just copy them in sequence. Generally, this inheritance is convenient for finding the parent class. You can add an attribute in the object to reference the parent class.
3. Polymorphism
If you do not need to reload the function, you can check the parameters and make them flexible. The hidden attribute is assigned undefined directly. Note that if you want to inherit the prototype of Class B, you must create an empty object to pick it up. Otherwise, if you write the method to the class, it is equivalent to directly modifying the prototype, even if you do not write a method, changing the constructor will also lead to confusion of the inheritance chain. It is easy to pick up an empty object:
The Code is as follows:
Function temp (){};
Temp. prototype = B;
Var obj = new temp ();
In this way, the class that needs to inherit B. prototype can inherit obj, even if prototype is modified, B will not be affected. It also does not waste much space as inheriting new B.
5. Deep copy and light copy
This is no different from other languages. A shallow copy is a direct copy, and the reference type or class type is not used in depth. Deep copy performs recursive copy based on the type.
6. prototype. constructor
This value is mainly used to maintain the inherited prototype chain. An article has been written in very detail, please refer to: http://bbs.51js.com/thread-84148-1-1.html
VII. JS object-oriented development
Because I am not a front-end developer and have met limited projects, I only talk about my own experience.
I have developed B/S, which is commonly used in two architectures. One is CGI-based, HTML is generated by the background language, and JS only performs user interaction and ajax communication. Another method is to use MVC. The background language only generates JSON, And the View layer is fully implemented by the JS component on the client. The latter generally uses a large number of object-oriented ideas for programming. components are encapsulated into classes, JSON is passed into the constructor, and then added by the Controller or layout component. As components can be reused, the efficiency of development backend management systems and JS games is still considerable.
