javascript – Mithat Konar (the blog)

JavaScript’s prototypal inheritance

In this final part of our series on JavaScript prototypes, we’re going to discuss using them to implement inheritance as it’s typically thought of in classical object-oriented design. Having said that, I once again suggest that you try to put aside what you may already know about how objects and inheritance work in other languages and treat the way JavaScript works as its OwnThing.

So, let’s get on with it.

JavaScript and ‘this’, arrow function edition

In a previous installment, we took a dive into the this variable and how it behaves in different ES5 situations. In this installment, we’ll do the same but for so-called arrow functions, introduced in ES6.

The JavaScript prototype chain

So far we’ve learned what the relationship is between an object and its constructor’s prototype and what happens when we change properties set on the prototype. In particular, we learned that if you try to access a property of on object, the JavaScript engine will first look in the object itself for the property, and it if doesn’t find it there it looks in its __proto__ property, which is also the constructor’s prototype.

This leads to a good question: What happens if the property isn’t in the constructor’s prototype either? One possible answer is that the JavaScript engine gives up and says the property is undefined. But that’s not what happens.

JS prototypes and property values

Let’s continue the investigation of JavaScript prototypes we started last time by seeing what happens when we manipulate properties on prototypes in various ways.

Designing out designers?

I’m teaching myself React, the JavaScript library du jour that’s meant “for building user interfaces.” Interestingly, it doesn’t use a templating language. Instead it offers JSX: an extension of the JavaScript language that lets you write JS code that looks very much like HTML and that can be rendered into HTML. On the surface this seems like a cool idea, but the apparent simplicity starts to break down when you want to do anything other than straight-line HTML.

JavaScript prototypes

This is the first in a series of posts intended as a gentle guide through the realm of JavaScript prototypes. If you’re coming here from a class-based language like Java, PHP, C#, or C++ I suggest you put aside everything you know about how objects and inheritance work in those languages. Try to treat the way JavaScript works as its OwnThing.

JavaScript and ‘this’

Keeping your head square about JavaScript’s this variable can be a little challenging. A wonderfully concise summary on the issue is found in chuckj’s answer to a StackOverflow question (modified here to account for differences between ECMAScript 5’s strict and non-strict modes):

this can be thought of as an additional parameter to the function that is bound at the call site. If the function is not called as a method then the global object (non-strict mode) or undefined (strict mode) is passed as this.”

Let’s see what this means (pun intended?) for various scenarios.

enchant.js | More examples

enchantjs-fundamentals-1

enchant.js | More examples picks up where enchant.js | Fundamentals leaves off (blog post). Enjoy.

enchant.js | Fundamentals

We’ve entered Phase Two of my game programming course, and to help support this phase, I’m putting together enchant.js | Fundamentals.

While currently not as interactive nor as descriptive as what I developed for Phase One, I’m hoping these incremental examples will make it easy for those new to programming to grok some fundamental techniques and concepts.

Again, feedback is appreciated.

Just Enough JavaScript

I got a last-minute opportunity to teach an introduction to game programing course for people with no programming experience. I decided to base it around an open source HTML5 framework*. When I started looking around for a crash course with which to build basic JavaScript programming skills, I found none that were appropriate. Hence, Just Enough Javascript was born.

I’m creating it as a just-in-time resource for the course. There a little bad-but-expedient practice in there, but it’s working quite well for the course so far. Each page is resource-complete in itself—meaning you can download just a single HTML document and later view it without a live Internet connection.

I would love to hear any feedback about it.

* I considered enchant.js, Phaser, and melonJS. There were pros and cons to each, but I ultimately went with enchant.js because I like it’s event-driven nature (better reflects how JS “should” work) and it has a smaller (and therefore less intimidating for beginners) API.