Javascript Object-oriented programming (i): encapsulation

A long time ago I wanted to talk about object-oriented "things" in JavaScript, for reasons that have been put on hold, and today the Little Frog is working with readers to learn and learn about object-oriented in JavaScript.

/* To learn about prototypes and prototype chains, first we should understand what the categories of objects and objects are, with the above questions we look at the following cases:
I. Common objects and Function objects
In JavaScript, everything is Object! But the object is also different. is divided into ordinary objects and function objects, object, function is JS comes with the functions of the object. The following examples illustrate

1 /*to learn the prototype and prototype chain, we should first understand what the objects and objects are categorized, with the above questions we look at the following case:2 I. Common objects and Function objects3 in JavaScript, everything is Object! But the object is also different. is divided into ordinary objects and function objects, object, function is JS comes with the functions of the object. The following examples illustrate4 function F1 () {};5 var F2 = function () {};6 var f3 = new Function (' str ', ' Console.log (str) ');7 8 var O3 = new F1 ();9 var O1 = {};Ten var O2 =new Object (); One  A Console.log (typeof Object);//function - Console.log (typeof Function);//function - Console.log (typeof O1);//object the Console.log (typeof O2);//object - Console.log (typeof O3);//object - Console.log (typeof F1);//function - Console.log (typeof F2);//function + Console.log (typeof F3);//function

In the above example O1 O2 O3 is a normal object, F1 F2 F3 is a function object. How to differentiate, in fact, is very simple, all the objects created by the new function () are function objects, others are ordinary objects. F1,f2, in the final analysis, is created by means of new Function (). Function Object is also created through the New function ().

Ii. improvement of the original model
We can write a function that solves the problem of code duplication.
　　

function Cat (name,color) {  return  {name:name, color:color}}

Then generate the instance object, which is equivalent to calling the function:
　　

1 var cat1 = Cat ("Da Mao", "Yellow"); 2 var cat2 = Cat ("Er Mao", "Black");

The problem with this approach remains that there is no intrinsic connection between CAT1 and CAT2, and it does not reflect that they are instances of the same prototype object.

Third, the structural function mode

To solve the problem of generating instances from prototype objects, JavaScript provides a constructor (Constructor) pattern.
The so-called "constructor" is actually a normal function, but the this variable is used internally. Using the new operator on a constructor enables you to generate an instance, and the this variable is bound to the instance object.

function　　　　Cat (name,color) {  this. name=name;　　 this. color=color; }

We can now build the instance object.
　　

var New　　Cat ("Da Mao", "Yellow");  varnew Cat ("Er Mao", "Black"///  fluffy //  Yellow

At this point, CAT1 and Cat2 automatically contain a constructor attribute that points to their constructors.
　　

// true // true

JavaScript also provides a instanceof operator that validates the relationship between a prototype object and an instance object.

instanceof // true instanceof // true

Four, the problem of the structure function pattern
The constructor method works well, but there is a problem of wasting memory.
See, we now add a constant property "type" for the Cat object, and then add a method eat (Eat mouse). So, the prototype object cat becomes the following:
　　

1 function Cat (name,color) {2this. Name = name; 3 this. color = color; 4 this. Type = "Cat animal"; 5  This function () {alert ("Eat Mouse");}; 6 } 　　　　 　　　　 　　　　 　　　　

The same approach is used to generate an instance:
　　

1 var New Cat ("Da Mao", "Yellow"); 2 var New Cat ("Er Mao", "Black"); 3 // Cat Animals 4 // Eat Mice 　　

There seems to be no problem on the surface, but there is a big drawback in actually doing so. That is, for each instance object, the type attribute and the Eat () method are identical, and each time an instance is generated, it must be a duplicate of the content and occupy more memory. This is neither environmentally friendly nor inefficient.
　

1 // false

Can the type attribute and the Eat () method be generated only once in memory, and then all instances point to that memory address? The answer is yes.
Five, prototype mode
JavaScript specifies that each constructor has a prototype property that points to another object. All properties and methods of this object are inherited by an instance of the constructor.
This means that we can define the invariant properties and methods directly on the prototype object.
　

1 function Cat (name,color) {2this. Name = name; 3 this. color = color; 4 }5 Cat.prototype.type = "Feline"; 6 function () {alert ("Eat Mouse")}; 　 　　　　 　　　　

Then, build the instance.
　　

var New　　Cat ("Da Mao", "Yellow");  varnew Cat ("Er Mao", "Black"//  Feline //  eat mice

At this point the type attribute and the Eat () method for all instances are actually the same memory address, pointing to the prototype object, thus improving the efficiency of the operation.
　　

// true

Six, the verification method of prototype mode
To match the prototype property, JavaScript defines some helper methods that help us to use it. ，
6.1 isprototypeof ()
This method is used to determine the relationship between a Proptotype object and an instance.
　　

// true // true

6.2 hasOwnProperty ()
Each instance object has a hasOwnProperty () method that is used to determine whether a property is a local property or a property inherited from a prototype object.
　　

// true // false

6.3 In operator
The in operator can be used to determine whether an instance contains a property, whether it is a local property or not.
　　

inch // true inch // true

The in operator can also be used to traverse all properties of an object.
　　

 for (var in CAT1) {Alert ("cat1[" +prop+ "]=" +cat1[prop]);}

Please continue reading the second part of the series, "Inheritance of constructors" and Part III, "Inheritance of non-constructors".
Because the small frog is also a technical small white, as a beginner for the object-oriented also can not be completely sure I can fully understand, not to mention summary, this is also has no way to update the reason, again with the help of Nanyi Teacher's personal blog and some of my own understanding of the things I hope to be helpful to everyone. Thanks again to Nanyi teacher.

Javascript Object-oriented programming (i): encapsulation