Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 152 lines (126 sloc) 3.744 kb
d458abc Shi Chuan started code an resue patterns
authored
1 <!doctype html>
2 <html lang="en">
f1b4f9a Proper indentation using tabs (both HTML and JS)
Lars Kappert authored
3 <head>
4 <title>JavaScript Patterns</title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8 <script>
9 /* Title: Klass (a pattern that should be generally avoided)
10 Description: generally a pattern that should be avoided unless one is more comfortable with class than prototype
11 */
12
13 // Drawback: it brings the whole confusing notion of classes, which don’t technically exist in the language
14
15 // Benefit: you can tweak the syntax and the conventions to resemble another of your favorite languages
16
17 var klass = function (Parent, props) {
18
19 var Child, F, i;
20
21 // 1.
22 // new constructor
23 Child = function () {
24 if (Child.uber && Child.uber.hasOwnProperty("__construct")) {
25 Child.uber.__construct.apply(this, arguments);
26 }
27 if (Child.prototype.hasOwnProperty("__construct")) {
28 Child.prototype.__construct.apply(this, arguments);
29 }
30 };
31
32 // 2.
33 // inherit
34 Parent = Parent || Object;
35 F = function () {
36 };
37 F.prototype = Parent.prototype;
38 Child.prototype = new F();
39 Child.uber = Parent.prototype;
40 Child.prototype.constructor = Child;
41
42 // 3.
43 // add implementation methods
44 for (i in props) {
45 if (props.hasOwnProperty(i)) {
46 Child.prototype[i] = props[i];
47 }
48 }
49
50 // return the "class"
51 return Child;
52 };
53
54 var Man = klass(null, {
55 __construct:function (what) {
56 console.log("Man's constructor");
57 this.name = what;
58 },
59 getName:function () {
60 return this.name;
61 }
62 });
63
64 var first = new Man('Adam'); // logs "Man's constructor"
65 first.getName(); // "Adam"
66
67 var SuperMan = klass(Man, {
68 __construct:function (what) {
69 console.log("SuperMan's constructor");
70 },
71 getName:function () {
72 var name = SuperMan.uber.getName.call(this);
73 return "I am " + name;
74 }
75 });
76
77 var clark = new SuperMan('Clark Kent');
78 clark.getName(); // "I am Clark Kent"
79
80 console.log(clark instanceof Man); // true
81 console.log(clark instanceof SuperMan); // true
53f84b8 Grom-S removed html tags from js code (typo)
Grom-S authored
82
f1b4f9a Proper indentation using tabs (both HTML and JS)
Lars Kappert authored
83 /* Title: Classical Pattern #5 - A Temporary Constructor (a pattern that should be generally avoided)
84 Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
85 */
86
87 /* Basic */
88 /*function inherit(C, P) {
89 var F = function () {};
90 F.prototype = P.prototype;
91 C.prototype = new F();
92 }*/
93
94 /* Storing the Superclass */
95 /*function inherit(C, P) {
96 var F = function () {};
97 F.prototype = P.prototype;
98 C.prototype = new F();
99 C.uber = P.prototype;
100 }*/
101
102 /* Resetting the Constructor Pointer */
103 /*function inherit(C, P) {
104 var F = function () {};
105 F.prototype = P.prototype;
106 C.prototype = new F();
107 C.uber = P.prototype;
108 C.prototype.constructor = C;
109 }*/
110
111 /* in closure */
112 var inherit = (function () {
113 var F = function () {
114 };
115 return function (C, P) {
116 F.prototype = P.prototype;
117 C.prototype = new F();
118 C.uber = P.prototype;
119 C.prototype.constructor = C;
120 }
121 }());
122
123 function Parent(name) {
124 this.name = name || 'Adam';
125 }
126
127 // adding functionality to the prototype
128 Parent.prototype.say = function () {
129 return this.name;
130 };
131
132 // child constructor
133 function Child(name) {
134 }
135
136 inherit(Child, Parent);
137
138 var kid = new Child();
139 console.log(kid.name); // undefined
140 console.log(typeof kid.say); // function
141 kid.name = 'Patrick';
142 console.log(kid.say()); // Patrick
143 console.log(kid.constructor.name); // Child
144 console.log(kid.constructor === Parent); // false
145
146
147 // reference
148 // http://shop.oreilly.com/product/9780596806767.do
149 </script>
150 </body>
fa1caed Shi Chuan added documentation and reference to code reuse patterns
authored
151 </html>
Something went wrong with that request. Please try again.