Skip to content

Commit 67ca969

Browse files
chuanxshichuanxshi
committed
added items to code reuse patterns
1 parent 60cb81c commit 67ca969

10 files changed

+517
-1
lines changed

‎code-reuse-patterns/borrowing-methods.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Borrowing Methods
10+
Description: generally a pattern that should be avoided unless one is more comfortable with class than prototype
11+
*/
12+
13+
function f() {
14+
var args = [].slice.call(arguments, 1, 3);
15+
return args;
16+
}
17+
18+
var one = {
19+
name: 'object',
20+
say: function (greet) {
21+
return greet + ', ' + this.name;
22+
}
23+
};
24+
25+
// test
26+
console.log(one.say('hi')); // "hi, object"
27+
28+
var two = {
29+
name: 'another object'
30+
};
31+
32+
console.log(one.say.apply(two, ['hello'])); // "hello, another object"
33+
34+
// assigning to a variable
35+
// `this` will point to the global object
36+
var say = one.say;
37+
console.log(say('hoho')); // "hoho, undefined"
38+
39+
// passing as a callback
40+
var yetanother = {
41+
name: "Yet another object",
42+
method: function (callback) {
43+
return callback('Hola');
44+
}
45+
};
46+
console.log(yetanother.method(one.say)); // "Holla, undefined"
47+
48+
function bind(o, m) {
49+
return function () {
50+
return m.apply(o, [].slice.call(arguments));
51+
};
52+
}
53+
54+
var twosay = bind(two, one.say);
55+
console.log(twosay('yo')); // "yo, another object"
56+
57+
58+
if (typeof Function.prototype.bind === 'undefined') {
59+
Function.prototype.bind = function (thisArg) {
60+
var fn = this,
61+
slice = Array.prototype.slice,
62+
args = slice.call(arguments, 1);
63+
return function () {
64+
return fn.apply(thisArg, args.concat(slice.call(arguments)));
65+
};
66+
};
67+
}
68+
69+
var twosay2 = one.say.bind(two);
70+
console.log(twosay2('Bonjour')); // "Bonjour, another object"
71+
72+
var twosay3 = one.say.bind(two, 'Enchanté');
73+
console.log(twosay3()); // "Enchanté, another object"
74+
</script>
75+
</body>
76+
</html>

‎code-reuse-patterns/cp1-default.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Classical Pattern #1 - The Default Pattern (a pattern that should be generally avoided)
10+
Description: create an object using the Parent() constructor and assign this object to the Child()'s prototype
11+
*/
12+
13+
function inherit(C, P) {
14+
C.prototype = new P();
15+
}
16+
17+
// the parent constructor
18+
function Parent(name) {
19+
this.name = name || 'Adam';
20+
}
21+
// adding functionality to the prototype
22+
Parent.prototype.say = function () {
23+
return this.name;
24+
};
25+
// empty child constructor
26+
function Child(name) {}
27+
28+
// inheritance magic happens here
29+
inherit(Child, Parent);
30+
31+
var kid = new Child();
32+
console.log(kid.say()); // "Adam"
33+
34+
// Drawback 1: own properties added to `this` is inherited
35+
var kiddo = new Child();
36+
kiddo.name = "Patrick";
37+
console.log(kiddo.say()); // "Patrick"
38+
39+
40+
// Drawback 2: it doesn't enable you to pass parameters to the child constructor
41+
var s = new Child('Seth');
42+
console.log(s.say()); // "Adam"
43+
</script>
44+
</body>
45+
</html>

‎code-reuse-patterns/cp2-rent-a-constructor.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Classical Pattern #2 - Rent a Constructor (a pattern that should be generally avoided)
10+
Description: it borrows the parent constructor, passing the child object to be bound to this and also forwarding any arguments
11+
*/
12+
13+
// the parent constructor
14+
function Parent(name) {
15+
this.name = name || 'Adam';
16+
}
17+
18+
// adding functionality to the prototype
19+
Parent.prototype.say = function () {
20+
return this.name;
21+
};
22+
23+
// child constructor
24+
function Child(name) {
25+
Parent.apply(this, arguments);
26+
}
27+
28+
var kid = new Child("Patrick");
29+
console.log(kid.name); // "Patrick"
30+
31+
// Drawback 1: nothing from the prototype gets inherited
32+
console.log(typeof kid.say); // "undefined"
33+
34+
// Multiple Inheritance by Borrowing Constructors
35+
function Cat() {
36+
this.legs = 4;
37+
this.say = function () {
38+
return "meaowww";
39+
}
40+
}
41+
42+
function Bird() {
43+
this.wings = 2;
44+
this.fly = true;
45+
}
46+
47+
function CatWings() {
48+
Cat.apply(this);
49+
Bird.apply(this);
50+
}
51+
52+
var jane = new CatWings();
53+
console.dir(jane);
54+
</script>
55+
</body>
56+
</html>

