First, the original mode of the generated object
Suppose we think of a cat as an object that has two properties of "name" and "Color".
var Cat = {
Name: ",
Color: '
}
Now we need to generate two instance objects based on the schema of the prototype object.
var cat1 = {}; Create an empty object
Cat1.name = "Mao"; Assigning values according to the properties of the prototype object
Cat1.color = "Yellow";
var cat2 = {};
Cat2.name = "Er mao";
Cat2.color = "BLACK";
Well, this is the simplest package, encapsulating two attributes in an object. However, there are two shortcomings in this writing, one is that if you generate several instances, it is very troublesome to write, and the other is that there is no way between the example and the prototype, and we can see what the connection is.
PS: Can be understood as an example of every kitten, the prototype is to instantiate every kitten cat.
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:
var cat1 = Cat ("Da Mao", "Yellow");
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.
Every object of Ps:js is to embody his archetype.
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.
For example, a cat's prototype object can now be written like this,
function Cat (name,color) {
This.name=name;
This.color=color;
}
We can now build the instance object.
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (cat1.name); Da Mao
alert (Cat1.color); Yellow
At this point, CAT1 and Cat2 automatically contain a constructor attribute that points to their constructors.
Alert (Cat1.constructor = = Cat); True
Alert (Cat2.constructor = = Cat); True
JavaScript also provides a instanceof operator that validates the relationship between a prototype object and an instance object.
Alert (cat1 instanceof Cat); True
Alert (cat2 instanceof Cat); True
PS: The constructor pattern is defined as a function, which is called the class name, and the function internally formulates the properties and methods of the class (this). At instantiation, each instance is generated through new. Defining classes and instantiating instances here with other OPP languages is a bit similar to replacing class with function.PS: The above constructors create classes and objects there is a serious problem is to waste memory!!!
Four, the problem of the structure function pattern
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:
function Cat (name,color) {
THIS.name = name;
This.color = color;
This.type = "Cat animal";
This.eat = function () {alert ("Eat Mouse");
}
The same approach is used to generate an instance:
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (Cat1.type); Cat Animals
Cat1.eat (); 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.
Alert (cat1.eat = = cat2.eat); False
PS: Our goal is to have each instance have a common attribute type and common method eat so that as long as each instance points to the same properties and methods, the implementation is shared so that no duplication of code and memory is wasted.
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
PS: In fact, this is a mixture of constructors and prototypes
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.
PS: What is called pointing to another object? Suppose the name of this object is called a prototype object (the object that the prototype points to). All properties and methods of this object are inherited by an instance of the constructor. Since inheritance, it is that every grooming will have all the properties and methods of this object.
This means that we can define the invariant properties and methods directly on the prototype object.
function Cat (name,color) {
THIS.name = name;
This.color = color;
}
Cat.prototype.type = "Cat animal";
Cat.prototype.eat = function () {alert ("Eat Mouse")};
Then, build the instance.
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (Cat1.type); Cat Animals
Cat1.eat (); 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.
Alert (cat1.eat = = cat2.eat); True
PS: Reach Our Goal!
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.
Alert (Cat.prototype.isPrototypeOf (CAT1)); True
Alert (Cat.prototype.isPrototypeOf (CAT2)); 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.
Alert (Cat1.hasownproperty ("name")); True
Alert (Cat1.hasownproperty ("type")); 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.
Alert ("name" in CAT1); True
Alert ("type" in CAT1); True
The in operator can also be used to traverse all properties of an object.
For (Var prop in cat1) {alert ("cat1[" +prop+ "]=" +cat1[prop]);}
Javascript Object-oriented one: encapsulating data methods, generating instances from prototype objects