Fully using object-oriented design ideas in JS can greatly improve code reuse, reduce coupling between modules, and better logical hierarchy and parallel development. Let me briefly talk about my understanding in a few steps below.
1. Data type and packaging class
Packaging class... Type name... Common values... Classification
Number ... number ... 123.123 ... Basic data type
Boolean … Boolean … true, false … Basic data types
String ... string ... "hello world!" ... Basic data types
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 have little to do with this article and will not be listed.
2. Reference type and value type
Reference type: object function
Value types: number, boolean, string, null, undefined
3. New function (constructor) and prototype (prototype)
I won’t say much about the design pattern of prototype. There are many introductions on the Internet. I will introduce the process of using new to construct objects in js with an example.
function classname(){=0;} var v=new classname();
When constructing an object using function, perform the following process:
1. Find the prototype of the classname and make a shallow copy.
2. Bind this pointer to the copied object.
3. Set the property to classname.
[Note: The actual value is also set to classname, which will be explained in the sixth part]
4. Execute the code in user {}.
5. Return this pointer to assign lvalue v.
IV. Implement three basic features of object-oriented
1. Packaging
Everyone understands this, in js, the focus is on access permissions. In other native object-oriented languages, the three keywords public, protected, and private are generally supported to control access permissions, but in js, we can only rely on complex scoped relationships to control:
function classname(a){
var uid=a; //uin is a simulated private, with a scope of {}, and cannot be used externally
=function(){return a;} //Provide an external read-only interface for uid ();
=function(val){a=val} // Provide an external writable interface for uid (5);
=uid; //id is used for simulation public
}
=function(){}; //Simulate public method () call
=function(){}; //Simulate static method () call
var obj=new classname(1);
[!] It is very important to note that because function is a reference type, it is a function object shared by all objects (each object only contains a reference), so the object is not large in scale. Using and defining a function, so each object instance will be stored. If you use this method unruly, it will cause the object to be huge and affect performance. I personally think that simulating private variables is of little significance.
[!]If there is a requirement, it is necessary to use =function(){} in this case, the pointer in function(){} is different from the outermost pointer. It is best to add var _this=this; to the first line of the class definition, so that the bound pointer can also be used in =function(){}.
2. Inheritance
There are two main methods for inheriting implementation: the first is to use the prototype model of javascript itself, and inheritance is achieved by assigning values to the prototype and changing its constructor attributes; the second method is to manually copy all the attribute methods of the parent object to the child object without using prototype. For example, A needs to inherit B. The first way to write it can be: =new B();=A; The second way to write it can be recursive, or use the method extend in jquery. In addition, if you want to implement multiple inheritance, prototype will be really troublesome (multiple classes need to be successively, and empty objects need to be built to receive them). The second method is relatively simple, just copy them in turn. Generally, in order to find the parent class, this kind of inheritance can add a property to the object and refer to the parent class.
3. Polymorphism
I won’t talk about function overloading, I can do it, just check the parameters, it’s very flexible. Hidden attributes are to directly assign undefined values. It should be noted that if you plan to inherit the prototype of B class, you must create an empty object to receive it. Otherwise, if you write a method to the class, it is equivalent to directly modifying the prototype. Even if you do not write the method, the inheritance chain will be disordered when you modify the constructor in the end, and it is easy to connect an empty object:
function temp(){};
=B;
var obj=new temp();
In this way, the class that needs to be inherited can inherit obj, and even if the prototype is modified, it will not affect B. And it is not like inheriting new B() to waste a lot of space.
5. Deep copy and shallow copy
This is no different from other languages. A shallow copy is a direct copy. If you encounter a reference type or class type, you will no longer go deeper. Deep copying is a recursive copy based on the type judgment.
six,
This value is mainly used to maintain the inherited prototype chain. An article has been written in great detail, please refer to: http://bbs./
7. Object-oriented development of JS
Since I am not a front desk developer, I have seen limited projects and only talk about my own experience.
The B/S I have developed often uses two architectures. One is mainly based on CGI and generates HTML from the background language. JS only does some user interaction, ajax communication, etc. Another type is to use MVC, the background language only generates JSON, and the View layer is completely implemented by JS components on the client side. The latter generally uses object-oriented ideas to program, encapsulate components into classes, pass JSON into constructors, and then add them from the controller or layout component. Since components can be reused, the efficiency is still considerable in developing backend management systems and JS games.
1. Data type and packaging class
Packaging class... Type name... Common values... Classification
Number ... number ... 123.123 ... Basic data type
Boolean … Boolean … true, false … Basic data types
String ... string ... "hello world!" ... Basic data types
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 have little to do with this article and will not be listed.
2. Reference type and value type
Reference type: object function
Value types: number, boolean, string, null, undefined
3. New function (constructor) and prototype (prototype)
I won’t say much about the design pattern of prototype. There are many introductions on the Internet. I will introduce the process of using new to construct objects in js with an example.
function classname(){=0;} var v=new classname();
When constructing an object using function, perform the following process:
1. Find the prototype of the classname and make a shallow copy.
2. Bind this pointer to the copied object.
3. Set the property to classname.
[Note: The actual value is also set to classname, which will be explained in the sixth part]
4. Execute the code in user {}.
5. Return this pointer to assign lvalue v.
IV. Implement three basic features of object-oriented
1. Packaging
Everyone understands this, in js, the focus is on access permissions. In other native object-oriented languages, the three keywords public, protected, and private are generally supported to control access permissions, but in js, we can only rely on complex scoped relationships to control:
Copy the codeThe code is as follows:
function classname(a){
var uid=a; //uin is a simulated private, with a scope of {}, and cannot be used externally
=function(){return a;} //Provide an external read-only interface for uid ();
=function(val){a=val} // Provide an external writable interface for uid (5);
=uid; //id is used for simulation public
}
=function(){}; //Simulate public method () call
=function(){}; //Simulate static method () call
var obj=new classname(1);
[!] It is very important to note that because function is a reference type, it is a function object shared by all objects (each object only contains a reference), so the object is not large in scale. Using and defining a function, so each object instance will be stored. If you use this method unruly, it will cause the object to be huge and affect performance. I personally think that simulating private variables is of little significance.
[!]If there is a requirement, it is necessary to use =function(){} in this case, the pointer in function(){} is different from the outermost pointer. It is best to add var _this=this; to the first line of the class definition, so that the bound pointer can also be used in =function(){}.
2. Inheritance
There are two main methods for inheriting implementation: the first is to use the prototype model of javascript itself, and inheritance is achieved by assigning values to the prototype and changing its constructor attributes; the second method is to manually copy all the attribute methods of the parent object to the child object without using prototype. For example, A needs to inherit B. The first way to write it can be: =new B();=A; The second way to write it can be recursive, or use the method extend in jquery. In addition, if you want to implement multiple inheritance, prototype will be really troublesome (multiple classes need to be successively, and empty objects need to be built to receive them). The second method is relatively simple, just copy them in turn. Generally, in order to find the parent class, this kind of inheritance can add a property to the object and refer to the parent class.
3. Polymorphism
I won’t talk about function overloading, I can do it, just check the parameters, it’s very flexible. Hidden attributes are to directly assign undefined values. It should be noted that if you plan to inherit the prototype of B class, you must create an empty object to receive it. Otherwise, if you write a method to the class, it is equivalent to directly modifying the prototype. Even if you do not write the method, the inheritance chain will be disordered when you modify the constructor in the end, and it is easy to connect an empty object:
Copy the codeThe code is as follows:
function temp(){};
=B;
var obj=new temp();
In this way, the class that needs to be inherited can inherit obj, and even if the prototype is modified, it will not affect B. And it is not like inheriting new B() to waste a lot of space.
5. Deep copy and shallow copy
This is no different from other languages. A shallow copy is a direct copy. If you encounter a reference type or class type, you will no longer go deeper. Deep copying is a recursive copy based on the type judgment.
six,
This value is mainly used to maintain the inherited prototype chain. An article has been written in great detail, please refer to: http://bbs./
7. Object-oriented development of JS
Since I am not a front desk developer, I have seen limited projects and only talk about my own experience.
The B/S I have developed often uses two architectures. One is mainly based on CGI and generates HTML from the background language. JS only does some user interaction, ajax communication, etc. Another type is to use MVC, the background language only generates JSON, and the View layer is completely implemented by JS components on the client side. The latter generally uses object-oriented ideas to program, encapsulate components into classes, pass JSON into constructors, and then add them from the controller or layout component. Since components can be reused, the efficiency is still considerable in developing backend management systems and JS games.