Okay, a whirlwind tour:
Objects
An object is a thing that has properties. Properties have names and values. The names are always strings (although we can write them without quotes most of the time), and the values can be anything JavaScript supports: Numbers, strings, booleans, null, undefined, or references to objects.
So:
var a = {
propertyName: "property value"
};
a is a variable referring to an object, which has a property named propertyName, whose value is the string "property value".
Prototypes
An object (say, obj) can have another object (say, p) "behind" it, where p lends obj its properties unless obj has its own property with a given name. p is the prototype object of obj. This is easiest to understand with an example:
// Let's create an object `p` with a couple of properties, `x` and `y`
// This syntax is called an "object initializer" (aka "object literal")
var p = {
x: "x on p",
y: "y on p"
};
// Now, we'll create a new object, `obj`, using `p` as its prototype
var obj = Object.create(p);
// And that means if we ask `obj` for a property called `x`, since it doesn't
// have its **own** `x`, it asks `p` for it. (And the same with `y`)
console.log(obj.x); // "x on p"
console.log(obj.y); // "y on p"
// But we can give `obj` its *own* `x` instead if we want
obj.x = "x on obj";
console.log(obj.x); // "x on obj"
console.log(obj.y); // "y on p"
// Doing that to `obj` had no effect on `p`
console.log(p.x); // "x on p"
console.log(p.y); // "y on p"
A very, very important aspect of prototypes is that the connection between the objects is live. So if obj doesn't have a y property, every time we ask obj for y it goes and asks p. And so if we change p's value for y, that change shows up if we ask obj for it:
var p = {
x: "x on p",
y: "y on p"
};
var obj = Object.create(p);
console.log(obj.y); // "y on p"
p.y = "updated y on p";
console.log(obj.y); // "updated y on p"
This live connection is a vital thing. So again, think of it like this: We ask obj for the property y, and obj says "I don't have my own, so I'll go ask p for it and give you that."
Note: The Object.create function I've been using to create obj is new as ECMAScript5 (the spec update from a couple of years ago). We'll come back to another way to given an object a prototype further down.
The prototype for an object is currently always set when the object is created, and cannot be changed (I couldn't swap in a q instead of p above after creating obj). Above I'm using Object.create to do it (and below we'll talk about constructor functions). Until ECMAScript5 (ES5), there was no standard way to get the prototype of an object. ES5 gives us a way to do it now, called Object.getPrototypeOf, but still doesn't offer a way to change it. The next version, ES6, will take things a bit further.
Functions
Functions are units of code that do things. Functions are also objects, and so they can have properties, although in practice it's relatively rare to use properties on functions (other than call and apply, which we don't need to talk about here).
You can declare a function:
function foo() {
}
...or you can create one with an expression:
// An anonymous -- unnamed -- function assigned to variable `foo`
var foo = function() {
};
// A function named `f` assigned to variable `foo`
var foo = function f() {
};
Declarations and expressions are different. Function declarations are evaluated before any step-by-step code in the same scope is performed. Function expressions are evaluated as they're encountered in the step-by-step code, like all other expressions. (People sometime call this "hoisting" because it means that in effect, even if a function declaration is at the bottom of a scope, it happens as though it had been lifted -- hoisted -- to the top.)
Functions can have arguments:
// `a` and `b` are arguments
function sum(a, b) {
console.log(a + b);
}
And they can have return values:
function sum(a, b) {
return a + b;
}
console.log(sum(1, 2)); // "3"
If a function doesn't return something else, the result of calling the function is the value undefined.
Methods
JavaScript doesn't have methods. It only has functions — but that's all it really needs. But if you have a function assigned to an object property, and you call that function as part of an expression retrieving the property from the object, then something happens that makes JavaScript seem to have methods: The this keyword refers to that object within the function call. Again, an example works wonders:
// A blank object
var obj = {};
// Lets put a function on it as a property
obj.foo = function() {
console.log("this is obj? " + this === obj);
};
// Let's call that function
obj.foo(); // "this is obj? true"
More on my blog:
Constructors
Constructor functions are used with the new keyword, and they're one of the ways you give an object a prototype. When you call a function via new, a new object is created, and assigned a prototype from the function's prototype property:
function Foo() {
}
Foo.prototype.x = "x on Foo.prototype";
var obj = new Foo();
console.log(obj.x); // "x on Foo.prototype"
Every function automatically has a prototype property, even though of course we don't use the vast majority of functions as constructors.
An important thing to note here: The prototype property of a function is just a boring old property. It isn't the prototype of any object until/unless that function is called via the new operator. The new operator uses the prototype property of the function to set the prototype of the new object when you call the function via new, but that's all.
It's worth mentioning that until ES5, constructor functions like the above were the only way you could create an object with a given prototype. But with ES5, we got Object.create, which opened up more patterns for how to use JavaScript. (It was always possible to create your own Object.create, by using a temporary function, and in fact that's exactly what some people did.) Some people don't like using the new keyword and the prototype property, they prefer to use a "builder" pattern where you just call a function and get back an object. JavaScript is so flexible that you can do that.
More to Explore
