On JS object-oriented object creation

Hello,everybody, the question to be explored today is JS object-oriented, in fact, object-oriented, is generally used in large-scale projects, but it is very important for us to understand the JS language.

First what is object-oriented programming (OOP), is to use the idea of the object to write code, what is the object, in fact, we have been in use, like array time date is the object, and these objects are created by the system, so called system objects, and we can of course create objects, The general object consists of two parts:

1 method (the function below the dynamic object) such as the push () of the array, the sort () method

2 property (static, equivalent to the variable below the object) the length property of the array

OK, since there are object-oriented programming, then there must be its advantages, then we look at its four characteristics:

Abstraction: Seizing the core problem encapsulation: Access method inheritance only through objects: Inheriting new object polymorphism from existing objects: different forms of multiple objects

These characteristics, the beginning of understanding is more abstract, only we in practice to understand its meaning. But let's do a brief introduction.

Abstract: We know that the following methods of different objects are not the same, such as the array has a method property belonging to the array, the time object has its own method properties, we can not add the method of the time object to the array, a lot of methods to classify, put under different objects, is an abstraction, better management.

Encapsulation: This is a good understanding, that is, each method must be used under the specified object.

Inheritance: If we have two pop-up windows, the Second pop window compared to the first pop-up window is more than a function, this time, it is appropriate to inherit, the second can inherit the first function, and then on this basis to add functionality, inheritance improves our code reuse.

Polymorphic: is also a form of code reuse, not too much, such as a computer, we only use an interface, and then connect the different devices, these devices can achieve different functions. It sounds more abstract, and generally the backend language is used more.

Let's look at the evolution of object-oriented creation and creation patterns.

1 Creating an object-oriented

// create an object-oriented var New // Create an empty object obj.name = ' haha 'function() {    alert (obj.name);

}

Obj.showname ();

This chestnut is very simple, the problem is that when we have multiple object-oriented, repeated code too much, need to encapsulate, so the following method

2 Factory mode

functionCreateperson (name) {//Raw Materials    varobj =NewObject (); //processingObj.name =name; Obj.showname=function() {alert ( This. Name); }   //Factory   returnobj;}varP1 = Createperson (' haha '));p 1.showName ();varP2 = Createperson (' hehe '));p 2.showName ();

This is actually a simple encapsulation function, the whole process like a factory assembly line, so called Factory mode, but in order to be consistent with our system objects (array, etc.), so we have to transform, become a constructor mode

3 constructor Mode

We're going to change through these three things: 1 Function name Capital 2 New keyword Extract 3 this point to the newly created object

function Createperson (name) {   //function name capitalized     //var this=new Object (); //System secretly do for us: do not write

     this. Name =
     thisfunction
        alert (this
     
    // return this; and the default return value of the function is this, which is the object (implicitly returning without having to write the return value yourself

var p1 =new createperson (' haha '
When calling a function with new: This is the object that is created and the default return value of the function is this object (implicitly returning without having to write the return value yourself)
P1.showname ();
var New Createperson (' hehe ');
P2.showname ();

So the final code is this.

function Createperson (name) {      this. Name = name;         This function () {         alert (this. Name);       var p1 =new createperson (' haha ');  P1.showname (); var New Createperson (' hehe '); P2.showname ();

But there are also problems with the function construction pattern:

alert (p1.showname==p2.showname); // false

To test this code, the two methods are different, that is, the two objects are not a common method, each new, the system will create a newly created memory, the two objects have their own site, but they have the same function, not shared, certainly not what we want. So there's the next way, prototype mode

4 prototype Mode

Each function we create has a prototype (prototype), which, literally, means the primitive, the prototype is added under the constructor, and at this point the object created by the constructor can share the methods and properties under this prototype.

See a chestnut (prototype + construction)

function Createperson (name) {     this.name =function() {     alert (this  . Name);} var p1 =new createperson (' haha ');p 1.showName (); var New Createperson (' hehe ');p 2.showName (); alert (P1.showname==p2.showname); // true

The last sentence of the test is true, you can see the constructor under the prototype of the method ShowName () method is all the objects created by this constructor is shared, that is, they share a memory, further said they have a referential relationship, That means you change the P1 showname also affects P2.

Therefore, when we construct the object, it is usually the prototype pattern and the construction pattern combination , the change uses the stereotype pattern unchanged with the construction pattern, like above chestnut, the attribute uses the constructor, because the general different object attributes are different, the method uses the prototype pattern.

Here I want to introduce an important attribute is constructor

1 it refers to the constructor of an object

2 Each custom constructor has a property, when you finish writing a constructor, the system program will automatically add the corresponding constructor under the function's prototype, such as a custom constructor AAA, the system will automatically help you add this sentence:

Aaa.prototype.construnctor = AAA; (each function is automatically generated)

So after each constructor is born, there is a property underneath the prototype. You can test it.

function varnew  aaa (); A1.constructor  //AAA functions 

3 So since it is the prototype, the constructor can also be modified.

function Aaa () {} Aaa.prototype.construnctor= 10; // Add var New Aaa (); A1.constructor   //10

However, you should avoid modifying this property.

4 But there is a situation, we need to modify, in order to create the code of the object is more convenient, you must have seen such code, in the form of JSON in the way of adding methods, that is, the literal method:

function= {//JSON is equivalent to re-assigning a prototype of AAA, so it also covers the //      Num1:function () {alert (10);} ,    num2:function () {alert (20);}

var New  //Object

This time the pop-up constructor turned into an object, which is why, first of all we want to know that object is the most initial big boss of all objects, all objects are object, followed by the above, each of the first constructor prototype below have such a sentence, Aaa.prototype.construnctor = AAA; the assignment of this example is not added to the prototype, it is an assignment, so the original constructor is overwritten, so we need to fix the point of the prototype when we write.

function= {     constructor:aaa,     num1:function() {alert (ten)},     num2:  function() {alert (varNew
// Aaa

About JS Object-oriented construction of the object first said here, in fact, there are other non-commonly used patterns, follow-up will continue to add, if the omission, welcome to add, I am mu Qing, see not scattered

On JS object-oriented object creation