JavaScript Flashcards
Learning core concepts
What ultimately dictates the binding for ‘this’?
Call time of the function containing this always dictates the binding for this.
What are some dangers to consider when working with parameter bindings?
Losing parameter bindings is a risk since any function that takes a callback function may call your function differently than you expected, and bind values you weren’t intending, or no values at all.
How to determine what the ‘this’ keyword refers to?
1.) Scan outward from the keyword this looking for the closest enclosing braces that represent a function body. Note: Ignore braces that don’t represent function bodies like braces for object literals and if blocks.
2.) Having found the function definition, look for where the function is called. In the debugger, you can find that place by looking one step down in the call stack.
3.) Inspect syntax of how the function is being called.
There are only five patterns. Each pattern is associated with a specific rule, which the interpreter uses to determine what this gets bound to inside that function for that one invocation. Once you know which invocation pattern is used, you can predict what the interpreter will bind to this.
Where in the debugger can you look to see where a function is called?
Look in the call stack section
What are the binding patterns for ‘this’?
Global reference, free function invocation, .call/.apply invocation, construction mode, method invocation. 90 % of the time, you’ll only use the method invocation rule.
What is the method invocation rule you will use ~90% of the time in predicting what ‘this’ gets bound to?
“In a function, this is bound to the object to the left of the dot where that function was called.”
When would you want to use a decorator function?
You’d use a decorator to add some functionality to an object that had some other functionality in it already.
What is pseudoclassical code?
Like its sister, prototypical code, pseudoclassical strives to resemble the class systems of other languages by adding a thin layer of syntactic conveniences.
Do object relationships change when refactoring prototypical code in the pseudo-classical style?
No because the psuedoclassical pattern is just a thin layer of syntactic convenience on top of the prototypal pattern.
How are properties stores in a pseudoclassical pattern?
Similarities in instances of a class are stored as properties ona prototype allowing for class like patterns found in other languages.
Where would you code how an instance should be different from all others?
Within the functional scope of the constructor function we define how instances will differ from one another.
What type of class patterns does JS support
Prototypical, psuedoclassical, and functional classes are all supported
What is a drawback of the functional style of programming?
A big drawback in a functional class below is the creation of a new method for every instance of the function. In exchange for this drawback, however, we get the advantage of having a class that is extremely easy to read and explain and since code clarity is extremely valuable, I recommend using the functional pattern for most classes, provided you won't be creating thousands of instances of that construction which becomes a performance issue. =>
var Car = function(loc) {
var obj = {loc: loc};
obj.move = function() { this.loc++ };
return obj;
}What is a drawback of the pseudoclassical pattern?
There is quite a bit of complexity under the hood. Upside is that JS interperters out there have written massive performance enhancements that target this pattern making it worthwhile to consider. In most cases though, the classes you write won’t be instantiated enough times to take advantage of the speed improvements, so it’s often wise to write in the pattern that willl be simplest to read and understand.
What is a good way to think of JavaScript classes?
Any construct that is capable of producing a fleet of similar instances conforming to some interface.
Describe a functional class pattern with shared methods
var Car = function(location) {
var obj = {loc: loc};
extend(obj, Car.methods);
return obj;
};
Car.methods = {
move: function() { function() { this.loc++; }
}What are prototype chains for?
They are a mechanism for making objects that resemble other objects. You might decide to copy all the properties over from one object to another. As an alternative, JS provides the option of prototype chains. This makes one object behave as if it has all the same properties of another object, by delegating it’s failed property lookups to that other object at lookup time.
What happens when you ask for a property an object doesn’t have?
The lookup “falls through” up the chain up to the porotype object. Note tahat similarity is achieved at the very moment of lookup.
