A brief discussion on Javascript object-oriented programming_js object-oriented

Fully using object-oriented design ideas in JS can greatly improve code reuse, reduce coupling between modules, and achieve better logical layering and parallel development. Below I will briefly discuss my understanding in a few steps.

1. Data types and packaging classes

Packaging class... Type name... Common values... Classification

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

built-in types have little to do with this article and are not listed.

2. Reference types and value types

Reference type: object function

Value type: 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. Let’s introduce js with an example. The process of using new to construct an object.

function classname(){this.id=0;} var v=new classname();

When using function to construct an object, the following process is performed:

1 , Find the prototype of classname and make a shallow copy.

2. Bind this pointer to the copied object.

3. Set this.constructor property to classname.

[Note: In fact, the value of classname.prototype.constructor is also set to classname, which will be explained in Part 6]

4. Execute the code in user {}.

5. Return the this pointer and assign it to the lvalue v.

4. Three basic characteristics of object-oriented implementation

1. Encapsulation

Everyone knows about encapsulation. In js, the focus is on access permissions. In other natively supported 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 scope relationships to control:

Copy code The code is as follows:

function classname(a){

var uid=a; //uin To simulate private, the scope is {} and cannot be used externally

this.getuid=function(){return a;} //Provide an external read-only interface for uid obj.getuid();

this.setuid=function(val){a=val} //Provide an external writable interface for uid obj.setuid(5);

this.id=uid; //id is simulation public obj.id uses

}

classname.prototype.func=function(){}; //Simulate the public method obj.func() to call

classname.stafunc =function(){}; //Simulate the static method classname.stafunc() to call

var obj=new classname(1);

[!] It is very important to note that because function is a reference type, classname.prototype.func is a function object shared by all objects (each object only has a reference), so the object size is not large. Using this.getuid and this.setuid is to define a function, so each object instance will save a copy. If this method is used recklessly, it will cause the object to become large in size and affect performance. Personally, I think there is little point in simulating private variables.

[!] If you really need to use a lot of this.xxx=function(){}, 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 the bound pointer can be conveniently used in this.xxx=function(){}.

2. Inheritance

There are two main ways to implement inheritance: the first is to use the prototype model of javascript itself, by assigning a value to the prototype and changing its constructor attribute to achieve inheritance; The second method is to manually deep copy all the attribute methods of the parent object to the child object without using the prototype. For example, if A needs to inherit B, the first way of writing can be: A.prototype=new B();A.prototype.constructor=A; The second way of writing can be to write a recursion, or use the extend method in jquery. In addition, if you want to implement multiple inheritance, the prototype is really troublesome (you need to create multiple classes in sequence and create empty objects to connect them). The second method is relatively simple, just copy them in sequence. Generally, in order to facilitate this type of inheritance to find the parent class, you can add an attribute to the object to reference the parent class.

3. Polymorphism

I won’t talk about function overloading, it’s all done, just check the parameters, it’s very flexible. Hidden attributes are directly assigned undefined. It should be noted that if you plan to inherit the prototype of class B, 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 a method, when you finally modify the constructor It will also cause confusion in the inheritance chain. It is easy to connect an empty object:

Copy code The code is as follows:

function temp(){};

temp.prototype=B;

var obj=new temp();

This way we need to inherit B The .prototype class can inherit obj, and B will not be affected even if the prototype is modified. And it doesn’t waste a lot of space like inheriting new B().

5. Deep copy and shallow copy

This is no different from other languages. Shallow copy is a direct copy, and it will not go into depth when encountering reference types or class types. Deep copy performs recursive copy based on type judgment.

6. prototype.constructor

This value is mainly used to maintain the inherited prototype chain. An article has been written in great detail, please refer to: http://bbs.51js.com/thread-84148-1-1.html

7. Object-oriented development of JS

Since I am not a front-end developer and have seen limited projects, I can only talk about my own experience.

The B/S I have developed usually uses two architectures. One is based on CGI, with the background language generating HTML, and JS only doing some user interaction, ajax communication, etc. The other is to use MVC. The background language only generates JSON, and the View layer is completely implemented on the client side by JS components. The latter generally uses object-oriented ideas for programming, encapsulates components into classes, passes JSON into the constructor, and then adds it from the controller or layout component. Since components can be reused, the efficiency in developing backend management systems and JS games is quite impressive.