What is __proto__ in JavaScript?

Standard

If nothing else it has an amusing name, it’s pronounced “dunder proto” due to the double underscore notation it borrows from python.

The __proto__ property is used to access the prototype chain for an object instance. Don’t know what a prototype chain is? Go take a look here.

So where does it come from? It gets created on any new instance during construction.  If construction is done using a constructor function i.e by using the new keyword var a = new Person() it will point to the prototype of the constructor function, in this instance Person.prototype.  If done using object literal notation var b = {} it will point to Object.prototype. Note that as everything in JavaScript is an object, all objects can follow their prototype chain back to Object.prototype

You can also gain access to the prototype using Object.getPrototypeOf(...). MDN provides more on this. You should give this a read if you haven’t already to understand the history of this property.

The following code demonstrates the setup of two very simple object literal and constructor function prototype chains.

//Object literal
var o = {};
o.__proto__ === Object.prototype; //true
o.prototype === undefined;   //true

//Constructor function
function Shape(){}
var circle = new Shape();

circle.__proto__ === Shape.prototype;   //true
circle.__proto__.__proto__ == Object.prototype; //true
Shape.__proto__ === Function.prototype;   //true

More reading.

I’ve already linked them above but as always the MDN docs are a good place to start.  There is a great stackoverflow post that has some really valuable insight amongst the many answers and comments.

Advertisements

Making data available to all express views

Standard

In this post I’m going to show you how to make data available to all of your views in an express 4 website. I’ll be using jade in my sample code but this solution is not specific to any view engine.

Imagine we want to display the name of the logged in user in the top right hand corner of the screen on every page. One way you could do this is to include the user object in every route handler that returns a view like so:

res.render('viewname',{user:'Joe Bloggs'})

This approach is cumbersome and error prone as the developer is sure to forget to pass this data in at some point.

The logical place to put this is in the layout view which is shared by all your other views. Think _ViewStart.cshtml in an ASP.NET MVC application.

doctype html
html
head
title= title
body
div(style="float:right") Hi #{user.name}
block content

In the code above you can see that we are referencing a user object to output the name of the currently logged in user. All views in an express application have access to an implicit variable called locals which hangs off the response object. Jade allows us to access data hanging off locals without referencing it directly.

So #{user.name} is equivalent to #{locals.user.name}

We need to load up this data for all routes and we can do this in our express startup file, app.js, index.js etc.

var app = express();
app.use(function(req, res,next){
//locals is available to all our views including layout and because this middleware is fired for all routes we are therefore setting up the user for every view.
res.locals.user = {name: 'Joe Bloggs'};
});

That’s it, you now have shared data accessible from all your views.

I hope this post has been of some use. An incredibly simple solution but if like me you’re often switching between ASP.NET MVC and Node/Express, you sometimes need to take a step back and remember to “think inside the framework”.

Windows 8 Stack – A clearer perspective

Standard

Having now watched the keynotes and a couple of sessions from Build (sans whacks) I’ve found myself still confused about how the new stack built around WinRT hangs together.  Has my recent effort to spend some quality time with javascript on the assumption that it’ll become far more prevalent come to fruition or should I be hanging my hat with the XAML brigade or maybe I need to brush up on my C++?  The answers to these and many more questions remain unanswered but the following article by Doug Seven goes a long way to helping me push past the marketing hype.  His article is worth a read if only for the “marketecture” reference.