PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

JavaScript for PHP Developers

Note: This article was originally published at Planet PHP on 6 December 2010.
Planet PHP

Hopefully, you've been a good geek in 2010. You've followed last year's advice and learned some JavaScript. Now, let's kick back with a glass of wine by the fireplace and take a moment to review what you've learned.

Objects

Most everything in JavaScript is an object, yet there are no classes. One way to define an object is by simply listing out the properties you want your object to have, separate them with commas, and wrap them in curly braces.

var calendar = { name: "PHP Advent", year: 2010 };

This simple object doesn't have any methods and looks more like an associative array in PHP. In fact, JavaScript doesn't have associative arrays and uses objects instead. To create a similar object in PHP, you can convert an array into an object:

$calendar = (object) array(name = 'PHP Advent', year = 2010);

Simple, isn't it? No classes in sight. Objects are nothing more than fancy arrays. Fancy, because some of the array elements happen to be invokable, and we'll call them methods.

Another approach to creating objects is to start with an aoemptyao object.

var calendar = {};

This is just like $calendar = new stdClass(); in PHP. In JS, you can also do var calendar = new Object(); but that's just an exercise in typing.

You can add stuff (properties and methods) as you go:

calendar.name = "PHP Advent"; calendar.year = 2010; calendar.say = function () { return this.name + ' ' + this.year; };

As you can see, JavaScript uses . instead of - to access properties and methods.

calendar.say(); // returns "PHP Advent 2010"

I can has classes?

There's no such thing as classes in JavaScript, but if you really miss them, there are constructor functions instead.

function Calendar(year) { this.name = "PHP Advent"; this.year = year; this.say = function () { return this.name + ' ' + this.year; }; }

Constructor functions are just normal functions, but when called with new, they return objects.

var thisyear = new Calendar(2010), lastyear = new Calendar(2009); thisyear.say(); // "PHP Advent 2010"

The equivalent in PHP would be something like:

class Calendar { public $name = 'PHP Advent'; public $year; function __construct($year) { $this-year = $year; } function say() { return $this-name . ' ' . $this-year; } } $thisyear = new Calendar(2010); $lastyear = new Calendar(2009); echo $thisyear-say(); // "PHP Advent 2010"

Constructor functions versus normal functions

The way you define a constructor function in JavaScript is the same as with a normal function. The difference is in the invocation. When called with new, a function always returns an object. If you don't do anything special, the object referred to by this is returned.

alert(typeof new Calendar()); // "object"

When called without new, functions return whatever the return statement states in the body of the function. If there's no explicit return, the function will return the special value undefined.

alert(typeof Calendar()); // "undefined"

In order to distinguish the intent of a function when reading code, there's a widespread convention to name constructor functions with an uppercase first letter.

function MyConstructor() {} function myFunction() {}

Functions are objects

In JavaScript, where most things are objects, functions are objects, too. They can (and do) have properties and methods. You may also often see functions defined with var, like this:

var sum = function (a, b) { return a + b; };

Now, check this out:

alert(sum.length); // 2

What's up with thata We accessed the property length of the object sum. Function objects have a length property which holds the number of parameters they expect (but don't enforce, as all parameters have a default value of undefined), in this case two: a and b.

Prototypes

Functions are objects, and they automatically get a property called prototype. This property is used when an object is created using a constructor function. The prototype is also an object (surprise, surprise).

f

Truncated by Planet PHP, read more at the original (another 8322 bytes)