文章目录
  1. 1. Defined
  2. 2. Main(before ES6)
    1. 2.1. Constructor Pattern
      1. 2.1.1. What is Constructor in object-oriented Language
      2. 2.1.2. Common Formula
    2. 2.2. Prototype Pattern
      1. 2.2.1. Define
      2. 2.2.2. Common Formula
    3. 2.3. Singleton Pattern
  3. 3. Reference

Defined

Write this article as an reference for writing and understanding in the future.

Main(before ES6)

Constructor Pattern

What is Constructor in object-oriented Language

A special method used to initialize a newly created Object once memory has been allocated for it. So as says, this pattern will create new object.

Common Formula

1
2
3
4
5
6
7
8
9
10
/* new variable created from Car is an `Object` */
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;

this.toString = function() {
return this.model + ' has done ' + this.miles + ' miles';
}
}

and there are two drawback:

  • without the help of prototype, toString() function will revoke every time when create new Object which will drag client `slower.
  • function like toString also would be covered by the function definition.

So the enhanced way:

1
2
3
Car.prototype.toString = function() {
return this.model + ' has done ' + this.miles + ' miles';
}

PS: Object.defineProperty() and its plural form also do us a favor.

Expand Reading - Understanding the difference between object.create and new Function()

Prototype Pattern

Define

The prototype pattern does not include any notion of initialization beyond linking an object to a prototype.
And as the author says

Real prototypal inheritance, as defined in the ECMAScript 5 standard, requires the use of Object.create.

Common Formula

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const vehiclePrototype = {
init: function(carModel) {
this.model = carModel;
},
getModel: function() {
return this.model;
}
};
let teslaS1 = Object.create(vehiclePrototype, {
releaseDate: {
value: 'June 29 2010',
configurable: true,
writable: true,
enumerable: true,
}
});
teslaS1.init('Tesla S-1');

console.log('Car model ' + teslaS1.getModel() + ' released on ' + teslaS1.releaseDate);

Expand Reading - Use of ‘prototype’ vs. ‘this’ in JavaScript? - stackoverflow

Singleton Pattern

Core: only one object/variable as named, private with closure(before ES6).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var mySingleton = (function () {

// Instance stores a reference to the Singleton
var instance;

function init() {

// Singleton

// Private methods and variables
function privateMethod(){
console.log( "I am private" );
}

var privateVariable = "Im also private";

var privateRandomNumber = Math.random();

return {

// Public methods and variables
publicMethod: function () {
console.log( "The public can see me!" );
},

publicProperty: "I am also public",

getRandomNumber: function() {
return privateRandomNumber;
}

};

};

return {

// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function () {

if ( !instance ) {
instance = init();
}

return instance;
}

};

})();

Here show the examples for ES6 enviornment.

Reference

Essential-JS-design-pattern | 2017

文章目录
  1. 1. Defined
  2. 2. Main(before ES6)
    1. 2.1. Constructor Pattern
      1. 2.1.1. What is Constructor in object-oriented Language
      2. 2.1.2. Common Formula
    2. 2.2. Prototype Pattern
      1. 2.2.1. Define
      2. 2.2.2. Common Formula
    3. 2.3. Singleton Pattern
  3. 3. Reference