The prototype model of JavaScript design pattern (Object.create and prototype) introduces _javascript skills

Prototype Mode description

Description: Use a prototype instance to copy the creation of a new customizable object, a new object that does not need to know the exact process of the original object creation;

Process: Prototype => new Protoexam => clone to New Object;

Use related code:

Copy Code code as follows:

function Prototype () {
THIS.name = ';
This.age = ';
This.sex = ';
}

Prototype.prototype.userInfo = function () {
Return ' personal information, name: ' +this.name+ ', Age: ' +this.age+ ', Sex: ' +this.sex+ ' <br/> ';
}

Now requires two or more personal information content:

Copy Code code 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 = ' Xiao Hua ';
Person2.sex = ' female ';
Person2.age = 33;
Person2.userinfo ();

Output returns:

Copy Code code as follows:

Personal information, name: Xiao Ming, Age: 35, Sex: Male
Personal information, name: Xiao Hua, age: 33, Sex: Female

Prototype mode, generally used for abstract structure complex, but the content composition is similar, abstract content can be customized, the new creation only can be slightly modified on the original object to meet the requirements of the situation;

Object.create Use instructions

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

Copy Code code as follows:

1. Proto: To create a prototype of a new object, it must be null; This proto if it has been created [new], or object. prototype is valuable;
2. Properties: Optional, 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 attribute has the following four native attributes:
Value: custom attribute values;
Writable: The value of the item is editable, the default is False, and when true, the Obj.prodfield can be assigned, otherwise read-only;
Enumerable: Enumerable;
Confirurable: Configurable;

You can also include set, get accessor methods;

Where [set, get] is not present at the same time as value and writable;

1. Create a Prototype object class:

Copy Code code as follows:

function Protoclass () {
THIS.A = ' Protoclass ';
THIS.C = {};
this.b = function () {
}
}

To Create a prototype method:

Copy Code code as follows:

ProtoClass.prototype.aMethod = function () {
THIS.A;
This.b ();
return THIS.A;
}

How to use

1. Create an object with Protoclass.prototype;

Copy Code code as follows:

var obj1 = object.create (Protoclass.prototype, {
Foo:{value: ' Obj1 ', writable:true}
})

Obj1 has the method of Protoclass prototype method Amethod;

Copy Code code as follows:

Obj1.amethod ();
The output undefined method is accessible and the Protoclass member cannot access

However, this method does not perform the member properties of a, B, C under Protoclass:

2. Using the Protoclass as a prototype:

Copy Code code as follows:

var proto = new Protoclass ();

var obj2 = Object.create (Proto, {
Foo:{value: ' Obj2 '}
});

The obj2 created in this way has all Protoclass member properties A, B, C, and the Amethod prototype method; And added an Foo read-only data attribute;

Copy Code code as follows:

obj2.a; Protoclass
OBJ2.C://[object]
Obj2.b (); //

Obj2.amethod (); Protoclass
Obj2.foo; Obj2

3. Subclass Inheritance:

Copy Code code 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 into the Protoclass Amethod method and executed;

Copy Code code as follows:

var func = new Subclass ();
Func.amethod ();//undefined, cannot read Protoclass member properties, a,b,c
Func.submethod ();//subclass

To allow subclass to read the member properties of the Protoclass, subclass to change:

Copy Code code as follows:

function Subclass ()
{
Protoclass.call (this);
}

other code;

This method can obtain the member attribute of Protoclass and the prototype method.

Copy Code code as follows:

var func = new Subclass ();
Func.amethod ();//protoclass
Func.submethod ();//protoclass

Another method is to use the instantiated Protoclass object as a subclass prototype;

Copy Code code as follows:

var proto = new Protoclass ();

function Subclass () {
}

Subclass.prototype = Object.create (Proto, {
Foo:{value: ' Subclass '}
});

After the subclass is instantiated, you can get all the properties and prototyping methods for Protoclass, and create a read-only Data property foo;

Copy Code code as follows:

var func = new Subclass ();
Func.foo; Subclass
FUNC.A; Protoclass
Func.b (); //
FUNC.C; [Object]
Func.amethod (); Protoclass

4. Another way to create an inheritance is to do the same as the prototype effect of Object.create using instantiated Protoclass:

Copy Code code as follows:

function Subclass () {
This.foo = ' subclass '; But you can read and write here.
}

Subclass.prototype = new Protoclass ();

Object.create related Instructions

Object.create is used to create a new object, which prototype NULL when it is object, and acts as new (). or {} consistent;

The function is the same as the new functionname when it is a function;

Copy Code code as follows:

1 Object
var o = {}
Equal to
var O2 = Object.create ({});
The two constructor the same;

//-----------------------------------------
function func () {
THIS.A = ' func ';
}
Func.prototype.method = function () {
return THIS.A;
}

var newfunc = new Func ();
equal to [effect]
var newfunc2 = object.create (object.prototype/*function.prototype| | function () {}*/, {
A: {value: ' Func ', writable:true},
Method: {value:function () {return THIS.A}}
});

But Newfunc is not the same as NEWFUNC2 's function reference to the object in which they were created.

Newfunc is a function func () {...},newfunc2 is a function function {Native}

Copy Code code as follows:

Object.create (proto[, Propertiesfield]):

Proto indicates that the value is mandatory, can be null, and if not set, throws an exception;

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 indicates the object is an instantiated object through which function;

Propertiesfield is optional, setting the member properties or methods that the newly created object may require;