edit-article
Home
Up
Delete
Article Name:
Article Description:
by Axel Rauschmayer - [65:00] VIDEO - Axel explains
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">understand the 4 layers of javascript OOP</h1> <h2>[WHAT]</h2> <ol> <li>] <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> - 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&feature=player_embedded" target="_blank">00:00</a>] starts by surveying 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&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&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 </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 - person jane</li> <li>] ?? console demo, enters >"#1" - appears to execute code in script</li> <li><strong>[06:09] WTF</strong></li> <li>] 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&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&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 you want to share data amongst objects</li> <li>] ex jane, ex tarzan, BOTH objects have the same "name" property 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 2 - original code showing the problem</li> <li>] illustration 3 - diagram of prototypal relationship</li> <li>] illustration 4 - 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 = "dunder" - a shortcut for for special property __proto__ - double underscore prototype </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&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 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 == 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 '<strong>new'</strong> operator sets "this" to that particular object </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 </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&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] 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 - function Employee(name,title){</li> <li>] then include in the function body ...</li> <li>1] Person.call(this, name); // adding a person object to the current object by passing it Employee and the name of the Employee passed in the arg</li> <li> </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&feature=player_embedded" target="_blank">http://www.youtube.com/watch?v=VJOTcUsD2kA&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;"> </h1>