edit-article
Home
Up
Delete
Article Name:
Article Description:
whats NEW ...] a talk by Alex Russell @ Google i/o 2011
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">REVIEW - learning to love javascript</h1> <p style="text-align: center;"> </p> <ol> <li><strong>] about this<strong>[63:26]</strong> video presentation by Alex Russell</strong></li> <ol> <li>] given by <a href="person?id=190" target="_blank">Alex Russell</a>, Alex works @google chrome team, & represents google @ tc39, standards committee for js</li> </ol> <li><strong>] contents presentation - learning to love javascript(js) - </strong></li> <ol> <li>] where are we now</li> <li>] how to get a different future for js</li> <li>] how these things relate to one another</li> </ol> <li><strong>] js is a functional, dynamic language</strong></li> <ol> <li>] supports closures, like schema, </li> </ol> <li><strong>] js history </strong></li> <ol> <li>] 1995 netscape 2 - mocha / livescript</li> <li>] 1996 </li> <li>] 1997 js standard</li> <li>] 1999 ecmascript v3 - pretty much the same version that we use today,</li> <li>] js has gone everywhere, every browser</li> <li>] competing on performance </li> <li>] todays runtimes and performance are vastly different than in the past, even the recent past </li> <li>] the web is the platform</li> </ol> <li><strong>] js is misunderstood</strong></li> <ol> <li>] no type system, no type testing (unless you add it in)</li> <li>] there are 'types' ( number, object, array, )</li> <li>] js runs top to bottom - no thread system no way to branch off, browsers have implemented WA with Browser setTimeOut, setInterval() but its not a language feature ] interpreter and runtime both read it and interpret it in the same way, top to bottom</li> <li>] everything is an object</li> </ol> <li><strong>] almost everything is 'muteable' </strong></li> <ol> <li>] we can change our objects</li> <li>] there are some exemptions, very small, narrow, but can be powerful</li> </ol> <li><strong>] closure </strong></li> <ol> <li>] the way to do private variables ( data hiding) in js</li> <li>] js inverts the relationship between 'classes' and 'functions</li> <li>] FUNCTIONAL OOP = behaviour that carries data VS </li> <li>] CLASSICAL OOP = data that carries behaviour</li> <li>12:00] privates, - encloses its lexical scope, holds on vars, way of passing var around, </li> <li>] </li> <li>] first class functions - participants in the Obj model system, participants in the storage system</li> <li><span style="background-color: #ffff99;">] fundamental concept that underpins a lot of the patterns we build upon</span></li> <li>] work together with other 'functonal' ideas -</li> <li>]<strong><span style="font-weight: normal;"> ex ARRAY prototype - has ] filter,]map,]reduce, ] foreach methods </span></strong></li> <li><strong><span style="font-weight: normal;">] so </span></strong>instead of external iterator you have an internal iterator - </li> <li><span style="background-color: #ffff99;">] creating a stack of stuff you would like to do (in terms of behaviour) instead of ...</span></li> <li>] passing the same data structures around and around </li> <li>] pass in arguements to functions, </li> <li>] <span style="background-color: #ffff99;">express your programs intent in the form of nested functions that are going to unwind to some result ...</span></li> <li>] NOT linear functions that is going to have the same data structures passed into them over and over again ..</li> </ol> <li><strong>] defining a functional language</strong></li> <ol> <li>] see below </li> </ol> <li><strong>] the only way to create a 'scope' is to invoke a function</strong></li> <ol> <li>] defining </li> <li>] scopes are really smart, they hold onto the variables that have been defined above them</li> <li>] </li> <li>] tradittional lang constructs - for, while, switch, ... - dont create scopes</li> <li>] behaviour that has hidden storage to pass data around, maintain state</li> <li>]</li> </ol> <li><strong>] prototypes</strong></li> <ol> <li>] 1 link chain delegation to root object</li> </ol> <li><strong>] first class Functions</strong></li> <ol> <li>] behaviour that carries data VERSUS data that carries behaviour (tradditional OOP programming)</li> </ol> <li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&v=seX7jYI96GE#t=900" target="_blank">15:00</a>] everything being an object</strong></li> <ol> <li>]</li> </ol> <li><strong>[] all objects act like a map</strong></li> <ol> <li>] so if you want a map, take an object</li> <li>] arrays do the same thing</li> <li>] NOT a linear bag of memory, you access with an index, like in many other languages</li> <li>] arrays are just objects</li> <li>] length property is the only magical part about it - affects visibility of property's</li> </ol> <li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&v=seX7jYI96GE#t=1050" target="_blank">17:30</a>] not many core concepts, if you understand them, you will understand js</strong></li> <ol> <li><strong>/ muteable objects</strong> - properties of an object can be added or removed at run time</li> <li><strong>/ closures</strong> - behaviour that carries data </li> <li><strong>/ everything being an object -</strong> </li> <li><strong>/ objects act like maps -</strong> </li> </ol> <li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&v=seX7jYI96GE#t=1140" target="_blank">19:00</a>] closures - the other side of classes </strong></li> <ol> <li>classes are state with behaviour - example </li> <li>closures are functions with state - example</li> <li>- you dont create classes that are "state with behaviour", you create "behavioiur" that holds on to the state that it needs, you pass that behaviour around</li> </ol> <li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&v=seX7jYI96GE#t=1342" target="_blank">22:22</a>] prototypal inheritance </strong></li> <ol> <li>] example (es5) Object.Create() </li> <li>] will look at the object that you create ...</li> <li><strong><em>] incredibly powerful -</em></strong> you can create brand new 'behaviour' at runtime, compose things on the next line that didnt exist before</li> <li>] can change the behaviour of other objects in the system based on what they are delegating to ..</li> </ol> <li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&v=seX7jYI96GE#t=1560" target="_blank">26:00</a>] understanding 'this.' is really important!</strong></li> <ol> <li>x]- because you dont have classes that wire up the inheiritance heirarchy, </li> <li>] because were always delegating at run time, </li> <ol> <li>] every "." operator, does the dynamic lookup on the local object , example this.name</li> <li>] looks at its delegate, which looks at its delegate, ...</li> </ol> <li><span style="background-color: #ffff99;">] this === "whatever "scope i'm" in, execute the "next lookup" against the "local" object"</span></li> <li>] the this keyword in any function isnt pointing at some fixed object , ADD CODE EXAMPLE # </li> <li>] it is "permiscous", it points at whatever object my function is being called through, call their own data</li> <li>] nice little syntactic out, whenever i lookup a property, which happens to be a function, and i call it, </li> <ol> <li>the dot operator, for method calls says, </li> <li>dont just return it, evaluate it directly, </li> <li>use the .call property of the function thats returned and call it within the scope of </li> </ol> <li>] in order to 'wire it up' </li> <li>- use the .call property of the function object thats returned and call it in the scope of the object thats on the lh side , see CODE EXAMPLE #</li> <li>- i know its a little bit may tricky -</li> <li>- in order to wire this behaviour up correctly so that it sort of does what you expect in other languages </li> <li>- we rely on the function being first class</li> <li>- i can "call" "any function" in the scope of "any other object" assign and call it through the object</li> <li>- use the this keyw</li> <li>-ability to create </li> </ol> <li><strong>[28:10] we can recreate things like 'classes' </strong></li> <ol> <li>] mix ins for instance level composition</li> </ol> <li><strong>[31:50] extending the native js objects </strong></li> <ol> <li>] mutability + prototypes - extend the stuff that is deffered to in the system</li> </ol> <li>[] </li> </ol> <div><hr /></div> <div><ol> <li><strong>what makes something a functional programming language?</strong></li> <ol> <li>] can it have 'side effects'?</li> <li>] does it support 'macro languages' or hygenic macros</li> <li>] </li> <li>instead of p</li> <li>] </li> </ol> <li>] it has closures, first class functions </li> <ol> <li>] </li> </ol></ol></div> <div> <div>ex CODE == </div> <div>obj.method() === obj["method"].call(obj);</div> </div> <div> <div><strong>Function</strong></div> <div>- PROPS arity, caller, constructor, length, name </div> <div>- METHS apply, bind, call, isGenerator, toSource, toString</div> <div>[call ]</div> <div>- method of the function object, </div> <div>[apply ]</div> <div>- method of the function object, applies to arrary</div> <div>this</div> <div><strong>EXAMPLE - 1 - this js</strong></div> <div>var person = new Person("john","doe");</div> <div>console.log(this.first, this.last); </div> <div>// returns john doe</div> <div><strong>EXAMPLE - 2 - this jquery </strong></div> <div>button.click</div> <div>this refers to button </div> <div><strong>EXAMPLE - 3 </strong></div> <div>this is not assigned a value until an object invokes the function where this is defined. Let’s call the function where this is defined the “this Function.”</div> <div> Even though it appears this refers to the object where it is defined, it is not until an object invokes the this Function that this is actually assigned a value. And the value it is assigned is based exclusively on the object that invokes the this Function. </div> <div>this has the value of the invoking object in most circumstances. </div> <div>EXAMPLE The use of this in the global scope</div> <div> </div> <div>window.showFullName()</div> <div>VS</div> <div>person.showFullName()</div> <div>] When this is most misunderstood and becomes tricky</div> <div>The this keyword is most misunderstood when ] we borrow a method that uses this, ] when we assign a method that uses this to a variable, ] when a function that uses this is passed as a callback function, and ] when this is used inside a closure—an inner function. We will look at each scenario and the solutions for maintaining the proper value of this in each example.</div> </div>