(public).sospep.subjects ~ view article ~ 008-understand-the-4-layers-of-javascript-OOP

<h1 style="text-align: center;">understand the 4 layers of javascript OOP</h1>
<h2>[WHAT]</h2>
<ol>
<li>]&nbsp;<a href="http://programming.oreilly.com/2014/03/the-best-of-axels-the-4-layers-of-javascript-oop-webcast.html" target="_blank">http://programming.oreilly.com/2014/03/the-best-of-axels-the-4-layers-of-javascript-oop-webcast.html</a>&nbsp;-&nbsp;Axels approach to teaching JavaScript OOP is doing so incrementally, through layers. Each of the four layers builds upon the last. The lesson runs just under an hour.</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded" target="_blank">00:00</a>]&nbsp;starts by surveying&nbsp;the audience of 1500 on their prior knowledge of javascript</strong></li>
<ol>
<li>] 95% understand OOP</li>
<li>] 78% worked with single objects</li>
<li>] 70% worked with constructors</li>
<li>] 28% worked with prototype chains</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=170" target="_blank">02:50</a>] his approach is to learn via a 4 layered approach, each layer builds upon the previos layer</strong></li>
<ol>
<li>] single object</li>
<li>] prototype chain</li>
<li>] constructor</li>
<li>] constructor inheritance - subcontructor, superconstructor, - derive a subscronstructor from a superconstructor</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=235" target="_blank">03:55</a>] LAYER-1 a single object</strong></li>
<ol>
<li>] objects are the atomic building blocks of js</li>
<li>] objects are key:value maps, map from string to values&nbsp;</li>
<li>] properties are entries in the map</li>
<li>] methods are entries in the map whose value is a function</li>
<ol>
<li>] this refers to the reciever of a method call</li>
</ol>
<li>] illustration 1 - creating object literal -&nbsp;person jane</li>
<li>] ?? console demo, enters &gt;"#1" - appears to execute code in script</li>
<li><strong>[06:09] WTF</strong></li>
<li>]&nbsp;VIDEO appears to skip back to the beginning, Fast Forward to 12:18 to pickup ...</li>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=738" target="_blank">12:18</a>] contd</strong></li>
<li>] demos examples of accessing objects properties and methods using dot.notation in the console</li>
<li>*] js advantage - <strong>can create objects directly</strong>(literals) where other languages can not, and <strong>introduce abstractions</strong> later</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=895" target="_blank">14:55</a>] LAYER-2 prototype chains</strong></li>
<ol>
<li>] the problem that your trying to solve is that&nbsp;you want to share data amongst objects</li>
<li>] ex jane, ex tarzan, BOTH objects have the same "name" property&nbsp;and "describe" function</li>
<li>] while the value of name is unique to each object, the value of the describe function is identical and therefore redundant</li>
<li>] create and share a single "describe" function by ] "defining a prototype" and then ] assigning that prototype to each of our objects</li>
<ol>
<li>] illustration&nbsp;2 - original code showing the problem</li>
<li>] illustration 3 - diagram of prototypal relationship</li>
<li>] illustration 4 -&nbsp;new code -using prototypal inheritance</li>
</ol>
<li>] demonstrates example of accessing properties/methods of jane this time jane is using prototype</li>
<li>*] term&nbsp; = "dunder"&nbsp; - a shortcut for&nbsp;for special property __proto__ - double underscore prototype&nbsp;&nbsp;</li>
<li>*] dunder property - IS NOT YET A STANDARD, many browsers support it but if you want to be compliant with ES5, you need to use a different mechanism</li>
<li><strong>*] ES5 compliant - USE Object.create()</strong></li>
<ol>
<li>] var jane = Object.create(PersonProto); jane.name = "Jane";</li>
</ol>
<li>] USE Object getPrototypeOf() method to TEST/READ what type of object and object is</li>
<ol>
<li>] Object.getPrototypeOf(jane) === PersonProto // returns true</li>
</ol></ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=1325" target="_blank">22:05</a>] LAYER-3 constructors </strong></li>
<ol>
<li>[illustration 5] going back to defining Jane and Tarzan</li>
<li>] now we are creating using a "Person" constructor&nbsp;function, we will now be able to pass in the name of the person when we create a Person instance</li>
<li>] we need to remove the redundancy of having the "describe()' method in both objects</li>
<li>] Person.prototype&nbsp; == var Person =</li>
<li>*] Object.keys('objectname') // displays the properties and methods in an object</li>
<li>*] console.log( jane <strong>instanceOf</strong> Person ) // TEST if an objects is an instanceOf a particular type</li>
<li>* ] using the&nbsp;'<strong>new'</strong> operator sets "this" to that particular&nbsp;object&nbsp;</li>
<li><span style="background-color: #888888;">[25:30] [illustration 6]getting rid of redundant methods/properties using the prototype property</span></li>
<li>x] defining the "describe" method as part of the 'person' prototype</li>
<li>x] creating each of the people as new Person objects&nbsp;</li>
<li>x] demos using this</li>
<li>*] Object.getPrototypeOf(jane) // returns [describe]</li>
<li><span style="background-color: #888888;">[29:00] 'overloaded' terminology in js language - we have 2 'prototypes'</span></li>
<li>1] prototype relationship between objects</li>
<li>2] prototype property of constructors (the prototype of all instances)</li>
<li>*] for disambiguation CALL propotype 2 - 'the instance prototype'</li>
<li>x] illus-7 instanceOf explained, example</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded#t=1920">32:00</a>] LAYER-4 - constructor inheritance</strong></li>
<ol>
<li>*] heres where things advance and start to get a little more complicated</li>
<li>x]&nbsp;b/c of js flexiblity you will not typically use inheritance as much as you would with other languages</li>
<li>] EX = derive an "employee" from our Person prototype where "Employee" has the additional properties of "title" and a revised(overridden) method of "describe" which includes the employees title.</li>
<li>] define -&nbsp;function Employee(name,title){</li>
<li>] then include in the function body ...</li>
<li>1] Person.call(this, name); //&nbsp;adding a person object to the current&nbsp;object by passing it Employee and the name&nbsp;of the&nbsp;Employee passed in the arg</li>
<li>&nbsp;</li>
</ol></ol>
<h2>[WHERE]</h2>
<ol>
<li>]</li>
</ol>
<h2>[WHEN]</h2>
<ol>
<li>] 2014-04-05</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li>] <a href="http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded" target="_blank">http://www.youtube.com/watch?v=VJOTcUsD2kA&amp;feature=player_embedded</a></li>
</ol>
<h2>[HOW-TO]</h2>
<ol>
<li>]</li>
</ol>
<h2>[REFERENCE]</h2>
<ol>
<li>] Alex's Website - http://www.2ality.com/2014/02/time-values.html</li>
</ol>
<h1 style="text-align: center;">&nbsp;</h1>

~ view article ~ Chapter] ch-003-feature-OOP-in-js FROM [ Book] language-javascript IN [ libraries] technology-developer-www