Static variables Quick guide to somewhat advanced JavaScript last update: February 21st 2006 Hey, I didn't know you could do that If you are a web developer and come from the same place I do, you have probably used quite a bit of Javascript in your web pages, mostly as UI glue. Until recently, I knew that Javascript had more OO capabilities than I was employing, but I did not feel like I needed to use it. As the browsers started to support a more standardized featureset of Javascript and the DOM, it became viable to write more complex and functional code to run on the client. As we all start to learn what it takes to write our cool, AJAXy applications, we begin to notice that the Javascript we used to know was really just the tip of the iceberg. In many ways we can say that suddenly the bar was put much higher than before. The purpose of this article is precisely explaining the types of constructs that many of us are not familiar with yet. Related article Prototype.js documentation What do you mean? Take a look at this example. Whoa!
Prototypal Inheritance Explained Newcomers to JavaScript often misunderstand its object oriented style. Inheritance, in particular, seems foreign to people coming from other object oriented languages like C++ or Java. When I was new to JavaScript, I tried to manipulate the language to fit the style I already knew. A Different Style C++ and Java are class-based languages. JavaScript is a prototypal language. We start with a function. function Person(name, age) { if (Boolean(name)) this.name = name; if (Boolean(age)) this.age = age; } The function above will be called to initialize new objects. Let's add some functions and properties to be shared among every new Person object. Now let's initialize two new Person objects. var jane = new Person("Jane Smith", 35); var noName = new Person(); noName.setAge(29); The object structure we get looks like this: diagram 1. When we access a property in jane or in noName or in any other new Person object, JavaScript will check in that object first. Extending Objects Success! And that's it.
JavaScript Class Constructor vs. Object Literal: Difference in Implementation and Inheritance There is a difference between object literal and what is called a "constructor" in JavaScript. For some reason a lot of people think that these two are interchangeable, but they are a totally different thing. Here is an example: This is most people refer to as object literal in JavaScript. It is an object that can be a accessed right away, with all its nodes, so when you want to call a method, it works like this: objLit.someMethod(); On the other side you have a simple constructor, which might look like this: var myConst = function(){ this.someOtherProperty = "some value"; this.someOtherMethod = function(){ console.log(this.someOtherProperty); } } Obviously, if you want to call the inner method directly, it will not work, because it is not an object yet. myConst. someOtherMethod(); First you have to create an "instance of a class:" var myInst = new myConst(); Now you you have your public methods play with the public methods: myInst. someOtherMethod(); var newLitInstance = objLit;
Prototypal Inheritance Douglas Crockford www.crockford.com Five years ago I wrote Classical Inheritance in JavaScript (Chinese Italian Japanese). It showed that JavaScript is a class-free, prototypal language, and that it has sufficient expressive power to simulate a classical system. My programming style has evolved since then, as any good programmer's should. I have learned to fully embrace prototypalism, and have liberated myself from the confines of the classical model. My journey was circuitous because JavaScript itself is conflicted about its prototypal nature. new () produces a new object that inherits from .prototype This indirection was intended to make the language seem more familiar to classically trained programmers, but failed to do that, as we can see from the very low opinion Java programmers have of JavaScript. Fortunately, it is easy to create an operator that implements true prototypal inheritance. function object(o) { function F() {} F.prototype = o; return new F(); } if (typeof Object.create !
The prototype object of JavaScript The prototype object of JavaScript No, we're not going to discuss how to construct a new version of JavaScript in this tutorial. The prototype object of JavaScript, introduced starting in JavaScript 1.1, is a prebuilt object that simplifies the process of adding custom properties/ methods to all instances of an object. A little background first... In JavaScript, you're allowed to add custom properties to both prebuilt and custom objects. //adding a custom property to a prebuilt object var myimage=new Image() myimage.size="26k" /*adding a custom property to the custom object "circle"*/ //First, create the custom object "circle" function circle(){ } var smallcircle=new circle() smallcircle.pi=3.14159 A custom property added this way only exists for that instance of the object.
Why use the "finally" Block When an exception occurs, execution stops and control is given to the closest exception handler. This often means that lines of code you expect to always be called are not executed. Some resource cleanup, such as closing a file, must always be executed even if an exception is thrown. To accomplish this, you can use a finally block. A finally block is always executed, regardless of whether an exception is thrown. Using Prototypes in Javascript | TimKadlec.com As mentioned in my previous post, I think using prototypes is powerful enough to deserve a more detailed explanation. To start off, let me say we are talking about the prototype method here, not the JavaScript library. Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it. function Pet(name, species){ this.name = name; this.species = species;}function view(){ return this.name + " is a " + this.species + "!" As you can see, by using simply using prototype when we attached the view method, we have ensured that all Pet objects have access to the view method. function Pet(name, species){ this.name = name; this.species = species;}function view(){ return this.name + " is a " + this.species + "!" We set up the Dog object, and have it call the Pet function using the call() method.
"finally" block JavaScript also allows you to add a "finally" block to the "try-catch" block discussed previously. The "finally" block contains statements that are executed regardless of whether an exception is generated or not in the "try-catch" block. try { execute this block } catch (error) { execute this block if error } finally { execute this block after the try block } If an exception is encountered when running the code within the "try" block, JavaScript will stop execution at that point, and look for a "catch" block to handle it. Take a look at the next example to see how this works: Here's the output: The following error occurred: TypeError - 'a' is undefined Thank you for playing. It's important to note that the code in the "finally" block will be executed even if errors are encountered in the corresponding "try" block.