The full use of object-oriented design in JS can greatly improve code reuse, reduce the coupling between modules, better logical layering and parallel development. Here are a few steps to simply talk about my understanding.
data type and Packing class
Packing class ... Type name ... Common values ... Classification
Number ... number ...... 123.123. ... Basic data types
Boolean ... Boolean ... true, false ..... Basic data types
String ..... ... string ... "Hello world!" ... Basic data types
Object ... ... object ..... {}、[] ...... Composite data types
Function ... function ..... function () {} ...... Special type
Have no ... undefined ... undefined, undefined ... ....... Small Data types
Have no ... null ... a. Null ... a.. Small Data types
Built-in types are not related to this article and are not listed.
second, reference type and value type
Reference type: Object function
Value type: Number, Boolean, string, null, undefined
Third, new function (constructor) and prototype (prototype)
On the prototype design mode is not much to say, online a lot of introduction, an example of JS in the use of the new structure of the process of constructing objects.
function classname () {this.id=0;} var v=new classname ();
When you use a function to construct an object, the following process occurs:
1, look for classname prototype, and make a shallow copy.
2. Bind this pointer to the copied object.
3, set the This.constructor property to classname.
[Note: In fact, the value of Classname.prototype.constructor is also set to ClassName, the sixth chapter explains]
4, execute the code in user {}.
5, return the this pointer to give the left value v.
implementation of three basic features of object-oriented
1, packaging
Encapsulation of this we all understand that in JS, the focus is on access rights. In other native support object-oriented language, generally support public, protected, private three keywords to control access rights, but in JS, we can only rely on complex scope relations to control:
Copy Code code as follows:
function ClassName (a) {
var uid=a; UIn for impersonation Private, scope is {}, external cannot be used
This.getuid=function () {return A;}//provides an external read-only interface for UID Obj.getuid ();
This.setuid=function (val) {A=val}//provides an external writable interface Obj.setuid (5) for the UID;
This.id=uid; ID is used by impersonation public obj.id
}
Classname.prototype.func=function () {}; Impersonation public Method Obj.func () call
Classname.stafunc=function () {}; Simulate static method Classname.stafunc () call
var obj=new classname (1);
[!] It is important to note that because the function is a reference type, Classname.prototype.func is a function object shared by all objects (each object has only a reference), so the object is small. Using This.getuid and This.setuid to define a function, so each object instance is saved, and if you use this method, the object will be large and affect performance. Personally, it is not important to simulate private variables.
[!] If there is a need to use a large amount of this.xxx=function () {} In this case, the this pointer in function () {} is different from the most out of this pointer, preferably in the first row of the class definition, plus the Var _this=this; This can also facilitate the use of bound pointers in This.xxx=function () {}.
2. Inherit
The implementation of inheritance, there are mainly 2 methods: the first is to use JavaScript itself prototype model, by assigning prototype and changing its constructor properties to implement inheritance; The second method is not to use prototype, Manual implementation copies all the property methods of the parent object to the child object. For example, a needs to inherit B, the first one can be: a.prototype=new B (); A.prototype.constructor=a; The second way of writing is to write a recursive or extend using the method in jquery. In addition, if you want to achieve more inheritance, prototype really good trouble (need to order multiple classes, but also to build empty objects to connect), the second method is relatively simple, in turn copy. In general this kind of inheritance in order to find the parents convenient, you can add a property in the object, referencing the parent class.
3, polymorphism
Function overload is not said, will, check the parameters can be very flexible. A hidden property is a direct assignment undefined. It is important to note that if you are going to inherit Class B prototype, you must build an empty object to answer, otherwise, you give class writing method, the equivalent of directly modified prototype, even if not write method, you finally modify the constructor will also cause the inheritance chain disorder, It's easy to pick up an empty object:
Copy Code code as follows:
function temp () {};
Temp.prototype=b;
var obj=new temp ();
This allows the class inheriting b.prototype to inherit obj, even if modifying prototype does not affect B. And it's not as much of a waste of space as inheriting new B ().
deep copy and shallow copy
This is no different from any other language, and a shallow copy is a direct copy, encountering a reference type or a class type that is no longer in depth. A deep copy is a recursive copy based on the type judgment.
VI. Prototype.constructor
This value is primarily used to maintain the inherited prototype chain. An article has been written in very detailed, please refer to: http://bbs.51js.com/thread-84148-1-1.html
the object-oriented development of JS
Since I am not a front developer, I have seen the project limited and only talk about my own experience.
I developed the B/s, commonly used two architectures, one is mainly CGI, by the background language to generate HTML,JS just do some user interaction, Ajax communications. Another is the use of MVC, background language only generates Json,view layer completely by the JS component in the client implementation. The latter typically uses object-oriented ideas for programming, encapsulating components into classes, passing JSON to a constructor, and then being added by a controller or layout component. Because components can be reused, in the development of the backend management system, JS game, the efficiency is still very considerable.
