Prototype mode description
Note: Use prototype instances to copy and create new customizable objects; for newly created objects, you do not need to know the specific process of creating the original object;
Procedure: Prototype => new ProtoExam => clone to new Object;
Use relevant code:
The code copy 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 />';
}
Now two or more personal information content is required:
The code copy is as follows:
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:
The code copy is as follows:
Personal information, name: Xiao Ming, age: 35, gender: male
Personal information, name: Xiaohua, age: 33, gender: female
Prototype mode is generally used for complex abstract structures, but the content composition is similar, abstract content can be customized, and new creation only requires slightly modified on the original creation object to meet the requirements;
Object.create Instructions
1>. Definition: Create an object that specifies a prototype object and can contain optional custom properties;
2> Object.create(proto [, properties]); Optional, used to configure properties of new objects;
The code copy is as follows:
1. proto: To create a prototype of a new object, it must be null; this proto is valuable only if it has been created [new] or object.prototype;
2. properties: optional, structure:
{
propField: {
value: 'val'|{}|function(){},
writable: true|false,
enumerable: true|false,
configurable: true|false,
get:function(){return 10},
set:function(value){}
}
}
Custom attributes have the following four attributes:
value: Custom attribute value;
writable: Whether the value of this item is editable, default is false, and when true, obj.prodField can be assigned; otherwise read-only;
enumerable: enumerable;
configurable: configurable;
It can also include set, get accessor methods;
Among them, [set, get] cannot appear at the same time as value and writable;
1. Create a prototype object class:
The code copy is as follows:
function ProtoClass(){
this.a = 'ProtoClass';
this.c = {};
this.b = function() {
}
}
Creating a prototype method:
The code copy is as follows:
ProtoClass.prototype.aMethod = function() {
//this.a;
//this.b();
return this.a;
}
How to use
1. Create an object with ProtoClass.prototype;
The code copy is as follows:
var obj1 = Object.create(ProtoClass.prototype, {
foo:{value: 'obj1', writable: true}
})
obj1 has the ProtoClass prototype method aMethod method;
The code copy is as follows:
obj1.aMethod();
//The undefined method will be output to be accessible, and the ProtoClass member cannot be accessed
However, this method cannot execute the member properties of a, b, c under ProtoClass:
2. Use instantiated ProtoClass as the prototype:
The code copy is as follows:
var proto = new ProtoClass();
var obj2 = Object.create(proto, {
foo:{value:'obj2'}
});
Obj2 created in this way has all the member attributes a, b, c and aMethod prototype method of ProtoClass; and adds a foo read-only data attribute;
The code copy is as follows:
obj2.a; //ProtoClass
obj2.c: //[Object]
obj2.b(); //
obj2.aMethod(); //ProtoClass
obj2.foo; //obj2
3. Subclass inheritance:
The code copy 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 from ProtoClass' aMethod method and executed;
The code copy is as follows:
var func = new SubClass();
func.aMethod() ;//undefined, the member properties of ProtoClass cannot be read, a, b, c
func.subMethod();//subclass
To enable SubClass to read the member properties of ProtoClass, SubClass needs to be changed:
The code copy is as follows:
function SubClass()
{
ProtoClass.call(this);
}
//Other code;
This method can obtain the member properties and prototype methods of ProtoClass;:
The code copy 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;
The code copy is as follows:
var proto = new ProtoClass();
function SubClass() {
}
SubClass.prototype = Object.create(proto, {
foo:{value: 'subclass'}
});
In this way, after SubClass is instantiated, you can obtain all ProtoClass properties and prototype methods, and create a read-only data attribute foo;
The code copy is as follows:
var func = new SubClass();
func.foo; //subclass
func.a; //ProtoClass
func.b(); //
func.c; //[Object]
func.aMethod(); //ProtoClass
4. The other method of creating inheritance is the same as Object.create's instantiated ProtoClass for prototypes:
The code copy is as follows:
function SubClass() {
this.foo = 'subclass'; //But it can be read and written here
}
SubClass.prototype = new ProtoClass();
Object.create Related Instructions
Object.create is used to create a new object. When it is Object, the prototype is null, and its effect is consistent with new Object(); or {};
When function, the function is the same as new FunctionName;
The code copy is as follows:
//1 Object
var o = {}
//Equivalent to
var o2 = Object.create({});
//The constructors are the same;
//-----------------------------------------
function func() {
this.a = 'func';
}
func.prototype.method = function() {
return this.a;
}
var newfunc = new func();
//Equivalent to [the effect is the same]
var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {
a: {value:'func', writable:true},
method: {value: function() {return this.a;} }
});
But newfunc and newfunc2 are different in the function references to create their objects.
newfunc is function func() {...}, newfunc2 is function Function { Native }
The code copy is as follows:
Object.create(proto[, propertiesField]):
proto indicates that the value is required and can be null. If it is not set, an exception will be thrown;
proto is non-null, that is, the instantiated value, that is, the value that has been new; most objects in javaScript have constructor attributes, which attributes indicate which function the object is instantiated through;
propertiesField is optional, setting the member properties or methods that may be required for newly created objects;