Introduction to the prototype of JavaScript design patterns (Object. create and prototype), object. prototype

Introduction to the prototype of JavaScript design patterns (Object. create and prototype), object. prototype

Prototype description

Note: You can use a prototype instance to copy and create new custom objects. You do not need to know the specific process of creating the original object;

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

Use the relevant code:

Copy codeThe Code is as follows:
Function Prototype (){
This. name = '';
This. age = '';
This. sex = '';
}

Prototype. prototype. userInfo = function (){
Return 'Personal Information, name: '+ this. name +', age: '+ this. age +', Gender: '+ this. sex +' <br/> ';
}

Two or more personal information is required:

Copy codeThe Code is as follows:
Var proto = new Prototype ();
Var person1 = Object. create (proto );
Person1.name = 'xiaoming ';
Person1.sex = 'male ';
Person1.age = 35;
Person1.userInfo ();
//
Var person2 = Object. create (proto );
Person2.name = 'huahua ';
Person2.sex = 'female ';
Person2.age = 33;
Person2.userInfo ();

Output:

Copy codeThe Code is as follows:
Personal information, name: James, age: 35, Gender: male
Personal information, name: Xiaohua, age: 33, Gender: Female

The prototype mode is generally used for complex abstract structures, but the content composition is similar. The abstract content can be customized. You only need to modify the original object to meet the requirement;

Object. create

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

Copy codeThe Code is as follows:
1. proto: required to create a prototype of a new object. It can be null. This proto is valuable if it has already been created [new], or the object. prototype;
2. properties: Optional; structure:
{
PropField :{
Value: 'val' | {} | function (){},
Writable: true | false,
Enumerable: true | false,
Retriable: true | false,
Get: function () {return 10 },
Set: function (value ){}
}
}
Custom Attributes have the following four types of local attributes:
Value: custom property value;
Writable: whether the value can be edited. The default value is false. If the value is true, obj. prodField can be assigned a value; otherwise, it is read-only;
Enumerable: enumerable;
Confirurable: configurable;

You can also include the set and get accessors;

[Set, get] and value and writable cannot appear at the same time;

1. Create a prototype object class:
Copy codeThe Code is as follows:
Function ProtoClass (){
This. a = 'protoclass ';
This. c = {};
This. B = function (){
}
}

How to create a prototype:
Copy codeThe Code is as follows:
ProtoClass. prototype. aMethod = function (){
// This.;
// This. B ();
Return this.;
}

Usage

1. Create an object with ProtoClass. prototype;
Copy codeThe Code is as follows:
Var obj1 = Object. create (ProtoClass. prototype ,{
Foo: {value: 'obj1', writable: true}
})

Obj1 has the ProtoClass Prototype Method aMethod;
Copy codeThe Code is as follows:
Obj1.aMethod ();
// The undefined method will be output for access, and the ProtoClass member will not be able to access

However, this method cannot execute the member attributes of a, B, and c under ProtoClass:

2. ProtoClass instantiation is used for prototype:
Copy codeThe Code is as follows:
Var proto = new ProtoClass ();

Var obj2 = Object. create (proto ,{
Foo: {value: 'obj2 '}
});

In this way, the created obj2 has all the ProtoClass member attributes a, B, c, and aMethod prototype methods, and adds a foo read-only data attribute;
Copy codeThe Code is as follows:
Obj2.a; // ProtoClass
Obj2.c: // [Object]
Obj2. B ();//

Obj2.aMethod (); // ProtoClass
Obj2.foo; // obj2

3. Subclass inheritance:

Copy codeThe Code is as follows:
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 to the aMethod method of ProtoClass and executed;

Copy codeThe Code is as follows:
Var func = new SubClass ();
Func. aMethod (); // undefined, unable to read ProtoClass member attributes, a, B, c
Func. subMethod (); // subclass

To enable SubClass to read the member attributes of ProtoClass, SubClass should be changed:

Copy codeThe Code is as follows:
Function SubClass ()
{
ProtoClass. call (this );
}

// Other code;

This method can obtain the member attributes and prototype methods of ProtoClass ;:

Copy codeThe Code is as follows:
Var func = new SubClass ();
Func. aMethod (); // ProtoClass
Func. subMethod (); // ProtoClass

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

Copy codeThe Code is as follows:
Var proto = new ProtoClass ();

Function SubClass (){
}

SubClass. prototype = Object. create (proto ,{
Foo: {value: 'subclass '}
});

In this way, after SubClass is instantiated, all ProtoClass attributes and prototype methods can be obtained, and a read-only data attribute foo can be created;

Copy codeThe Code is as follows:
Var func = new SubClass ();
Func. foo; // subclass
Func. a; // ProtoClass
Func. B ();//
Func. c; // [Object]
Func. aMethod (); // ProtoClass

4. In addition, the method for creating an inheritance is the same as that for Object. create to use the instantiated ProtoClass as a prototype:
Copy codeThe Code is as follows:
Function SubClass (){
This. foo = 'subclass '; // you can read and write data here.
}

SubClass. prototype = new ProtoClass ();

Object. create

Object. create is used to create a new Object. If it is an Object, prototype is null, which is consistent with new Object (); or;

When it is a function, it serves the same purpose as new FunctionName;
Copy codeThe Code is as follows:
// 1 Object
Var o = {}
// Equivalent
Var o2 = Object. create ({});
// The two constructor are the same;

//-----------------------------------------
Function func (){
This. a = 'func ';
}
Func. prototype. method = function (){
Return this.;
}

Var newfunc = new func ();
// Equivalent to [same effect]
Var newfunc2 = Object. create (Object. prototype/* Function. prototype | function (){}*/,{
A: {value: 'func', writable: true },
Method: {value: function () {return this. ;}}
});

However, newfunc and newfunc2 have different function references when creating their objects.

Newfunc is function func () {...}, newfunc2 is function Function {Native}
Copy codeThe Code is as follows:
Object. create (proto [, propertiesField]):

Proto indicates that the value is required and can be null. If this parameter is not set, an exception is thrown;

Proto is a non-null value, that is, the instantiated value, that is, the new value. Most objects in javaScript have the constructor attribute, which indicates the object is instantiated through which function;

PropertiesField is optional. It sets the member attributes or methods that may be required to create an object;