article

understand the 4 layers of javascript OOP

[WHAT]

1. ] http://programming.oreilly.com/2014/03/the-best-of-axels-the-4-layers-of-javascript-oop-webcast.html - 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.

[WHY]

1. [00:00] starts by surveying the audience of 1500 on their prior knowledge of javascript
1. ] 95% understand OOP
2. ] 78% worked with single objects
3. ] 70% worked with constructors
4. ] 28% worked with prototype chains
2. [02:50] his approach is to learn via a 4 layered approach, each layer builds upon the previos layer
1. ] single object
2. ] prototype chain
3. ] constructor
4. ] constructor inheritance - subcontructor, superconstructor, - derive a subscronstructor from a superconstructor
3. [03:55] LAYER-1 a single object
1. ] objects are the atomic building blocks of js
2. ] objects are key:value maps, map from string to values 
3. ] properties are entries in the map
4. ] methods are entries in the map whose value is a function
1. ] this refers to the reciever of a method call
5. ] illustration 1 - creating object literal - person jane
6. ] ?? console demo, enters >"#1" - appears to execute code in script
7. [06:09] WTF
8. ] VIDEO appears to skip back to the beginning, Fast Forward to 12:18 to pickup ...
9. [12:18] contd
10. ] demos examples of accessing objects properties and methods using dot.notation in the console
11. *] js advantage - can create objects directly(literals) where other languages can not, and introduce abstractions later
4. [14:55] LAYER-2 prototype chains
1. ] the problem that your trying to solve is that you want to share data amongst objects
2. ] ex jane, ex tarzan, BOTH objects have the same "name" property and "describe" function
3. ] while the value of name is unique to each object, the value of the describe function is identical and therefore redundant
4. ] create and share a single "describe" function by ] "defining a prototype" and then ] assigning that prototype to each of our objects
1. ] illustration 2 - original code showing the problem
2. ] illustration 3 - diagram of prototypal relationship
3. ] illustration 4 - new code -using prototypal inheritance
5. ] demonstrates example of accessing properties/methods of jane this time jane is using prototype
6. *] term  = "dunder"  - a shortcut for for special property __proto__ - double underscore prototype  
7. *] 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
8. *] ES5 compliant - USE Object.create()
1. ] var jane = Object.create(PersonProto); jane.name = "Jane";
9. ] USE Object getPrototypeOf() method to TEST/READ what type of object and object is
1. ] Object.getPrototypeOf(jane) === PersonProto // returns true
5. [22:05] LAYER-3 constructors
1. [illustration 5] going back to defining Jane and Tarzan
2. ] 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
3. ] we need to remove the redundancy of having the "describe()' method in both objects
4. ] Person.prototype  == var Person =
5. *] Object.keys('objectname') // displays the properties and methods in an object
6. *] console.log( jane instanceOf Person ) // TEST if an objects is an instanceOf a particular type
7. * ] using the 'new' operator sets "this" to that particular object 
8. [25:30] [illustration 6]getting rid of redundant methods/properties using the prototype property
9. x] defining the "describe" method as part of the 'person' prototype
10. x] creating each of the people as new Person objects 
11. x] demos using this
12. *] Object.getPrototypeOf(jane) // returns [describe]
13. [29:00] 'overloaded' terminology in js language - we have 2 'prototypes'
14. 1] prototype relationship between objects
15. 2] prototype property of constructors (the prototype of all instances)
16. *] for disambiguation CALL propotype 2 - 'the instance prototype'
17. x] illus-7 instanceOf explained, example
6. [32:00] LAYER-4 - constructor inheritance
1. *] heres where things advance and start to get a little more complicated
2. x] b/c of js flexiblity you will not typically use inheritance as much as you would with other languages
3. ] 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.
4. ] define - function Employee(name,title){
5. ] then include in the function body ...
6. 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
7.  

[WHERE]

1. ]

[WHEN]

1. ] 2014-04-05

[EXAMPLE]

1. ] http://www.youtube.com/watch?v=VJOTcUsD2kA&feature=player_embedded

[HOW-TO]

1. ]

[REFERENCE]

1. ] Alex's Website - http://www.2ality.com/2014/02/time-values.html

 

Details

ID: 2741

NAME: 008-understand-the-4-layers-of-javascript-OOP

DESCRIPTION: by Axel Rauschmayer - [65:00] VIDEO - Axel explains

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: 0

OWNER ID: 75

photos

actions

Email Email-Owner SMS and