We Keep Coding

Add prototype to existing object

I'd like to do some inheritance using Javascript. The problem is I don't know how to keep the A class prototype on the inherited object.
Here is my code :
function Base() {
this.attribute1 = null;
}
Base.prototype = {
baseFunction: function() {}
};
function SubBase()
{
Base.call(this); // Constructor call
this.baseFunction();
this.subBaseFunction();
}
SubBase.prototype = Base.prototype;
SubBase.prototype = {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
}
With that way I erase Base.prototype but I don't want to.
I tried SubBase.prototype.__proto__ = Base.prototype; but it is apparently too slow.
I know I can do (but too long to write and not that clean for me) :
SubBase.prototype.subBaseFunction = function() {};
SubBase.prototype.subBaseOtherFunction = function() {};
How can I do it/write it better ?

First, you aren't actually inheriting from Base... you're just adding functions to it.
SubBase.prototype = Base.prototype;
SubBase.prototype.foo = true;
alert(Base.prototype.foo);
To set up the inheritance chain, you need to assign an instance of base as the prototype:
SubBase.prototype = new Base();
Then you augment it, just like you have in your post:
SubBase.prototype.newFunction = function () { };
One weakness of doing inheritance this way is that your base class constructor can't receive arguments. If you need that, then you need to use Object.create to set up the inheritance, and manually call your base class constructor:
function Base(x) {
alert(x);
};
Base.prototype.baseFunction = function () {
alert('called method from base class');
};
function SubBase(x) {
Base.call(this, x);
};
SubBase.prototype = Object.create(Base.prototype);
var instance = new SubBase(1);
instance.baseFunction();

Instead of this:
SubBase.prototype = Base.prototype;
SubBase.prototype = {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
}
you need to add each additional method onto the existing prototype object to avoid overwriting the Base.prototype you just put there:
// establish the prototype we're inheriting from
// make a new object into the prototype so when we change it, it
// doesn't change the original
SubBase.prototype = Object.create(Base.prototype);
// now add more methods onto the inherited prototype
SubBase.prototype.subBaseFunction = function() {};
SubBase.prototype.subBaseOtherFunction = function() {};
Note: you also don't want to just assign Base.prototype because then when you change SubBase.prototype, you'll actually be changing both objects (an object assignment is just a reference). So here, I'm using Object.create(Base.prototype) to create a copy of that prototype.
Many libraries support some sort of extend() function that copies properties from one object to another. That lets you define a separate object of methods and then "add" it to the existing prototype, but this functionality isn't built-in to plain javascript.
For example in jQuery, you can do this:
// establish the prototype we're inheriting from
SubBase.prototype = Object.create(Base.prototype);
jQuery.extend(SubBase.prototype, {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
});
Or, updated in 2016, ES6 contains an Object.assign() function that will copy properties from one object to another:
Object.assign(SubBase.prototype, {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
});
Or, you can make your own function that will copy properties from one object to another in only a few lines of code.
Or, the same code in plain javascript:
// copy properties from src to target
function copyProperties(target, src) {
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
target[prop] = src[prop];
}
}
return(target);
}
// establish the prototype we're inheriting from
SubBase.prototype = Object.create(Base.prototype);
copyProperties(SubBase.prototype, {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
});
Here's the style I typically use:
function Base() {
this.attribute1 = null;
}
Base.prototype = {
baseFunction: function() {}
};
function SubBase()
{
Base.apply(this, arguments); // Constructor call with arguments
}
(function() {
var proto = SubBase.prototype = Object.create(Base.prototype);
proto.constructor = SubBase;
proto.subBaseFunction = function() {
// code here
};
proto.subBaseOtherFunction = function() {
// code here
};
})();

You could use jQuery.extend() for this:
SubBase.prototype = {
subBaseFunction: function() {},
subBaseOtherFunction: function() {}
};
$.extend(SubBase.prototype, Base.prototype);
See: http://jsfiddle.net/dd6UC/
jQuery.extend() docs: http://api.jquery.com/jquery.extend/

