Prototypal Inheritance and you.

Let’s first start by saying that Javascript is a little interesting when it comes to classes and objects. Technically I think Javascript is basically classless (probably why I like it so much…) but there are class-like activities. Just remember at its root, an Object is a just a unordered collection of key:value pairs. Anything other than strings, numbers, booleans, undefined and null is an object.

Let’s create some objects.

var anObject = {};
anotherObject = new Object();

-or-

function MyObject() {}
var myObject = new MyObject();

 

Now where does Prototypal Inheritance enter into this? Each object has an internal link to another object, known as its prototype.  This other object also has a prototype, and so on until we reach null as its prototype.null ending the chain.

Objects are buckets of properties with links to a prototype object. When access to a property is requested it will look not only at the specific objects property but all the way back up the prototype chain until the property is found or the end of the chain.

Let’s add some methods to the objects.

function MyObject() {}

var myObject = new MyObject();

MyObject.simpleLog = function(value) {
    console.log(value);
}

var difObject = new MyObject();

difObject.simpleLog = function(value){
    console.log('The value is: ', value);
}

difObject.simpleLog("something should go here"); //calls the instance specific method
MyObject.simpleLog("something should go here"); //calls the static Object method
MyObject.prototype.simpleLog = MyObject.simpleLog; //apply the static method to all instances from here on in
difObject.simpleLog("still calling instance method");  //still calls the instance method
var yetAnotherObject = new MyObject();
yetAnotherObject.simpleLog("inherited from MyObject"); //inherited simpleLog() from MyObject
MyObject.simpleLog("I also inherit."); //pre-existing instances also inherit the new function

 

So as you can see when you add a method to the prototype it gets inherited along the prototype chain. There is an order to when this gets used as you can see in the difObject.simpleLog(); call that it uses the local instance method as it does not have to go up the chain to find the one we added with the line MyObject.prototype.simpleLog = MyObject.simpleLog;

Now when we reference methods in JavaScript it is not strictly accurate in the form that other class-based languages. For JavaScript any function that you add as an object property becomes a method for that object.  An inherited function acts just as any other property on that object, including method overriding!

Another key point to remember is what happens to this. Its value points to the inheriting object not back to the prototype object where the function is an own property. Let’s look at another example.

var myObject = {
    staticValue: 40,
    someMethod: function(val) {
      console.log(this.staticValue);
      return this.staticValue + 1;
    }
};

console.log(myObject.someMethod()); //42

var yourObject = Object.create(myObject);

yourObject.staticValue = 20;

console.log(yourObject.someMethod());  //21

 

As you can see once we overwrite a value it will no longer work its way up the chain allowing for differences in the objects after they are created. Very useful! I will be digging deeper into objects and modules in another post.

Maker Square Day 2

Here is the rough schedule for the day:

  • closures
  • underscore pt1
  • lunch
  • underscore pt1
  • this keyword
  • underscore pt 2
  • group meeting
  • dinner
  • lecture

I am being deliberately vague here. Somethings you have to pay to get the info, ya dig? I list it to illustrate that the days are fairly full right off the bat making me think they will ditch some of the “welcome to…”, “benefits” and “how to kick ass” type lectures in favor of even more JavaScript stuff.

Let’s see if my notes improved:

A closure is a function that has on going access to the variables of the context it was created in, even after outer function calls it was created in have returned.

assign Saga() to global var
 new Saga = function() {
 sagas.push(function(){ blah; }
 sagas[0]();
 }

Okay so not much better really but at least it had a basic definition of a closure. Here is a better example:

function init() {
// name is a local variable created by init
var name = "Mozilla";
// displayName() is the inner function, a closure
function displayName() {
alert(name); // use var declared in the parent function } displayName(); }; init();

Then we examined some underscore functions and the whats going on behind them.
_.extend = function(obj) {
_.each(arguments, function(passedObj){
_.each(passedObj, function(value,key) {
obj[key] = value;
});
});
return obj;
}

In Human:

for an object(s)
iterate over the arguments (objects)
iterate over each passed object
assign object[key] to the passed value

_.defaults = function(obj) {
  _.each(arguments, function(passedObj){
_.each(passedObj, function(key, value){
      if(obj[key] === undefined) {
obj[key] = value;
}
});
});
return obj;
}

In Human:

for an object(s)
iterate over objects arguments
if element does not exist in obj, add to obj

Interesting topic popped up about the !! convention. It forces coercian of the result to boolean.

Interview Question: How do you access a function inside of a return function? ()()… That is a bad note.. avoid this section.

Then there was a lecture on something about macs or something. I only just listened to this at the edges. I use linux so not much benefit, I took notes but I will never use them, so I am not typing them.

There was a cool GIT section though.
git remote -v //shows remotes
git remote add <username> https://github.com/<username>/<repo>.git
git branch -v show //shows branch
git checkout -b pairs //create and go to pairs branch
git checkout master
git push <username> branch:newBranch

Push to two repos in one command:
$ git remote -v
origin me@original:something.git (fetch)
origin me@original:something.git (push)
//add 'pairs' remote
git remote add pairs me@original:something.git
//add url
git remote set-url --add --push both git://somewhere/something.git
$ git push pairs

this

A new four letter word. In 4 steps.

  1. Debugger paused on this.
  2. Scan outward for function {}.
  3. once function containing this is found look at the where stack
  4. inspect syntax of how the function was called to see which run pattern is being is being used.

Run Patterns

  • Global Reference
    • Why?
      • Needs a value
    • What?
      • In a browser its window
    • example
      • this (not enclosed in any function)
  • Free Function Invocation
    • Why?
      • Needs a value…
    • What?
      • global object
    • example
      • functionName()
  • ABC (.apply, .bind, .call)
    • Why?
      • to manually pass in a this binding, like passing in an argument when invoking a function/method
    • What?
      • the first argument to .apply, .bind or .call
    • example
      • fn.call(target) or obj.methodName(target)
  • Method Invocation
    • Why?
      • to execute the method in the context of the object they’re found in
    • What?
      • Object on the left of the call time dot
    • example
      • target.methodName();
  • Construction Mode
    • Why?
      • Allow a constructor to operate on the instance it is creating
    • What?
      • A new object created for that invocation
    • example
      • new functionName()

90% Rule

Inside a function, the keyword ‘this’ will be bound to the object that was left of the dot where that function was called.

The last lecture I took notes on was about some things to do and ways to think that can help you at Maker Square.

Set up a blog. Okay I was a little late on that but as they say blah blah late blah blah never.

There will be people here who work harder, learn faster, code stronger and think better than you…. learn to deal with that. (trust the program)

Have a growth mindset vs a fixed mindset. (trust the program)

This sparked a note for me to tell Muhammad about Richard Feynman, the ultimate in growth mindset.

Judge yourself by the core curriculum, not by others. They said this a few times. (trust the program)

Work hard, be strong and ask for help! (trust the program)

What does a professional developer look like?

coders_block-100531704-orig

Coders Block!

Learn the workflow, its important!