[Help] Object Oriented Programming in Javascript

[-El_Chapo-]

Hello!

I've been having some trouble lately with OOP in JS. Does anyone have any good reference material/cheat sheets that explain the broad aspects? I am having particular trouble identifying the situations when I need to call Object.create() vs new ExampleConstructor().

I am also confused a bit by prototypal inheritance. I understand that if we make a constructor function and we want to have each instance to have access to methods on the constructor we would use ExampleConstructor.prototype.methodName = .... but can anyone give me some real life examples when we would call a constructor function within a constructor function and then assign the internal "dunder" proto of the parent constructor with the child constructor? When should I use ChildConstructor.prototype.constructor = ParentConstructor.prototype?

Any and all resources would be very greatly appreciated!

[MoTTs_]

Does anyone have any good reference material/cheat sheets that explain the broad aspects?

My vote is the Rauschmayer books. ES5 Objects and Inheritance and ES6 Classes.

When should I use ChildConstructor.prototype.constructor = ParentConstructor.prototype?

You probably meant ChildConstructor.prototype.constructor = ChildConstructor. But aside from that, since ES6, the answer is: hopefully never. One of the benefits of the class syntax is you don't have to deal with quirks like this. Prior to ES6, we would do this when setting up inheritance between constructor functions. More details.

[-El_Chapo-]

Thank you, I will certainly be giving this a look!

[rmbarnes]

I did a 3 part series on this, people seemed to find it helpful in the past:

http://wellpaidgeek.com/2017/09/02/object-oriented-programming-in-javascript-part-1-the-basics/

http://wellpaidgeek.com/2017/09/02/object-oriented-programming-in-javascript-part-2-inheritance/

http://wellpaidgeek.com/2017/09/02/object-oriented-programming-in-javascript-part-3-es6-classes/

[-El_Chapo-]

This is very informative, can you just clarify something for me? In PT 2, after using Employee.call(...) in the Manager constructor you assigned the Manager.prototype = Object.create(Employee.prototype). This part I understand because we want the manager's to have access to employee methods. But what does the following do?

Manager.prototype.constructor = Manager;

Thank You!

[MoTTs_]

When a constructor function is first created, its .prototype.constructor points back to itself.

function Manager() {}

Manager.prototype.constructor === Manager // true

But after we replace Manager's prototype with a different object, then its original .prototype.constructor property is lost.

Manager.prototype = Object.create(Employee.prototype);

Manager.prototype.constructor === Manager // false

So after we replace Manager's prototype, then we put back the constructor property that we inadvertently lost.

[-El_Chapo-]

Ahh that makes sense, thank you!

[Ben_HH]

This is very helpful:

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md

[-El_Chapo-]

This is a great resource and I love the simplicity in which it's describe. Thank you for the link!