Javascript prototype on properties

I'd like to have an object with multiple levels of methods and properties. The top level will have properties and methods. Some of these properties will then act as name-spaces for second level methods and properties.
e.g.
//first level methods
base.doStuff();
base.doMore();
//second level methods
base.level2.doStuff();
Doing the first level is straight forward:
function Base(foo) {
this.foo = foo;
}
Base.prototype.doStuff = function () {
console.log(this.foo);
}
Base.prototype.doMore = function () {
console.log(this.foo);
}
base = new Base("bar");
base.doStuff();
Is it possible to get a second level, where in the function expression the "this" keyword points back to the Base constructor?

It's much easier to do this without prototypes:
function Base() {
var base = this;
base.level2 = {
moreStuff: function() {
// use "base" instead of "this" here
}
};
}
This can be combined with either prototypical methods, as in your example, or methods defined directly on base in the constructor. The downside of this is that you are creating the method functions every time you instantiate a new object, so you miss some of the shared-prototype goodness of standard prototypical methods.
You could create a new prototype-based object to be your level2:
function Level2() {}
Level2.prototype.moreStuff = function() {
// do stuff
}
function Base() {
this.level2 = new Level2();
}
But the methods of base.level2 won't be bound to base unless you bind them explicitly. Various libraries have bind support (e.g. Underscore's _.bind), or you can do it in plain JS:
function Base() {
var base = this;
base.level2 = new Level2();
base.level2.moreStuff = function() {
return Level2.prototype.moreStuff.apply(base, arguments);
}
}
You could further simplify here, but you're always going to have to make new methods bound in one way or another, because JS is never going to assign this in base.level2.moreStuff() to base without explicit binding - so in most cases the first option is the easiest and cleanest.
But really, is it worthwhile just for namespacing? If there's no functional value, it's a lot harder than simply calling your methods level2MoreStuff(), etc.

Well,
base.doStuff();
is calling doStuff in context of base. It is the same as
base.doStuff.call(base);
You can call and apply any function, for overriding this:
var base = new Base();
var someFun = function () {
console.log (this === base); // true
};
someFun.call(base);
Further anonymous example:
var anObj = {
method0: function () {
console.log (this === anObj); // true
}
};
anObj.method1 = function () {
console.log (this === anObj); // true
};
anObj.method0();
anObj.method1();
So the "second level" points this to level2, not to the "first level" object.

This is a really bad idea, but here goes:
function Base() {
this.name = 'Base';
this.level2 = new Level2(this);
}
Base.prototype.whatsMyName = function(){
alert(this.name);
};
function Level2(base) {
this.name='Level2';
for(var func in Level2.prototype) {
this[func] = Level2.prototype[func].bind(base);
}
}
Level2.prototype.whatsMyName = function(){
alert(this.name);
};
var b = new Base();
b.whatsMyName(); //Base
b.level2.whatsMyName(); //Also Base
You can see it running here: http://jsfiddle.net/zLFgd/1/

new to javascript, trying to understand function returning a function

I am trying to understand what is going on here:
if (!Object.create) {
Object.create = (function () {
var F = function(){};
return function (o) {
if (arguments.length !== 1) {
throw new Error('Object.create implementation only accepts one parameter.');
}
F.prototype = o;
return new F();
};
}());
}
what does F.prototype mean... How does returning a function work

