JS's Object-oriented

What is the object ?

object is a whole, to provide some operations, such as: TV (do not know the internal structure, only know how to use )

What is object-oriented ?

When working with objects, focus only on the functionality provided by the object, not on the internal details, such as: operating the TV (only with remote control).

JS Object-oriented

Characteristics:

1. Abstraction: Grasping the core of the problem

2. Package: External use only, regardless of internal details

3. Inheritance: Inherit new objects from existing objects

• Multiple Inheritance

• Polymorphic (less used)

The composition of the object : | var cat = {

1. Attributes (variables) |      Cat.name = ' Xiao Ni '; //Properties

2. Methods (Functions) | cat.show= function () { //method

| Alert (' Meow meow ');

| }}

First, the original object

varCAT1 =Newobject (); Cat1.name= "Xiao Ni"; Cat1.show=function() {alert (' My name is: ' + This. Name)};varCAT2 =Newobject (); Cat2.name= "Xiao Ming"; Cat2.show=function() {alert (' My name is: ' + This. Name)};//calledCat1.show ();//My name is: Xiao niCat2.show ();//My name is: Xiao Ming

This time if you want to create more than one object, you need to put the entire copy above, but this causes a lot of repetition, super chaos. So with the second step, the constructor

Second, the structure function

functionCat (name) {varCat =Newobject (); Cat.name=name; Cat.show=function() {alert (' My name is: ' + This. Name);    }; Rerurn Cat;}//calledvarCAT1 = Cat (' Xiao ni ');    Cat1.show (); //My name is: Xiao nivarCAT2 = Cat (' Xiao Ming ');   Cat2.show (); //My name is: Xiao Ming

But there's a big drawback to this approach.

// false

This means that each newly created object has its own method, although the method is identical. This creates a lot of waste and takes up resources. So there's a third type of prototype pattern.

Three, prototype mode

First of all, what is prototype?

. Box{color: "#white";} <div class= "box" style= "Color: #blue" ></div><div class= "box" ></div><div class= "box" > </div><div class= "box" ></div>// people who believe in CSS will know that the first color is white because the row style becomes blue, with three. The correspondence of the prototype is as follows //                                CSS//    class (one for each set of styles)             prototype // Style     (give one add-on styles at a time)             adds      events to the object individually

A bit more JS example:

varARR1 =NewArray (1,2,3,4);varARR2 =NewArray (5,6,7,8); Array.prototype.sum=function() {//The class method has all    //arr1.prototype.sum = function () {//style Only one of the rows has a       varresult = 0;  for(vari = 0; I < This. length; i++) {result+= This[i]; }           returnresult; };alert (Arr1.sum ()); alert (Arr2.sum ());

If you use Arr1.prototype.sum arr2 also call sum will be error, when added to the array of the common class, can be shared.

Also note that prototype is added to the class, and the method is called by the object

// error: Array.push (); // Error: New arr (); // correct: Arr.push (); // correct: Array.arr ()

To the point, the above example is rewritten as:

functionCat (name) { This. name=name;} Cat.prototype.show=function() {alert (' My name is: ' + This. Name); };//calledvarCAT1 =NewCat (' Xiao ni '); varCAT2 =NewCat (' Xiao Ming ');    Cat1.show (); //My name is: Xiao niCat2.show ();//My name is: Xiao MingAlert (cat1.show= = Cat2.show);//true

The constructor adds the attribute, the prototype adds the method, thus solves the resource waste.

The above is an object-oriented notation.

Update to be continued .....

JS's Object-oriented