SoFunction
Updated on 2025-02-28

Introduction to JavaScript design pattern (and prototype)

Prototype mode description

Note: Use prototype instances to copy and create new customizable objects; create new objects without knowing the specific process of creating the original object;

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

Use relevant code:

Copy the codeThe code is as follows:

function Prototype() {
    = '';
    = '';
    = '';
}

= function() {
return 'Personal information, name: '++', age: '++', gender: '++'<br />';
}

Now two or more personal information content is required:


Copy the codeThe code is as follows:

var proto = new Prototype();
var person1 = (proto);
= 'Xiao Ming';
= 'Male';
= 35;
();
//
var person2 = (proto);
= 'Xiaohua';
= 'female';
= 33;
();

Output returns:


Copy the codeThe code 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;

Instructions for use

1>. Definition: Create an object that specifies a prototype object and can contain optional custom properties;
2> (proto [, properties]); Optional, used to configure properties of new objects;

Copy the codeThe code 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 is:
{
     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, the default is false, and when true, it can be assigned; otherwise it is read-only;
enumerable: enumerable;
configurable: configurable;

It can also include set, get accessor methods;

Among them, [set, get] and value and writable cannot appear at the same time;

1. Create a prototype object class:

Copy the codeThe code is as follows:

function ProtoClass(){
   = 'ProtoClass';
   = {};
   = function() {
   }
}

Creating a prototype method:
Copy the codeThe code is as follows:

= function() {
     //;
     //();
return ;
}

How to use

1. Create an object with ;

Copy the codeThe code is as follows:

var obj1 = (, {
    foo:{value: 'obj1', writable: true}
})

obj1 has the ProtoClass prototype method aMethod method;
Copy the codeThe code is as follows:

();
//The undefined method will be output to be accessible, but the ProtoClass member cannot be accessed.

However, this method cannot be executed under ProtoClass member properties:

2. Use instantiated ProtoClass as the prototype:

Copy the codeThe code is as follows:

var proto = new ProtoClass();

var obj2 = (proto, {
    foo:{value:'obj2'}
});


Obj2 created in this way has all the member attributes of ProtoClass a, b, c and aMethod prototype method; and adds a foo read-only data attribute;
Copy the codeThe code is as follows:

; //ProtoClass
: //[Object]
(); //

(); //ProtoClass
; //obj2

3. Subclass inheritance:

Copy the codeThe code is as follows:

function SubClass() {
   
}
= ( ,{
    foo:{value: 'subclass'}
});

= function() {
     return || ;
}

This method can be inherited from ProtoClass' aMethod method and executed;

Copy the codeThe code is as follows:

var func = new SubClass();
() ;//undefined, cannot read the member attributes of ProtoClass, a, b, c
();//subclass

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

Copy the codeThe code is as follows:

function SubClass()
{
    (this);
}

//Other code;

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

Copy the codeThe code is as follows:

var func = new SubClass();
() ;//ProtoClass
();//ProtoClass

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

Copy the codeThe code is as follows:

var proto = new ProtoClass();

function SubClass() {
}

= (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;

Copy the codeThe code is as follows:

var func = new SubClass();
; //subclass
; //ProtoClass
(); //
; //[Object]
(); //ProtoClass

4. The other method of creating inheritance is the same as using instantiated ProtoClass as a prototype:

Copy the codeThe code is as follows:

function SubClass() {
= 'subclass'; //But this can be read and written
}

= new ProtoClass();

Related Instructions

Used to create a new object. When it is Object, prototype is null, and its effect is consistent with new Object(); or {};

When function, the function is the same as new FunctionName;

Copy the codeThe code is as follows:

//1 Object
var o = {}
//Equivalent to
var o2 = ({});
//The constructor is the same;

//-----------------------------------------
function func() {
    = 'func';
}
= function() {
    return ;
}

var newfunc = new func();
//Equivalent to [the effect is the same]
var newfunc2 = (/*||function(){}*/, {
   a: {value:'func', writable:true},
   method: {value: function() {return ;} }
});

But newfunc and newfunc2 are different in the function references to create their objects.

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

Copy the codeThe code is as follows:

(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;