These are two separate questions. The concept of a prototype and what it means is separate from the concept of returning functions. I will do my best to try and explain.
What does F.prototype mean?
Javascript does not support inheritance in the classical sense, but rather uses prototype inheritance to pass object properties from one function to another.
All Javascript objects contain a prototype field by default. The prototype field is always initially set to the base Object object. (You can create a new instance of Object by doing
var x = new Object() or by doing var x = {}.) You can create objects that set the prototype to another object thereby gaining access to their methods and properties that are placed on the prototype.
Let's walk through an example to illustrate.
Consider you create a constructor to create a Bird object.
function Bird(name) {
var me = this;
this.name = name;
this.flying = false;
this.fly = function() { me.flying = true; };
}
Bird.prototype.fly = function() { this.flying = true; }
Bird.prototype.land = function() { this.flying = false; }
If we look at the details of this object (which you can do using console.dir(obj), or by using Chrome developer tools):
Now consider you want to create another bird object that implements the Object Bird. You would do something like this.
function Duck(name) {
this.name = name;
this.quack = function() {
console.log("quack");
}
}
If you look at the details of this object you see:
Now if you want to make the duck fly, you do not have a method on it yet. You need to set the prototype of Duck to be Bird. You do that by doing something like this:
function Duck(name) {
this.name = name;
this.quack = function() {
console.log("quack");
}
}
Duck.prototype = new Bird();
Now when you look at the details of the object you will see that the prototype is now set to bird.
In short prototypes are used to provide code reuse among objects. Programmers coming from object oriented backgrounds can use prototypes to provide the same mechanisms as inheritance. Mozilla has a good article that goes into more depth.
How does returning a function work?
Javascript is a functional programming language. One of the principles of the functional programming paradigm is the existence function as first class objects. Among other things this means that functions are treated the same as any other object.
A function returning a function means nothing different then a function that returns a string.
function getString() {
return "I am a string";
}
You can use the result of this function in whatever way you choose. A function that returns a function is the same way.
function getFunctionToGetSomethingImportant() {
return function() {
return "I am something important";
}
}
Now when you want to get a function that returns a function that does something important you can do this:
var x = getFunctionToGetSomethingImportant();
x();
Despite these use cases having little value, using functions as first class objects is incredibly valuable. Functions can be treated like other objects which means they can be passed into other functions as parameters (a concept called higher order functions).
function filter(list, function(element) {
return element < 0;
});
The function filter takes as its second parameter a function that takes an element parameter. An implementation of filter would loop through each element in list and apply the function given as the second paramater. This is one example of many important use cases of functions as first class objects. This wiki article contains more information.

Initialy F is empty function and new F() returns empty object, i.e {}
after
F.prototype = o
F as class gets properties of the object o
for example if o={a:1}, then new F() returns {a:1}
this is the same like you define F as
F = function(){
this.a = 1;
}
but in your example you can create new object based on the class of object o passed to the create() function

function dostuff() {
return function () {console.log('hello')}
}
f = dostuff();
f();
--output:--
hello
.
Array.prototype.greet = function() {console.log('hello')};
[1, 2, 3].greet();
--output:--
hello
.
function Dog(name) {
this.name = name;
this.speak = function() {console.log('Ruff, ruff!') };
}
mydog = new Dog("Joey")
console.log(mydog.name);
mydog.speak();
--output:--
Joey
Ruff, ruff!
.
function Dog() {
}
Dog.prototype.speak = function() {console.log("Ruff, ruff!")};
mydog = new Dog();
mydog.speak();
--output:--
Ruff, ruff!
.
function Dog() {
}
var obj = {
name: "Joey",
speak: function() {console.log("Ruff, ruff!")}
}
Dog.prototype = obj;
mydog = new Dog();
console.log(mydog.name);
mydog.speak();
--output:--
Joey
Ruff, ruff!
obj.jump = function() {console.log("Look at me jump!")};
mydog.jump();
--output:--
Look at me jump!
.
var F = function() {
};
var o = {
"greet": function() {console.log('hello')}
};
F.prototype = o;
f = new F();
f.greet();
--output:--
hello

Javascript prototype usage performance [duplicate]

