Douglas Crockford: Advanced JavaScript

YUI Library · 197K views · 2011 · 1:06:51

Open on YouTube

Web developmentProgramming language designSoftware architecture & designtalk

Why Stack Overflow recommends it

Stack Overflow users link it when explaining JavaScript inheritance, especially pseudoclassical versus prototypal inheritance and the power constructor pattern, citing Crockford as the authority.

Recommended by 7 people across 6 different months, 2009 to 2015.

What it is

A 2011 YUI Theater talk by Douglas Crockford, the third in a three-part series, comparing JavaScript inheritance and object-construction patterns. It contrasts the Pseudoclassical Pattern with prototypal, parasitic and power-constructor approaches that he argues fit the language better.

What people said

Strong rec Peter Lyons · 2012-11 · Stack Overflow · on “Javascript Prototype Class inheritance”

Your approach of making a new instance of the parent class and assigning that as the prototype of the child class is what Douglas Crockford calls the "Pseudoclassical" approach to inheritance in JavaScript. Check out this in-depth video [this video] where he covers in detail pseudoclassical, prototypal, and parasitic inheritance approaches as well as several variants. (Pseudoclassical is around 12 minutes in). Your approach works fine with the one (potentially large) limitation in that you cannot share constructor code in this pattern (at least not without some extra fanciness). So if you do: var e = new Employees(); console.log(e.constructor); You will see the Collection function instead of the

Recommends TK. · 2009-12 · Stack Overflow · on “What are good JavaScript OOP resources?”

JavaScript is a lightweight and powerful language, but it's often misunderstood and hard to learn (especially about its object oriented programming). What are the good materials (blogs, screencasts and books) to learn JavaScript OOP? The topics can be anything, but let's not include browsers, AJAX and libraries for now. Also how did you learn the functional programming, closure, object, inheritance and design patterns in JavaScript? Personally I would like to see more code examples because some of the books I mentioned above keep the example minimal. (EDIT: As this post is now community effort, please help maintain and develop the following list of resources !) Books JavaScript: The Good Par

Recommends bfavaretto · 2012-04 · Stack Overflow · on “Recommend way of scoping private members in javascript module”

The definitions do not achieve the exact same thing. var localFunc1 and function localFunc2 do the same thing, they create functions only available inside your outer function. this.localFunc3 and localFunc4 are not really local functions: they both belong to the window object ( this in that context is window , and localFunc4 is declared without the var statement). So, the latter two don't even need to be exposed on your returned object, since they're already global. And, actually, you are not exposing any functions on your return object, you are exposing their return values, since you invoke each of them. Were you trying to do this? return { proxy1: localFunc1, proxy2: localFunc2, proxy3: lo

Recommends Joseph · 2012-04 · Stack Overflow · on “Proper class construction in javascript”

+1 actually, Doug Crockford does like this type (Power Constructor + Parasitic inheritance) [this video] of building objects, especially without the `new`

Recommends keune · 2012-12 · Stack Overflow · on “javascript augmented prototype and chain”

Yeah, that's called inheritance. in order to benefit from inheritance, you should create a new object using new(). Now in your example, we are creating a function and augmenting its prototype. Why? Because we want to use it as a constructor class; meaning that it will be used to create new objects. Douglas Crockford is an expert on this topic, i highly recommend you check this video [this video] if you wanna know more

Recommends if __name__ is None · 2013-04 · Stack Overflow · on “Constructor or Object Inheritance in JavaScript”

I am new to JavaScript (started learning it this week). I've completed the CodeCademy course (actually just Objects 1 && 2 parts, rest was boring). I thought I learned prototypal inheritance with constructors, but than I've started watching Douglas Crockford: Advanced JavaScript [this video] Right at the beginning of the video, he mentions 2 types of inheritance, and I've realized, everything I thought I knew, I don't know. So I've started playing with Chrome JavaScript console and tried to do something using both inheritance models. //create constructor function MyParent(){ this.name = "joe"; this.sayHi = function(){ console.log(this.name); } } //create child object and inherit from parent var m

Recommends Entity Black · 2013-04 · Stack Overflow · on “Understand Object.create”

maybe this will help you to understand a little bit more: [this video] Here he explains that it doesn't work same as you said. Your argument that I thought the move function is in the Rectangle.__proto__.prototype is correct. You can find move as Rectangle.__proto__.prototype.move but it doesn't implies that you can find it as Rectangle.move . Prototype chain is interrupted. I think that it is detaily described in the video. Try to think about these parts of code: function Shape() { this.x = 0; this.y = 0; } Shape.__proto__.move = function(x, y) { this.x += x; this.y += y; console.info("Shape moved."); }; Rectangle=Object.create(Shape); Rectangle.move(); or: function Shape() { this.x = 0; this.y

Recommends Peter Lyons · 2013-11 · Stack Overflow · on “How should you inherit from EventEmitter in node?”

Why does he manually invoke the EventEmitter constructor with his own constructor's this? This is necessary to make sure whatever code is in the EventEmitter constructor function is executed. Some classes might not do anything interesting in the constructor, but others will have important code there, so you should always do this to make sure that code runs the same way it would run if you had just made a new EventEmitter directly with var emitter = new EventEmitter; In some languages (such as Java) this "constructor chaining" type behavior is implicit, but in JavaScript it must be explicitly done. Exactly how to set up inheritance in JavaScript comes down to an "it's complicated" answer and

Cites Magnar · 2009-11 · Stack Overflow · on “How to inherit a private member in JavaScript?”

Using Douglas Crockfords power constructor pattern [this video] (link is to a video), you can achieve protected variables like this: function baseclass(secret) { secret = secret || {}; secret.privateProperty = "private"; return { publicProperty: "public" }; } function subclass() { var secret = {}, self = baseclass(secret); alert(self.publicProperty); alert(secret.privateProperty); return self; } Note: With the power constructor pattern, you don't use new . Instead, just say var new_object = subclass(); .

Cites sanchez · 2013-12 · Stack Overflow · on “Few Instance of object Javascript”

function Fruit( speed, x, y ){ var fruit = {}; // or use some base object instead of {} fruit.texture = new Image(); fruit.speed = speed || 5; fruit.x = x || 0; fruit.y = y || 0; return fruit; }; var apples = []; for( var i=0; i<10; i++ ){ apples[i] = Fruit( 5, Math.floor((Math.random()*775)+1), 0 ); apples[i].texture.src = "_img/apple.png"; } Douglas Crockford - Power Constructor, 'new', 'this' and more [this video]