如何使用OLOO模式在JavaScript中实现继承

Question

I am trying to achieve inheritance of this code snippet

 function parent(name) { this.name = name; } function child(childname) { parent.call(this, "cde"); this.childname = childname; } var p1 = new parent("abc"); child.prototype = Object.create(parent.prototype); var p2 = new child("def"); console.log(p1.name); console.log(p2.name); 

Using OLOO pattern OLOO pattern

Here is my try for it

 function person(name) { this.name = name; } var p1 = new person("abc"); var p2; p2 = Object.create(person); console.log(p2.name); p2.childname = "def"; 

While creating p2 object here im not sending name to it. How can send name to it while creating p2 object .

Can some one please explain is this the right approach to achieve inheritance using OLOO pattern

Thanks

Answer 1

Both the current answers posted here are "correct" in that they appropriately apply object-only prototype linkage (without constructors). I would make two points of clarification, though:

1. I would never recommend "shadowing" of properties (or methods, for that matter), meaning having both p1 and p2 objects having a .name property on them. This is one of the most common sources of confusion, IME, with JS prototypes. I always recommend using different property names on each object in a prototype chain.

2. OLOO is not just about wiring up a traditional "inheritance" hierarchy without using constructors, as the OP appears to be doing. That's valid, but a very reduced, simplified view of OLOO. OLOO is really intended to build off that capability to model software differently than with "classes". The point of OLOO is so that you set up two peer objects where one can delegate to the other (and vice versa, if you like) so they can virtually compose during the call-time of a method; aka: Behavior Delegation. Consult Chapter 6 of my "YDKJS: this & Object Prototypes" book for more info.

Answer 2

There are some misconceptions both in the question and answer, so I feel the need to clarify first a few things:

• There is no inheritance in the patterns you are referring to in js : in the OLOO pattern but also in the "fake" Class object pattern. The reason is inheritance implies copying (you make new copies from the class everytime you call the constructor) and in both patterns or whenever you use new or Object.create() it's all about linking . In your case, what you are trying to do is to link two objects so that one works as a "fallback" for the other (through the [[prototype]] mecanism). And I repeat, this is NOT inheritance.
• Also, there are no "constructors" in js, only "constructor calls" (which are made using a function + new)... From chapter 4 of this & Object prototypes book of Kyle Simpson's You Don't Know JS series :

In the above snippet, it's tempting to think that Foo is a "constructor", because we call it with new and we observe that it "constructs" an object.

In reality, Foo is no more a "constructor" than any other function in your program. Functions themselves are not constructors. However, when you put the new keyword in front of a normal function call, that makes that function call a "constructor call". In fact, new sort of hijacks any normal function and calls it in a fashion that constructs an object, in addition to whatever else it was going to do.

• Also it is not necessary to use Object.prototype in the OLOO pattern as any object is normally "falling back" on it as you can see on the copy of page 127 of Kyle Simpson's YDKJS book.

Finally, here is my answer (though it is not easy to understand what you really want to achieve...):

 // a "parent" object with an "init" function let Parent = { define: function (name) { this.name = name; } }; // a child object with another "init" function let Child = Object.create(Parent); // different name for init() : useful to differentiate with Parent Child.create = function (childname) { this.define("cde"); this.childname = childname; }; let p1 = Object.create(Parent); p1.define("abc"); let p2 = Object.create(Child); p2.create("def"); console.log(p1.name); console.log(p2.name); 

Answer 3

Using OLOO, you'd go for

var p1 = Object.create(Object.prototype);
p1.name = "abc";

var p2 = Object.create(p1);
p2.name = "cde";
p2.childname = "def";

or if you prefer

var p1 = {
   name: "abc"
};

var p2 = Object.assign(Object.create(p1), {
    name: "cde",
    childname: "def"
});

Notice that OLOO does absolutely not use constructors. If you want to avoid repetition, use factory function that simply return the above expressions and are parameterised to your liking.