What's the difference between the following two ways of implementing class inheritance in JavaScript?
function Super () {
}
function Sub() {
}
Sub.prototype = new Super();
vs.
Function.prototype.inherits = function inherits(ParentClass) {
function Surrogate () {};
Surrogate.prototype = ParentClass.prototype;
this.prototype = new Surrogate();
}
Specifically, for the second example using a surrogate function, why can't we just use:
Function.prototype.inherits = function inherits(ParentClass) {
this.prototype = new ParentClass();
}
I thought that by calling new on the ParentClass() and setting it to this.prototype, the this.prototype then points to ParentClass.prototype, hence inheriting from the latter.
Specifically, for the second example using a surrogate function, why can't we just use [...]
The Surrogate way is basically a shim for Object.create, the modern practice is
Sub.prototype = Object.create(Super.prototype);
and if you need to invoke the constructor of Super on your instance,
function Sub() {
// an instanceof check here
Super.apply(this);
// construct Sub as desired
}
The advantage of not having an instance of Super as the prototype of Sub is that we have better control over instances of Sub and don't have weird bugs resulting from unexpected shared values,
Consider the following
function Foo() {
this.bar = [];
}
function Fizz() {}
Fizz.prototype = new Foo();
var a = new Fizz(),
b = new Fizz();
a.bar.push('Hello world!');
// What is b.bar?
b.bar; // ["Hello world!"], we are sharing with `a`
vs
function Foo() {
this.bar = [];
}
function Fizz() {
Foo.apply(this);
}
Fizz.prototype = Object.create(Foo.prototype);
var a = new Fizz(),
b = new Fizz();
a.bar.push('Hello world!');
// What is b.bar?
b.bar; // [], `b` has some privacy at last
Related
this is prototypal model in javascript.
unlike use constructor function with new keyword in this pattern we are using
existing object to create a new object as shown below
var answerprototype = {
name:'ss',
get:function fn1()
{
return "--";
}
}
var lifeanswer = Object.create(answerprototype);
this is how implement private ,public members in javascript using classical pattern
function Restaurant()
{
//private varible
var myPrivateVar = 'aaa';
//public variable
this.myPublicVar = 'bbbb'
//private method
// Only visible inside Restaurant()
var private_stuff = function()
{
return "private metho";
}
//public method
// use_restroom is visible to all
this.use_restroom = function()
{
return "public method"
}
}
//create object
var r1 = new Restaurant();
r1.myPrivateVar //return undefined
r1.myPublicVar //return "bbbb"
r1.private_stuff() //error
r1.use_restroom() //return "public method"
this is how implement static members in javascript using classical pattern
function Shape(shapeName)
{
//instance field
this.ShapeName = shapeName;
//static field
Shape.Count = ++Shape.Count;
//static method
Shape.ShowCount = function()
{
return Shape.Count;
}
}
var shape1 = new Shape("circle");
var shape1 = new Shape("rectangle");
var shape1 = new Shape("Triangle");
Shape.ShowCount(); //return 3
i want to implement static members and private ,public members in javascript using prototypal pattern(not using new keyword with constructor function)
how to do it
In JavaScript, private doesn't mean what you think it means. You have to create a closure which is where you trap your "private" values.
Using a function is the traditional way to create a closure
function makeProto(chainTo) {
const secret = 'foo';
return Object.assign(Object.create(chainTo || null), {
get hello() {return secret;}
});
}
let fizz = makeProto();
fizz.hello; // "foo"
Object.prototype.hasOwnProperty.call(fizz, 'hello'); // true
With ES6, you can use the block-scoped let or const in combination with the function scoped var to achieve something similar
;{
let foo = 'bar';
var obj = {
get baz() {return foo;}
};
}
obj.baz; // "bar"
foo; // ReferenceError
Please remember that as soon as you inherit from one of these objects, all descendant objects will share the same references to these values, not create new ones
I wrote ;{ /* ... */ } so if you try the code in your console it doesn't attempt to interpret this pattern as an Object literal, but instead a code block. In production the initial ; is not necessary.
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/
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
Given simple JS inheritance, what's the practical difference in the base function between these two examples? In other words, when should a person choose to define a function on "this" instead of on the prototype (or the other way around)?
For me the second example is easier to digest, but how much more is there to this?
function defined on this:
//base
var _base = function () {
this.baseFunction = function () {
console.log("Hello from base function");
}
};
//inherit from base
function _ctor() {
this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);
function defined on prototype:
//base
var _base = function () {};
_base.prototype.baseFunction = function () {
console.log("Hello from base function");
}
//inherit from base
function _ctor() {
this.property1 = "my property value";
};
_ctor.prototype = new _base();
_ctor.prototype.constructor = _ctor;
//get an instance
var instance = new _ctor();
console.log(instance.baseFunction);
Functions on the prototype are only created once and shared between each instance. Functions created in the constructor are created as new objects for each new object created with the constructor.
As a general rule functions should be on the prototype since they will generally not be modified for different objects of the same type, and this has a slight memory/performance benefit. Other properties like objects and arrays should be defined in the constructor, unless you want to create a shared, static property, in which case you should use the prototype.
Its easier to see the distinctions with normal objects or arrays rather than functions
function Foo(){
this.bar = [];
}
var fooObj1 = new Foo();
var fooObj2 = new Foo();
fooObj1.bar.push("x");
alert(fooObj2.bar) //[]
as opposed to:
function Foo(){
}
Foo.prototype.bar = []
var fooObj1 = new Foo();
var fooObj2 = new Foo();
fooObj1.bar.push("x");
alert(fooObj2.bar) //["x"]
I am curious as what else the new keyword does in the background apart from changing what the this scope refers too.
For example if we compare using the new keyword to make a function set properties and methods on an object to just making a function return a new object, is there anything extra that the new object does?
And which is preferred if I don't wish to create multiple objects from the function constructor
var foo2 = function () {
var temp = "test";
return {
getLol: function () {
return temp;
},
setLol: function(value) {
temp = value;
}
};
}();
var foo = new function () {
var temp = "test";
this.getLol = function () {
return temp;
}
this.setLol = function(value) {
temp = value;
}
}();
The firebug profiler tells me using the new keyword is slightly faster (2ms instead of 3ms), on large objects is new still significantly faster?
[Edit]
Another matter is on really large object constructors is having a return at the bottom of the function (It will have a large amount of local functions) or having a few this.bar = ... at the top of the function more readable? What is considered a good convention?
var MAIN = newfunction() {
this.bar = ...
// Lots of code
}();
var MAIN2 = function() {
// Lots of code
return {
bar: ...
}
}();
Quoting Douglas Crockford from the Good Parts book (page 47), to answer the title of this question:
If the new operator were a method instead of an operator, it could be implemented like this:
Function.method('new', function () {
// Create a new object that inherits from the
// constructor's prototype.
var that = Object.create(this.prototype);
// Invoke the constructor, binding -this- to
// the new object.
var other = this.apply(that, arguments);
// If its return value isn't an object,
// substitute the new object.
return (typeof other === 'object' && other) || that;
});
The Function.method method is implemented as follows. This adds an instance method to a class (Source):
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
Further reading:
Mozilla Dev Center: Object.create()
Mozilla Dev Center: Function.apply()
Douglas Crockford: Classical Inheritance in JavaScript
Read the spec. Sections 11.2.2 and 13.2.2 are relevant and aren't too tricky to understand (note that the latter two links are to non-official HTML-ified version of the spec).
In summary, if you have a function f that returns an object, the only observable difference that calling it with new will make is that the this value will be different, and that calling it with new may be slower, since it involves additional steps of creating an object and assigning it a few properties.