Last active
April 29, 2016 23:42
-
-
Save tintoy/fa6400c6949721490120293941230a03 to your computer and use it in GitHub Desktop.
Quick sketch of JS prototypal inheritance
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A basic prototypal inheritance chain (ignores constructor chaining) | |
// If you ask for property 'a' on an object created from function 'C', it will check if the object has a property 'a'. | |
// If not, it will check if C's prototype (an instance of B) has a property 'a'. | |
// If not, it will check if B's prototype (an instance of A) has a property 'a' (which it will). | |
function A() { } | |
A.prototype.a = 'A' | |
function B(a, b) { } | |
B.prototype = new A(); | |
B.prototype.b = 'B' | |
function C() { } | |
C.prototype = new B(); | |
C.prototype.c = 'C' | |
// Some instances to play with. Note that only the 'd' property is set on each object. | |
var a1 = new A(); | |
a1.d = 'A1'; | |
var b1 = new B(); | |
b1.d = 'B1'; | |
var c1 = new C(); | |
c1.d = 'C1'; | |
console.log("=====a1==========="); | |
console.log("a1.a", a1.a); | |
console.log("a1.b", a1.b); | |
console.log("a1.c", a1.c); | |
console.log("a1.d", a1.d); | |
console.log("=====b1==========="); | |
console.log("b1.a", b1.a); | |
console.log("b1.b", b1.b); | |
console.log("b1.c", b1.c); | |
console.log("b1.d", b1.d); | |
console.log("=====c1==========="); | |
console.log("c1.a", c1.a); | |
console.log("c1.b", c1.b); | |
console.log("c1.c", c1.c); | |
console.log("c1.d", c1.d); | |
// Directly set the 'a' property on c1. This overrides the original (prototype) value from A. | |
console.log("=====c1 override=="); | |
c1.a = 'C1 (overridden)'; | |
console.log("c1.a", c1.a); | |
console.log("c1.b", c1.b); | |
console.log("c1.c", c1.c); | |
console.log("c1.d", c1.d); | |
console.log("=====a1==========="); | |
console.log("a1.a", a1.a); | |
console.log("a1.b", a1.b); | |
console.log("a1.c", a1.c); | |
console.log("a1.d", a1.d); | |
// Unset the 'a' property on c1. This reverts back to the original (prototype) value from A. | |
console.log("=====c1 revert===="); | |
delete c1.a; | |
console.log("c1.a", c1.a); | |
console.log("c1.b", c1.b); | |
console.log("c1.c", c1.c); | |
console.log("c1.d", c1.d); | |
// Show the state of all the objects (note that it only shows directly-declared properties, not inherited ones). | |
console.log("=====Objects======"); | |
console.dir(a1); | |
console.dir(b1); | |
console.dir(c1); | |
console.log("====Prototypes===="); | |
console.dir(A.prototype); | |
console.dir(B.prototype); | |
console.dir(C.prototype); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=====a1=========== | |
a1.a A | |
a1.b undefined | |
a1.c undefined | |
a1.d A1 | |
=====b1=========== | |
b1.a A | |
b1.b B | |
b1.c undefined | |
b1.d B1 | |
=====c1=========== | |
c1.a A | |
c1.b B | |
c1.c C | |
c1.d C1 | |
=====c1 override== | |
c1.a C1 (overridden) | |
c1.b B | |
c1.c C | |
c1.d C1 | |
=====a1=========== | |
a1.a A | |
a1.b undefined | |
a1.c undefined | |
a1.d A1 | |
=====c1 revert==== | |
c1.a A | |
c1.b B | |
c1.c C | |
c1.d C1 | |
=====Objects====== | |
A { d: 'A1' } | |
A { d: 'B1' } | |
A { d: 'C1' } | |
====Prototypes==== | |
A { a: 'A' } | |
A { b: 'B' } | |
A { c: 'C' } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment