JavaScript Object-oriented and prototype ———— Quack No. second

Object oriented

1. Factory mode

functionCreateObject (name,age) {Let obj=NewObject ();  This. Name =name;  This. Age =Age ; returnobj; }let Obja= CreateObject (' Tom ', 24); let OBJB= CreateObject (' Jane ', 23);typeofObja;//ObjecttypeofOBJB;//ObjectObjainstanceofObject;objainstanceofObject;//method Disadvantage: Cannot distinguish between object instances, all object instances are instantiated

2. Constructor mode

functionBox (name,age) { This. Name =name;  This. Age =Age ;  This. Run =function (){    return  This. Name + This. Age; }  }functionDesk (name,age) { This. Name =name;  This. Age =Age ;  This. Run =function (){    return  This. Name + This. Age; }}let Box=NewBox (' Tom ', 24); let desk=NewDesk (' Jane ', 23); BoxinstanceofBox;//trueBoxinstanceofDesk;//falseDeskinstanceofDesk;//true////knowledge extension, object posingLet o =NewObject (); Box.call (O,' Ha ', 25); o.name;

Constructor mode and prototype mode variable storage

3. Prototypes

Each function we create has a prototype (prototype attribute), which is an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. This is logically understood: prototype the prototype object of the object that was created by invoking the constructor. The benefits of using prototypes allow all object instances to share the properties and methods that it contains. That is, instead of defining the object information in the constructor, you can add the information directly to the prototype. (My own understanding is that objects created by the constructor automatically create a prototype object, prototype. )

function Box () {}

Box.prototype.name = ' Lee '; Prototype properties

Box.prototype.age = 100;

Box.prototype.run = function () {//prototype method

Return this.name + this.age + ' running in ';

}

Proof: The properties and methods within the prototype object are shared by the instance object

Let box1 = new Box ();

Let Box2 = new Box ();

Object.is (Box1.run,box2.run); True Object.is () to determine whether two variables are equal (equals box1.run = = = Box2.run);

Explains that the run method in both Box1 and box2 points to the same reference address.

In the prototype schema declaration, there are two more properties, both of which are generated automatically when the object is created. The __proto__ property is a pointer to the prototype object that the instance points to, and it acts as the prototype property constructor of the constructor. With these two properties, you can access the properties and methods in the prototype.

Determines whether an instance object points to a prototype object, as long as it is instantiated and automatically points to the

Box.prototype.isPrototypeOf (Box1); True then the above code

Let obj = new Object (); //

Box.prototype.isPrototypeOf (obj);

If the instance object has a name attribute, the prototype object also has the Name property, passed. Access name prints the Name property in the instance object.

function Box () {}

Box.prototype.name = ' Guaguaerhao ';

Let box1 = new Box ();

Box1.name = ' Quack No. second ';

Console.log (Box1.name); Quack No. Second

The execution flow of the prototype pattern:

1. Find the attribute in the instance object first, and if it exists, return

2. If the attribute is not in the instance object, it is found in the prototype object and, if present, returns

Determine if an attribute exists in an instance

Box1.hasownproperty (' name '); True

(name in Box1)//Either the name attribute in the prototype or the name attribute in the instance will return True

Determine if a property exists in the prototype only

function Hasprototypeproperty (object,property) {

Return!object.hasownproperty (property) && (object);

}

4. Literal prototype mode

function Box () {}

Box.prototype = {

Constructor:box,//constructor of the prototype object is forced to point back to Box

Name: ' Guaguaerhao ',

Age:24,

Run:function () {

return this.name + this.age;

}

}

PS: The biggest drawback of the prototype is its advantages, sharing. The object created by the prototype schema omits the constructor arguments, and the disadvantage is that the initialized values are the same.

5. Constructor plus prototype mode (constructors and methods separate, without a feeling of encapsulation, feeling very fragmented)

function Box (name,age) {//non-shared usage constructor

THIS.name = name;

This.age = age;

this.family = [' Papa ', ' mother ', ' elder brother ', ' I '];

}

Box.prototype = {//shared use of prototypes

Constructor:box,

Run:function () {

return this.name + this.age;

}

}

6. Dynamic prototype mode

function Box (name,age) {

THIS.name = name;

This.age = age;

However, when instantiating an object, the run () method is created each time, wasting memory, because he is the same function in each object, not necessary, each instantiation is created, in fact, only need to create once.

Box.prototype.run = function () {

return this.name + this.age;

}

}

So

function Box (name,age) {

THIS.name = name;

THIS.name = age;

if (typeof this.run!== ' function ') {//will only be instantiated once

Box.prototype.run = function () {

return this.name + this.age;

}

}

}

7. Parasitic constructors (Factory mode + constructors)

function Box (name,age) {

Let obj = new Object ();

Obj.name = name;

Obj.age = age;

Obj.run = function () {

return this.name + this.age;

}

return obj;

}

Let obj = new Box (' Ha ', 24);

Obj.run ();

7. Parasitic constructors (Factory mode + constructors)

function Box (name,age) {

Let obj = new Object ();

Obj.name = name;

Obj.age = age;

Obj.run = function () {

return this.name + this.age;

}

return obj;

}

Let obj = Box (' Ha ', 24);

Obj.run ();

Inherited

1. Inheritance is the core concept in object-oriented, ECMAScript only supports inheritance:

function Parent () {

this.name = ' P ';

}

function Child () {

this.name = ' C ';

}

Inherits from the prototype chain, the object instance after the parent class is instantiated, and the prototype attribute of the child type is assigned

New Parent () will give the information in the constructor and the prototype information to the child

Child.prototype = new Parent ();

2. Object Impersonation Mode

In order to solve the problem that reference sharing and super type cannot be passed, a technique called borrowing constructor is used, or an object is impersonating

function Parent (name,age) {

THIS.name = name;

This.age = age;

}

Parent.prototype.family = ' family '; Child instance cannot be accessed

function Child (name,age) {

Parent.call (This,name,age); Object impersonating, passing arguments to the parent class, object impersonation can only inherit properties from the constructor, inaccessible in the prototype

}

Let child = new Child (' haha ', 24);

Child.name;

child.family; Undefined

3. Prototype chain plus borrowing constructors, combined mode

function Parent (age) {

This.age = age;

}

Parent.prototype.run = function () {//Resolved method sharing

return this.age;

}

function Child (age) {

Parent.call (This,age);

}

Child.prototype = new Parent ();

JavaScript Object-oriented and prototype ———— Quack No. second