#prototypal inheritance

[fnord888]

Regular brain: null and Object are two of the types in javascript

Glowing brain:  null is of type Object

Galaxy Brain: objects are of type null

[obscurejavascript]

__Proto__ vs Prototype In JavaScript

Note that since let and const are supported in all modern browsers and a good practice I will be using them instead of var. To support legacy environments, just use var instead.

prototype refers to a set of properties and functions that custom objects will have that inherit from the object that it is on. It can be thought of as a blueprint for child objects. For example:

console.log('prototype example:'); const ObjectA = function() {}; ObjectA.prototype.property1 = 'value1'; // Inherit (The constructor was not updated but is unused here) const ObjectAChild = function() {}; ObjectAChild.prototype = Object.create(ObjectA.prototype); ObjectAChild.prototype.property2 = 'value2'; let objectA = new ObjectA(); console.log(objectA.property1); // value 1 let objectAChild = new ObjectAChild(); console.log(objectAChild.property1, objectAChild.property2); // value 1 value 2 ObjectA.prototype.property1 = 'another value'; console.log(objectA.property1, objectAChild.property1); // another value another value

Notice how properties can be updated and instantly reflect in children. This is because if a property is not found at a current object, it checks its prototype (what the parent said should be inherited). Then if not found, it checks the prototypes prototype and so on until the Object prototype is reached. The implication is that inherited objects are just objects linked in a special way to another object.

The value of these links is the standard that makes accessing and analyzing them easier and the built in prototype checking algorithm. One of the ways to analyze an object is to look at an objects internal prototype. Remember that an objects prototype is for objects inherited from it, not the objects internal prototype. __proto__ allows you to get this. This can be used to get the properties that the project has that were not inherited. Using the previous code:

console.log(objectAChild.__proto__); // { property2: 'value2' }

Of course, you could just use the prototype directly on parent object that the child object was created from if you have access to it:

console.log(ObjectAChild.prototype); // { property2: 'value2' }

Finally, __proto__ has great JS environment support and is part of the ECMAScript standard (Which JavaScript is based on). But it was only added as a temporary measure until better APIs are fully supported like Object.getPrototypeOf(). So it is best to use Object.getPrototypeOf() when possible.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2017/protoVsPrototype.js

[joyjing1-blog]

W6D1 - Astroids

Topics

Arguments

Apply() vs ... spread operator

Prototypal Inheritance

Surrogate Functions

Canvas

http://joshondesign.com/p/books/canvasdeepdive/chapter01.html

Behavior vs State

Projects

Arguments Exercises

mySum()

myBind()

myCurriedSum()

Function.prototype.curry()

Inherits Exercises

Parent.inherits(Child)

Asteroids

Classic Asteroids Game

Partner: Dylan Peterson

Learnings

Modulo in Javascript will allow negative numbers

Make sure to require Utils file - otherwise, can break the ability to create alert("Pop Up Box Text")

Make sure not to accidentally nest within tags (not self-closing), otherwise CSS stylesheets will not be loaded

[ajourneytocode]

W6D1 - Building Asteroid Game

Today we started with a lecture about common javascript concepts, namely arguments, prototypal inheritance and cleaning the namespace. Then we built an asteroid game.

Arguments

Arguments work similarly as the ruby splat operators in the sense that calling arguments inside a function will call an array-like of the arguments that have been passed into the function. Pretty useful when we don’t know in advance how many arguments will be passed.

Prototypal inheritance

To create parent/child relationships between objects that are close to what we classes are in Ruby. They’re not called classes in the current official implementation of javascript yet (they are literally called classes in ECS6). To create these relationships in practice we’ll write an inherit function in a utility.js file:

var Util = {}; Util.inherits = function(SubClass, SuperClass) {    function Surrogate (){}    Surrogate.prototype = SuperClass.prototype;    SubClass.prototype = new Surrogate();    SubClass.prototype.constructor = SubClass; }; This way, instances of SubClass will have access to SuperClass prototype properties. When creating a subclass, we’ll be able to assign the SuperClass parameters, just like we do with super in Ruby:

function Cat(name) {    Animal.call(this, name); }

Modules and namespace

Javascript class-ish elements will be put in different files (modules) to keep a clean codebase. However, to be able to make the potential dependencies work between these modules, we need to do 2 things: explicitly make the elements of a module available (module.exports = ClassName), and require these modules on top of the file (var ClassName = require(./className);). But that can lead to unexpected naming collision. To solve that problem, we can use IFEE technique (basically privatize everything that’s in a module), or use webpacks that does all that work for us by generating one generic bundle.js file that is required in the html code. Then, webpack will take care of the distribution of calling the modules.

Asteroid Game

During the afternoon, we’ve built an Asteroid Game using html canvas. That was pretty funny to go through each step of the process of making animations in the browser. There’s a lot to explore and experiment here, but I guess I won’t have the time to do so in the following weeks.

[stevearagon]

a/A W6D1 - Making Asteroids

Today we continued our JavaScript curriculum. We started with some simple exercieses that invovled prototypal inheritance and using the arguments array property of functions. After that, we focused on making our own version of Asteroids, an early video game fromt eh late 70's. Here is a link to yesterday's attempt at the game (uses the directional keys and space to shoot).

We used canvas which simply is a drawing canvas in html, I think. We had to write a lot of code before we were able to test if anything worked which was sort of annoying, but we eventually were able to see the fruits of our labor when we had asteroids (white circles) flying around our screen. The most difficult part of setting the game up was understanding how to link all of our modules in the browser. We ended up using IIFEs which pulled all the code into a property of the window called Asteroids (or at least that's how I understood it). It was pretty great getting this thing to slighlty work.

[christophermusing]

I’m about to teach prototypal inheritance in JavaScript... a feature that is fraught with issues when approached the wrong way. And it’s almost always approached the wrong way. This article explains the problem nicely.

I think, all things considered, that I agree with Douglas Crockford that it's best to just avoid JavaScript's prototype feature alltogether.

[munzicodes]

This and Prototypes

Newbies to Javascript might be wondering what this prototype business is about. Prototypal inheritance is not always the most intuitive thing. The best run down I’ve found has been Object Playground (and yes it moves fast, I would highly recommend multiple viewings!) And while somewhat mysterious, the word “this” is far easier to type then “prototype”, which may lead you to think when you’re creating a constructor function you should put any methods of your constructor on your this object when you originally define the function like so:

When I originally came to Javascript I was riding a Ruby-induced high, and ^this^ felt _right. _It’s more reminiscent of classes or something. And it just makes sense, right? Why wouldn’t you put all the methods of a particular function inside the function? Why on earth would you write something like this?

I’ve got two main reasons that I can think of, but maybe you have more:

Memory. Every time you create an instance of BigThing, you are creating and storing a brand new function, with it’s own unique This, and it’s own unique someFunctionOnThis(). Maybe that’s what you want. But probably not and you’re slowing down your code.

Inheritance! Let’s look at the full example:

As you can maybe see in the repl.it if you ever want to change your function, it’s easy with prototype. All the instances of that item will also share those changes, even if they were created before the change. But if you create a function with THIS then you have to change each individual instance. This makes it a pain to manage, and sort of makes you question the whole point of creating a constructor function to begin with, you know?

TLDR: if you’re making a constructor function with javascript, put your methods on the prototype, not on the THIS object.

If I’ve missed something or am unclear, feel free to let me know! Happy coding!

[netcell]

The Two Pillars of JavaScript

1. **Objects without classes** (and prototypal inheritance aka OLOO — Objects Linking to Other Objects), and 2. **Lambdas** (with closure — the keys to functional programming) A call to drop OOP: stop using constructors and classical inheritance