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 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(); } The object function untangles JavaScript's constructor pattern, achieving true prototypal inheritance. So instead of creating classes, you make prototype objects, and then use the object function to make new instances.
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. That helped giving birth to the AJAX phenomena. 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?
Classical Inheritance in JavaScript Douglas Crockford www.crockford.com And you think you're so clever and classless and free — John Lennon JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance. This can be puzzling to programmers trained in conventional object-oriented languages like C++ and Java. But first, why do we care about inheritance at all? The second reason is code reuse. To demonstrate this, we will introduce a little sugar which will let us write in a style that resembles a conventional classical language. Classical Inheritance First, we will make a Parenizor class that will have set and get methods for its value, and a toString method that will wrap the value in parens. The syntax is a little unusual, but it is easy to recognize the classical pattern in it. So now we can write myParenizor = new Parenizor(0); myString = myParenizor.toString(); As you would expect, myString is "(0)". The inherits method is similar to Java's extends. Sugar
syntax - What does "use strict" do in JavaScript, and what is the reasoning behind it? Understanding JavaScript Prototypes. (en Español, русском, 中文) JavaScript’s prototype object generates confusion wherever it goes. Seasoned JavaScript professionals, even authors frequently exhibit a limited understanding of the concept. What is a prototype? A prototype is an object from which other objects inherit properties Can any object be a prototype? Yes. Which objects have prototypes? Every object has a prototype by default. OK back up, what is an object again? An object in JavaScript is any unordered collection of key-value pairs. You said every object has a prototype. Forget everything you learned about the prototype property – it’s probably the biggest source of confusion about prototypes. Ok fine, but false is a primitive, so why does false. When a primitive is asked for it’s prototype it will be coerced to an object. I want to use prototypes for inheritance. But the real power of prototype is seen when multiple instances share a common prototype. So is this where constructors come in? Yes. OK. Example please? Like this:
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. But there's a better way. 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. Success!
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. 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(); Now there are more differences in implementing these two patterns. With an object literal, you can just simply make a copy of the object. var newLitInstance = objLit;
The Design of Code: Organizing JavaScript Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers. There is a lot of design in code, and I don’t mean code that builds the user interface—I mean the design of code. Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. There are three high-level, language-agnostic aspects to code design that are particularly important. System architecture—The basic layout of the codebase. In looser languages, specifically JavaScript, it takes a bit of discipline to write well-designed code. One approach I’m fond of consists of a tried-and-true software design pattern, the module pattern, whose extensible structure lends itself to a solid system architecture and a maintainable codebase. The module pattern#section1 Building a module#section2 jQuery plugins#section3 Options#section4