Introduction to prototype patterns of Object.create and prototype

Prototype pattern specification

Description: use the prototype instance to copy and create new customizable objects; New object, do not need to know the original object creation process;

Process: Prototype = > new ProtoExam = > clone to new Object;

Use the relevant code:

function Prototype() {

    this.name = '';

    this.age = '';

    this.sex = '';

}
Prototype.prototype.userInfo = function() {

    return ' Personal information ,  The name : '+this.name+',  age : '+this.age+',  gender :'+this.sex+'<br />';

}

Two or more pieces of personal information are now required:

var proto = new Prototype();

var person1 = Object.create(proto);

person1.name = ' Xiao Ming ';

person1.sex = ' male ';

person1.age = 35;

person1.userInfo(); 

//

var person2 = Object.create(proto);

person2.name = ' xiaohua ';

person2.sex = ' female ';

person2.age = 33;

person2.userInfo();

Output returns:

 Personal information ,  The name :  Xiao Ming ,  age : 35,  gender :  male 

 Personal information ,  The name :  xiaohua ,  age : 33,  gender :  female 

Prototype pattern, 1 generally used in the abstract structure is complex, but the content composition is similar, abstract content can be customized, the new creation only need to modify the original creation object to meet the requirements;

Instruction for Object.create

1 > . Definition: create an object that can be specified as a prototype object and can contain optional custom properties;
2 > Object. create (proto [properties]); Optionally,   is used to configure the properties of the new object.

1. proto:  To create a new object   Prototype, must be, can be  null;  this  proto  If it's already created [new pass ] Or,   object .prototype  worthwhile ;

2. properties:  Optionally, the structure is :

{

     propField: {

           value: 'val'|{}|function(){},

           writable: true|false,

           enumerable: true|false,

           configurable: true|false,

           get:function(){return 10},

           set:function(value){}

     }

}

 The custom properties are as follows 4 Specific property: 

value:  Custom property values ;

writable:  If the value is editable, default is  false,  As for the  true  When, obj.prodField  Can be assigned; Otherwise the read-only ;

enumerable:  Can be enumerated ; 

confirurable:  configurable ;
 It can also include  set, get  Accessor method; 
 Among them, [set, get]  with  value  and  writable  It can't happen at the same time; 

1. Create prototype object class:

function ProtoClass(){

   this.a = 'ProtoClass';

   this.c = {};

   this.b = function() {

   }

}

Prototyping method:

ProtoClass.prototype.aMethod = function() {

     //this.a;

     //this.b();

　　 return this.a;

}

Method of use

1. Create an object with ProtoClass.prototype;

var obj1 = Object.create(ProtoClass.prototype, {

    foo:{value: 'obj1', writable: true}

})

obj1 has the method of ProtoClass prototype method aMethod;

obj1.aMethod();

// Will be output  undefined  Method is accessible, ProtoClass  Members cannot access 

However, this method does not perform the member properties of a, b, c under ProtoClass:

2. Use the instantiated ProtoClass as the prototype:

var proto = new ProtoClass();
var obj2 = Object.create(proto, {

    foo:{value:'obj2'}

});

The obj2 thus created has all the member attributes of ProtoClass, a, b, c, and aMethod prototype methods; An foo read-only data attribute was added.

obj2.a; //ProtoClass

obj2.c: //[Object]

obj2.b(); //
obj2.aMethod(); //ProtoClass

obj2.foo; //obj2

3. Subclass inheritance:

function SubClass() {

    

}

SubClass.prototype = Object.create(ProtoClass.prototype ,{

    foo:{value: 'subclass'}

});
SubClass.prototype.subMethod = function() {

     return this.a || this.foo;

}

This method can be inherited from ProtoClass's aMethod method, executed;

var func = new SubClass();

func.aMethod() ;//undefined, Can't read  ProtoClass  Member properties of ,a,b,c

func.subMethod();//subclass

To enable SubClass to read the member properties of ProtoClass, SubClass needs to change:

function SubClass()

{

    ProtoClass.call(this);

}
// Other code ;

This method can obtain the member properties and prototype methods of ProtoClass. :

var func = new SubClass();

func.aMethod() ;//ProtoClass

func.subMethod();//ProtoClass

Another method is to use the instantiated ProtoClass object as the prototype of SubClass.

var proto = new ProtoClass();
function SubClass() {

}
SubClass.prototype = Object.create(proto, {

    foo:{value: 'subclass'}

});

After the instantiation of SubClass, all the properties and prototype methods of ProtoClass can be obtained, and a read-only data property foo can be created.

var func = new SubClass();

func.foo; //subclass

func.a; //ProtoClass

func.b(); //

func.c; //[Object]

func.aMethod(); //ProtoClass

4. Another creation inheritance method, similar to Object.create, which USES the instantiated ProtoClass to make a prototype effect:

function SubClass() {

　　this.foo = 'subclass'; // But this side can read and write 

}
SubClass.prototype = new ProtoClass();

Object.create

Object.create is used to create a new object. When Object is Object, prototype is null, and new Object(); Or {} 1 to;

When it is function, it ACTS like new FunctionName 1.

//1 Object

var o = {}

// Is equivalent to 

var o2 = Object.create({});

// both  constructor 1 sample ;
//-----------------------------------------

function func() {

    this.a = 'func';

}

func.prototype.method = function() {

    return this.a;

}
var newfunc = new func();

// Is equivalent to [ The effect 1 sample ]

var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {

   a: {value:'func', writable:true},

   method: {value: function() {return this.a;} }

});

But newfunc and newfunc2 have different functional references to the objects that created them.

newfunc = function func() {... }, newfunc2 is function Function {Native}

var proto = new Prototype();

var person1 = Object.create(proto);

person1.name = ' Xiao Ming ';

person1.sex = ' male ';

person1.age = 35;

person1.userInfo(); 

//

var person2 = Object.create(proto);

person2.name = ' xiaohua ';

person2.sex = ' female ';

person2.age = 33;

person2.userInfo();

8
proto indicates that this value is required and can be null. If it is not set, an exception will be thrown.

proto is not null, that is, the value that has been instantiated, that is, the value that has been new; Most objects in javaScript have constructor properties, which indicate which function the object is instantiated through.

propertiesField is optional, which sets the member properties or methods that may be required for the newly created object.