The Definitive Guide to Object-Oriented JavaScript
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about how prototypes, constructors, `this`, and inheritance work in JavaScript, calling it the clearest explanation of the topic.
Recommended by 9 people across 9 different months, 2009 to 2018.
What it is
A 27-minute screencast by James Shore that builds up JavaScript's object model from first principles, covering constructors, prototypes, and the classical inheritance patterns people use in JS. It uses an interactive object visualizer and was published in 2013, before ES6 classes.
What people said
Strong rec Butt4cak3 · 2013-10 · Stack Overflow · on “Why are methods attached to the constructor not present on objects constructed by it?”
If you want to know how objects, functions, "classes" and inheritance in Javascript work, you should take a look at this video: The Definitive Guide to Object-Oriented JavaScript: [this video] This is the best explanation of object orientation in JS that I have ever seen. In your case, the following happens: When you create a new Ninja() , you create a new empty object ( {} ) with a prototype property that points to the functions's prototype. Then the function Ninja will be called as the constructor for your newly created object. It creates the swingSword function and makes it a method of your object. The swingFire function will not be assigned to your created object, because it is a method of th
Strong rec Bad · 2016-02 · Stack Overflow · on “How does JavaScript .prototype work?”
The Definitive Guide to Object-Oriented JavaScript [this video] - a very concise and clear ~30min video explanation of the asked question (Prototypal Inheritance topic begins from 5:45 [this video] , although I'd rather listen to the whole video). The author of this video also made JavaScript object visualizer website [LINK] . [LINK] [LINK]
Strong rec etayluz · 2017-03 · Stack Overflow · on “JavaScript OOP in NodeJS: how?”
This is the best video about Object-Oriented JavaScript on the internet: The Definitive Guide to Object-Oriented JavaScript [this video] Watch from beginning to end!! Basically, Javascript is a Prototype-based [LINK] language which is quite different than the classes in Java, C++, C#, and other popular friends. The video explains the core concepts far better than any answer here. With ES6 (released 2015) we got a "class" keyword which allows us to use Javascript "classes" like we would with Java, C++, C#, Swift, etc. Screenshot from the video showing how to write and instantiate a Javascript class/subclass: [LINK]
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 lpiepiora · 2013-08 · Stack Overflow · on “Cannot create an object using factory”
This has actually little to do with Angular. You're returning an Object (as the error says) from the method. You may want to return your Entity function. Consider this example: webApp.controller ('entityCtrl', function ($scope, Entity) { $scope.x = new Entity('1','3343','32434'); }); webApp.factory('Entity',function(){ var Entity = function(id,created,updated){ this._id = id; this._created = created; this._updated = updated; }; Entity.prototype.save = function (){ console.log('save'); }; Entity.prototype.update = function () { console.log('update'); }; Entity.prototype._delete = function () { console.log('delete'); }; return Entity; }); Btw. you may want to watch this video, on how the Objec
Recommends Thiago Negri · 2014-11 · Stack Overflow · on “What does 'this' mean inside javascript function?”
The referece of this depends on how you are calling the function. For example: function globalFn() { return this.val; } var objectA = { val: 1, localFn: globalFn }; var objectB = { val: 2, localFn: globalFn }; objectA.localFn(); // `this` will be `objectA`, so it returns `1`. objectB.localFn(); // `this` will be `objectB`, so it returns `2`. So far, so good. It looks like the same as in Java or other object oriented languages. But, this may seem tricky: var myFn = objectA.localFn; myFn(); // `this` will be `undefined` in strict mode, causing an error This shows that this reference is not bound to the function itself, but to the way the function is called. You can "cheat" it by using call met
Recommends sorenymous · 2016-05 · Stack Overflow · on “OOP in JavaScript is so confusing, ES6 is great but not well supported, what to do?”
I just watched The Definitive Guide to Object-Oriented JavaScript [this video] . I will never learn how to do OOP in classical way. It mentioned the new spec (ES6). But as far as I know it is not well supported [LINK] . Is there any workaround to make OOP easier in JavaScript?
Recommends Kiran · 2017-05 · Stack Overflow · on “Javascript how can base class access derived class member?”
@slebetman that's cleared a lot of things. Thank you! I found this which describes exactly what you said [this video] at 7:00
Recommends Jack · 2018-03 · Stack Overflow · on “Jest: Mock one function in a class”
You must replace all MyModule.getCases with MyModule.prototype.getCases . This is because the class syntax is just syntactic sugar [LINK] . Without this you would instead have (and indeed we used to do this). function MyModule () { console.log('hello') } MyModule.prototype.getCases = function () { return 2; }; MyModule.prototype.getOtherCases = function () { return 3; }; module.exports = MyModule; This is completely equivalent to your code and if you copied and pasted it you would see it worked in the same way. As all objects created with new inherit the prototype , the above syntax is just a very manual way of creating shared functions for instances of objects. Prototypal inheritance can be
Cites funerr · 2013-10 · Stack Overflow · on “When should I use data type classes in JavaScript”
It depends, Note : Most of the programmers coming from a strong OO language will have trouble like you in regard to JavaScript's functional behavior (you are not alone). If you want to create something closer to C# I would do the following: function Table1(id, x, y, z) { this.id=id; this.x=x; this.y=y; this.z=z; } Table1.prototype.mySpecialTable1Method= function() { console.log(this.id); }; Implementation : var t = new Table1(1, 2, 3, 4); t.mySpecialTable1Method();// outputs: 1 If you need to have methods that interact with the (soon to be) objects then I would definitely go with the code above. In addition it will make it clear when working with the objects that are related to a specific 't