Why do we need to set prototype object for inheritance when we can directly inherit parent properties if we call the constructor method using this in each child function?
function Employee() {
this.name = "";
this.dept = "general";
}
function Manager() {
Employee.call(this);
this.reports = [];
}
Manager.prototype = Object.create(Employee.prototype);
We can use inheritence even if we don't set prototype of Manager as Employee.
Usually prototypes are used to put functions/methods on them, not properties, because with properties you'll have a single property value shared between all object instances. Also, you may not need to set prototype for inheritance if you add methods inside a constructor. For example:
function Employee(name) {
this.name = "";
this.dept = "general";
this.reportName = function() {return this.name};
}
function Manager(name) {
Employee.call(this, name);
this.reports = [];
}
var manager = new Manager('Peter');
manager.reportName(); // Peter
However, adding methods/function inside object's constructor is inefficient, since every time a constructor is called an instance of a function is created. So usually, all methods, not properties, are allocated on prototype like this:
function Employee(name) {
this.name = "";
this.dept = "general";
}
Employee.prototype.reportName = function() {return this.name};
Now, in this case, simply calling a constructor won't be enough:
function Manager(name) {
Employee.call(this, name);
this.reports = [];
}
var manager = new Manager('Peter');
manager.reportName(); // throws an error
You need to set a prototype:
Manager.prototype = Object.create(Employee.prototype)
var manager = new Manager('Peter');
manager.reportName(); // 'Peter'
Related
So I'm learning prototype using javascript, and tried some code :
function Employee(name) { this.name= name; }
var m = new Employee("Bob");
var working= { isWorking: true };
Employee.prototype = working;
alert(m.isWorking);
Unfortunately, I get an undefined message, instead of the true value. Is there a reason to this result?
I have made several tests. I've concluded that reassigning the prototype object causes any previously created instances of the Employee class to be unable to access any properties found inside the newly assigned prototype. Is this accurate?
Changing the prototype will not affect an already created object. It will only affect the objects created based on that object.
There is a property __proto__ which could be used to change the prototype, but its implementation is not required. ES6 does define setPrototypeOf method to change the prototype, but since it's only in ES6 the support may vary.
First off, you have created an instance of Employee before you set the prototype, so that object will not have inherited the new prototype values.
Next, any objects created after you have set the prototype will inherit the new prototype object.
Lastly, the object will have the isWorking property, rather than a working property.
So to redo your example:
function Employee(name) { this.name= name; };
var m1 = new Employee("Bob");
var working= { isWorking: true };
Employee.prototype = working;
var m2 = new Employee("Sam");
alert(m1.isWorking); // undefined
alert(m2.isWorking); // true
Simple fix is to properly assign it.
function Employee(name) {
this.name = name;
}
var m = new Employee("Bob");
var working = {
isWorking: true
};
Employee.prototype.working = working;
alert(m.working.isWorking);
A better fix for MULTIPLE employees is to make a class, then create instances of that: play around with it here: http://jsfiddle.net/MarkSchultheiss/p6jyqbgv/1/
"use strict";
function makeClassStrict() {
var isInternal, instance;
var constructor = function(args) {
if (this instanceof constructor) {
if (typeof this.init == "function") {
this.init.apply(this, isInternal ? args : arguments);
}
} else {
isInternal = true;
instance = new constructor(arguments);
isInternal = false;
return instance;
}
};
return constructor;
}
var EmployeeClass = makeClassStrict();
EmployeeClass.prototype.init = function(employeeName, isWorking) {
var defaultName = 'notbob';
this.name = employeeName ? employeeName : defaultName;
this.working = !!isWorking;
};
// call this to get the name property
EmployeeClass.prototype.getName = function() {
return this.name
};
//note no "new" needed due to the makeClassStrict that does that
var m = EmployeeClass("Bob");
alert(m.working +":"+ m.name);
m.working = true;
alert(m.working +":"+ m.name);
var notbob = EmployeeClass("Charlie",false);
alert(notbob.working +":"+ notbob.name);
alert(notbob.getName()+ m.getName());
You cannot override the entire prototype property and expect already existing instances to work. JavaScript doesn't work that way. But you can loop through the prototype object and unset anything already set, then loop through your new object, and set it to something else.
function Employee(name) { this.name= name; }
var m = new Employee("Bob");
var working= { isWorking: true };
for(var j in Employee.prototype){delete Employee.prototype[j];}//unset all properties, the same as setting to {}
for(j in working){Employee.prototype[j]=working[j];}//set the properties
alert(m.isWorking);
My question is not about the difference between object's members and prototype members. I understand that. I think it is similar like C# object members and static members on the class.
My question is about difference between members on constructor function and on prototype object. Comparing to C# they both are "static". So what is the difference? I only observed, that prototype members can be called the same way on instances directly, or on Constructor.prototype. The constructor function members can be called only on constructor function.
When to use which approach?
To illustrate this, imagine I need count of Persons.
Example using constructor function members:
function Person () {
Person.countOfCreatedPersons = (Person.countOfCreatedPersons || 0) + 1;
}
Person.Count = function () {
return Person.countOfCreatedPersons;
}
var p = new Person();
alert(Person.Count());
Example using prototype members:
function Person () {
Person.prototype.countOfCreatedPersons = (Person.prototype.countOfCreatedPersons || 0) + 1;
}
Person.prototype = {
Count: function () {
return this.countOfCreatedPersons;
}
}
var p = new Person();
alert(Person.prototype.Count()); // or p.Count()
When you add a property to the prototype of an object, every object that inherits from that prototype has the property:
function Ob(){};
Ob.prototype.initialised = true;
var ob1 = new Ob();
alert(ob1.initialised); //true!
alert(Ob.initialised); //undefined;
If you add it to the constructor, is like a static property. Instances won't have acces to them.
function Ob2(){};
Ob2.initialised = true;
var ob2 = new Ob2();
alert(ob2.initialised); //undefined
alert(Ob2.initialised); //true
Besides, if you add a method to the prototype, the this variable inside the method will point to your object (the instance of the class you've created with new). This is not true for class methods:
function Obj() {
this.value = 1;
}
Obj.prototype.getValue = function() {
return this.value;
};
Obj.getValue = function() {
return this.value;
};
var ob3 = new Obj();
alert(ob3.getValue()); //'1'!
alert(Obj.getValue()); //undefined!
Hope this explains.
I am having trouble combining private/public methods along with inheritance in Javascript. I think it is just a misunderstanding on my part and hopefully an easy resolution.
Here is what I have:
RB = {};
RB.Fruit = function() {
// Public
this.getType = function() {
return "FRUIT";
}
}
RB.Orange = function() {
// Private
function makeOrangeJuice() {
console.log("Orange has been squeezed.");
}
// Public
return {
getName : function() {
return "Orange";
}
}
}
RB.Orange.prototype = new RB.Fruit();
var o = new RB.Orange();
console.log(o.getType());
When I run this code I receive the error "Uncaught TypeError: Object # has no method 'getType'". I know that it has to do with using the "return" within the class functions (since moving the getName method out of the "return" block allows it to work), but I'd like to continue to be able to declare private/public methods within classes.
How do I modify this to allow RB.Orange to access the RB.Fruit.getType function?
Thanks!
In JavaScript, a constructor call implicitly returns the newly-constructed instance, but the constructor can override that default behavior by explicitly returning a different object. For example, if you define a "constructor" Foo like this:
function Foo() {
return new Date();
}
then the statement foo = new Foo() will set foo to a new Date, not a new Foo.
If I understand correctly what you want, you just need to change this:
return {
getName : function() {
return "Orange";
}
}
(whereby your "constructor" returns a completely fresh object, with only a getName method, and no relation to the object under construction) to this:
this.getName = function() {
return "Orange";
};
(whereby it adds a getName method to the object under construction, and still allows that object to be returned).
The main problem
When you return a non-primitive value from a constructor function, that non-primitive value is returned rather than the default returned instance you would expect when invoking it with the new keyword.
E.g.
function A() { return {}; }
new A() instanceof A; //false
Therefore you could simply change your code to something like:
RB.Orange = function() {
// Private
function makeOrangeJuice() {
console.log("Orange has been squeezed.");
}
this.getName = function () {
return 'Orange';
};
//priviledged function which uses a private member
this.someOtherFunction = function () {
makeOrangeJuice();
};
};
Some inefficiencies in your code
Why not using the prototype?
Functions that aren't priviledged should not be declared within the constructor function. In other words, functions that do not access private variables should not be created in the constructor function because they do not have to and it's extremely inefficient to do so. Why? Because a new function is being created everytime the constructor is called.
Instead you should make use of the Constructor.prototype to share your public functions between all instances.
E.g.
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function () {
console.log('My name is ' + this.name);
};
new Person('Foo Bar').sayName();
Use Object.create rather than new for inheritance when possible.
Most inheritance patterns using the new keyword were done this way because the language was lacking another way of setting up the prototype chain of an object, but now that we have Object.create, your should use it. Using the new keyword for inheritance the way you did has some undesired side-effects like running the constructor function. There are ways to avoid these side effects by using an intermediate empty function but why not simply use Object.create?
E.g. (based on the above example)
function BadPerson(name) {
//call parent constructor
Person.call(this, name + ' the bad');
}
BadPerson.prototype = Object.create(Person.prototype);
BadPerson.prototype.constructor = BadPerson; //fix constructor
Private functions can also be shared!
Note that private functions that do not access private variables can also be shared. You can make use of the module pattern to create a scope for them.
E.g.
var Person = (function () {
//private function used in a functionnal style
function _validateName(name) {
console.log('Validating the name in functionnal style');
}
//private function used in an OO style
function _validateNameOO() {
console.log('Validating the name in a OO style');
}
function Person(name) {
this.name = name;
}
Person.prototype.validateNameBothWays = function () {
_validateName(this.name);
_validateNameOO.call(this);
};
return Person;
})();
new Person().validateNameBothWays();
The following shows how you could implement shared private members and where to put the priviliged methods (methods that can access the shared privates);
I never found much use for this pattern and usually indicate a private being private with the name _aPrivate as Phillip already explained in his answer.
For an introduction on constructor functions, prototype, inheritance and the value of this click here.
RB = {};
RB.Fruit = function() {
}
// Public
RB.Fruit.prototype.getType = function() {
return "FRUIT";
};
RB.Orange = function() {
//inherit instance specific values of Fruit (there are none but there might be)
RB.Fruit.apply(this,arguments);
};
//inherit shared members from the prototype of Fruit
RB.Orange.prototype = Object.create(RB.Fruit.prototype);
//repair constructor to be Orange instead of Fruit
RB.Orange.prototype.constructor = RB.Orange;
//shared privates and privileged methods (methods that can access the privates)
// go in the following IIFE function body.
(function(){
//private version of makeOrangeJuice
var makeOrangeJuice = function () {
//the value of 'this' here isn't the Orange instance
//if you need it then pass it with the public version of
//makeOrangeJuice or use makeOrangeJuice.call(this) in the
//public version
console.log("Orange has been squeezed.");
};
//public version of makeOrangeJuice
RB.Orange.prototype.makeOrangeJuice=function(){
//call private makeOrangeJuice function
makeOrangeJuice();
}
}());
//non privileged member, in getName the private version of makeOrangeJuice
//doesn't exist you can call the public version with this.makeOrangeJuice
RB.Orange.prototype.getName = function() {
return "Orange";
};
var o = new RB.Orange();
console.log(o.getType());
o.makeOrangeJuice();
You need to assign the functions to the prototype of your objects, if you want them to be inherited.
RB = {};
RB.Fruit = function() {};
RB.Fruit.prototype.getType = function() {
return 'Fruit';
};
RB.Orange = function() {};
RB.Orange.prototype = new RB.Fruit();
RB.Orange.prototype.getName = function() {
return 'Orange';
};
If you really need to use privates, and can't just label things as private using conventions like the _name, then you'll need to move the functions that will use the privates into the constructor with the private members.
If they're not instance specific, you can (and should) wrap this whole thing with an immediate function.
(function() {
// All previous code here
window.RB = RB;
}());
Here is one way that you could do it:
var RB = {};
RB.Fruit = function() {
// Public
this.getType = function() {
return "FRUIT";
}
}
RB.Orange = function() {
// Private variable
var fruit = new RB.Fruit();
// Private function
function makeOrangeJuice() {
console.log("Orange has been squeezed.");
}
// Public object with accessor
return {
getName : function() {
return "Orange";
},
getType: fruit.getType
}
}
var o = new RB.Orange();
console.log(o.getType());
try this code.
RB = {};
RB.Fruit = function() {
// Public
this.getType = function() {
return "FRUIT";
}
}
RB.Fruit.prototype.getType = function() {
return "FRUIT";
};
RB.Orange = function() {
RB.Fruit.call(this);
// Private
function makeOrangeJuice() {
console.log("Orange has been squeezed.");
}
this.getName = function() {
return "Orange";
};
this.getJuice = function(){
makeOrangeJuice();
};
};
var o = new RB.Orange();
//calling the super-call's function
console.log(o.getType());
//public function
o.getJuice();
//trying to access private function
o.makeOrangeJuice();
For more detail on the code ojbect oriented javscript plz check below link
http://mckoss.com/jscript/object.htm
Let's say I have Player object:
var player = function(name) {
this.handlers = {};
}
player.prototype.on = function(event, callback) {
if (!this.handlers[event]) {
this.handlers[event] = [];
}
this.handlers[event].push(callback);
}
It works great, I can create players and each will have its own set of handlers. Now suppose I need to inherit from player:
var testPlayer = function(name) {
this.name = name;
};
testPlayer.prototype = new player();
Now when I create testPlayer's, each of them share the same handlers property:
var adam = new testPlayer('Adam');
adam.on('test', function(){});
var eve = new testPlayer('Eve');
// eve.handlers == {'test':<function>}
What am I missing here? I understand than every testPlayer's prototype is the same new player object I create when describing child class. But is there some way for all testPlayers to have their own set of handlers?
That sure looks strange for those used to classical inheritance, but it's how prototypal inheritance works. To have a separate handlers object per instance, you need to specify one on the child constructor. That will shadow the prototype's property with the same name:
var testPlayer = function(name) {
this.name = name;
this.handlers = {};
};
testPlayer.prototype = new player();
Another solution would be to create this shadowing property on-demand, from your on method:
player.prototype.on = function(event, callback) {
// Check for a handlers property on the instance
if(!this.hasOwnProperty('handlers') {
this.handlers = {};
}
if (!this.handlers[event]) {
this.handlers[event] = [];
}
this.handlers[event].push(callback);
}
Interesting fact
This is only a problem if you're modifying properties of an object (or array) on the prototype. If you try to assign to properties that live on the prototype, a local shadowing property will be created automatically (you can't assign to prototype properties from instances).
The problem here is that handlers is a property that was added in the constructor, so when you do
testPlayer.prototype = new player();
you're adding every property of a brand new player object to testPlayer.prototype, and that includes handlers.
So, there's a handlers property in every testPlayer object, and when you add a property to handlers you're adding the property to the object in the prototype, and not of the testPlayer object.
In short, when calling the on method you're adding a property to testPlayer.prototype.handlers, not adam.handlers or eve.handlers.
To be safe, define:
var testPlayer = function(name) {
this.name = name;
this.handlers = {};
};
I have some simple OO code I've written that I'm playing with:
//define a constructor function
function person(name, sex) {
this.name = name;
this.sex = sex;
}
//now define some instance methods
person.prototype.returnName = function() {
alert(this.name);
}
person.prototype.returnSex = function() {
return this.sex;
}
person.prototype.talk = function(sentence) {
return this.name + ' says ' + sentence;
}
//another constructor
function worker(name, sex, job, skills) {
this.name = name;
this.sex = sex;
this.job = job;
this.skills = skills;
}
//now for some inheritance - inherit only the reusable methods in the person prototype
//Use a temporary constructor to stop any child overwriting the parent prototype
var f = function() {};
f.prototype = person.prototype;
worker.prototype = new f();
worker.prototype.constructor = worker;
var person = new person('james', 'male');
person.returnName();
var hrTeamMember = new worker('kate', 'female', 'human resources', 'talking');
hrTeamMember.returnName();
alert(hrTeamMember.talk('I like to take a lot'));
Now this is all well and good. But I'm confused. I want to include namespacing as part of my code writing practice. How can I namespace the above code. As it is now I have 2 functions defined in the global namespace.
The only way I can think to do this is to switch to object literal syntax. But then how do I implement the pseudo-classical style above with object literals.
You could for example do following:
var YourObject;
if (!YourObject) {
YourObject = {};
YourObject.Person = function(name, sex) {
// ...
}
YourObject.Person.prototype.returnName = function() {
// ...
}
// ...
}
You don't have to use object literals, at least, not exclusively.
Decide on the single global symbol you'd like to use.
Do all your declaration work in an anonymous function, and explicitly attach "public" methods as desired to your global object:
(function(global) {
// all that stuff
global.elduderino = {};
global.elduderino.person = person;
global.elduderino.worker = worker;
})(this);
I may not be completely understanding the nuances of your issue here, but the point I'm trying to make is that Javascript makes it possible for you to start with your symbols being "hidden" as locals in a function, but they can be selectively "exported" in various ways.