This question already has answers here:
Defining methods via prototype vs using this in the constructor - really a performance difference?
(7 answers)
Closed 9 years ago.
I want to learn the advantages of using JavaScript prototype. Object prototype usage is increasing performance.
I want to see this by usage of memory.
Case-1
var Foo1 = function (name) {
this.name = name;
getFirstName = function() { return "name1"; };
getLastName = function() { return "name2"; };
};
for (var i = 0; i < 1000; i++) {
var foo1 = new Foo1();
}
Case-2
var Foo2 = function (name) {
this.name = name;
};
Foo2.prototype = {
getFirstName: function () { return "name1"; },
getLastName: function () { return "name2"; },
};
for (var i = 0; i < 1000; i++) {
var foo2 = new Foo2();
}
which case is using memory more than another?
Can I learn memory usage of cases?
What is the difference about memory usage of cases?

If you define a function or an object to belong to the prototype then it's shared by all instances and creating an object with new does not create it's own instance of the function/object. In this sense defining something to belong to the prototype uses less memory. The precise difference would be that case 1 (look at comments below because your definition is not proper) would create 1000 instances of each function. Case 2 (again look at the comments below) would create only 1 instance of each function.
However case 2 is not defining in the prototype. You're essentially redefining the prototype there. The correct usage would be:
function Foo2 (name) {
this.name = name;
};
Foo2.prototype.getFirstName = function () { return "name1"; };
Foo2.prototype.getLastName = function () { return "name2"; };
Your case 1 is also not correctly defined in terms of what you're trying to achieve because getFirstName and getLastName are not defined through this (the instance).

The second case is more memory-efficient and performant. When you define methods in the constructor then the same functions or methods are allocated for each object so the object consumes more memory. So define methods in the prototype-object then all objects share the same methods only once.
So my advice is that you define attributes (number,string...) in the constructor and methods or functions in the prototype-object like you did it in the second case.
By the way when you define an object this way:
var Foo1 = function (name) {
this.name = name;
getFirstName = function() { return "name1"; };
getLastName = function() { return "name2"; };
};
The method getFirstName and getLastName are properties of window, because you actually write this:
var Foo1 = function (name) {
this.name = name;
window.getFirstName = function() { return "name1"; };
window.getLastName = function() { return "name2"; };
};

Private member on prototype with multiple instances

is this possible?
We sure know how to emulate private members in javascript:
var Class = (function() {
var _private;
Class = function() {
_private = {};
};
Class.prototype.set = function(name, value) {
_private[name] = value;
};
Class.prototype.get = function(name) {
return _private[name];
};
return Class;
})();
The side effect of this pattern is that when I create two instances:
var instanceOne = new Class();
var instanceTwo = new Class();
then the private property is shared between:
instanceOne.set('test', 'me');
instanceTwo.get('test');
Is there some work around for this problem?
Regards

The standard way to have "private" members in JavaScript is to use local variables within the constructor and have anything that needs to access them defined as closures over the context of the call to the constructor, like this:
function Class() {
var privateValue = 0;
this.getPrivateValue = function() {
return privateValue;
};
}
Class.prototype.doSomething = function() {
// This function doesn't have access to `privateValue`
// except through `getPrivateValue`, even though
// it's accessible as a member of the instance
};
This has been described by many, probably most famously Douglas Crockford.
Note that this has the repercussion that each instance of Class gets its own copy of the getPrivateValue function, because each is a closure over a different call to the constructor (which is why it works). (This doesn't mean all the code of the function is duplicated, however; at least some engines — Google's V8 engine, used in Chrome and elsewhere for instance — allow the same code to be shared by multiple function objects which have different associated contexts.)
(Side note: I haven't used the name private because it's a reserved word. In ES3, it was a "future reserved word;" in ES5, it's only one in strict mode; details.)
I've used a simple variable above rather than an object to avoid making things look more complex than they are. Here's the way the would apply to your example:
function Class() {
var privateData = {};
this.get = function(name) {
return privateData[name];
};
this.set = function(name, value) {
privateData[name] = value;
};
}
Or if you still want to also have class-wide private data shared across instances:
var Class = function() {
var dataSharedAmongstInstances;
function Class() {
var privateDataForEachInstance = {};
this.get = function(name) {
return privateDataForEachInstance[name];
};
this.set = function(name, value) {
privateDataForEachInstance[name] = value;
};
}
return Class;
})();