‎code-reuse-patterns/cp3-rent-and-set-prototype.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Classical Pattern #3 - Rent and Set Prototype (a pattern that should be generally avoided)
10+
Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11+
*/
12+
13+
// the parent constructor
14+
function Parent(name) {
15+
this.name = name || 'Adam';
16+
}
17+
18+
// adding functionality to the prototype
19+
Parent.prototype.say = function () {
20+
return this.name;
21+
};
22+
23+
// child constructor
24+
function Child(name) {
25+
Parent.apply(this, arguments);
26+
}
27+
28+
Child.prototype = new Parent();
29+
30+
var kid = new Child("Patrick");
31+
console.log(kid.name); // "Patrick"
32+
console.log(typeof kid.say); // function
33+
console.log(kid.say()); // Patrick
34+
console.dir(kid);
35+
delete kid.name;
36+
console.log(kid.say()); // "Adam"
37+
38+
// Drawback - the parent constructor is called twice, so it could be inefficient
39+
</script>
40+
</body>
41+
</html>

‎code-reuse-patterns/cp4-share-the-prototype.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Classical Pattern #3 - Share the Prototype (a pattern that should be generally avoided)
10+
Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11+
*/
12+
13+
function inherit(C, P) {
14+
C.prototype = P.prototype;
15+
}
16+
17+
// the parent constructor
18+
function Parent(name) {
19+
this.name = name || 'Adam';
20+
}
21+
22+
// adding functionality to the prototype
23+
Parent.prototype.say = function () {
24+
return this.name;
25+
};
26+
27+
// child constructor
28+
function Child(name) {}
29+
30+
inherit(Child, Parent);
31+
32+
var kid = new Child('Patrick');
33+
console.log(kid.name); // undefined
34+
console.log(typeof kid.say); // function
35+
kid.name = 'Patrick';
36+
console.log(kid.say()); // Patrick
37+
console.dir(kid);
38+
</script>
39+
</body>
40+
</html>

‎code-reuse-patterns/cp5-a-temporary-constructor.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Classical Pattern #5 - A Temporary Constructor (a pattern that should be generally avoided)
10+
Description: first borrow the constructor and then also set the child's prototype to point to a new instance of the constructor
11+
*/
12+
13+
/* Basic */
14+
/*function inherit(C, P) {
15+
var F = function () {};
16+
F.prototype = P.prototype;
17+
C.prototype = new F();
18+
}*/
19+
20+
/* Storing the Superclass */
21+
/*function inherit(C, P) {
22+
var F = function () {};
23+
F.prototype = P.prototype;
24+
C.prototype = new F();
25+
C.uber = P.prototype;
26+
}*/
27+
28+
/* Resetting the Constructor Pointer */
29+
/*function inherit(C, P) {
30+
var F = function () {};
31+
F.prototype = P.prototype;
32+
C.prototype = new F();
33+
C.uber = P.prototype;
34+
C.prototype.constructor = C;
35+
}*/
36+
37+
/* in closure */
38+
var inherit = (function () {
39+
var F = function () {};
40+
return function (C, P) {
41+
F.prototype = P.prototype;
42+
C.prototype = new F();
43+
C.uber = P.prototype;
44+
C.prototype.constructor = C;
45+
}
46+
}());
47+
48+
function Parent(name) {
49+
this.name = name || 'Adam';
50+
}
51+
52+
// adding functionality to the prototype
53+
Parent.prototype.say = function () {
54+
return this.name;
55+
};
56+
57+
// child constructor
58+
function Child(name) {}
59+
60+
inherit(Child, Parent);
61+
62+
var kid = new Child();
63+
console.log(kid.name); // undefined
64+
console.log(typeof kid.say); // function
65+
kid.name = 'Patrick';
66+
console.log(kid.say()); // Patrick
67+
console.log(kid.constructor.name); // Child
68+
console.log(kid.constructor === Parent); // false
69+
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)