I want to do the following in Javascript
function A(){
this.B = function() { ... };
this.C = function() { <<I need to call B() here>> } ;
};
I have read the following way of method overloading, but I want to know whether professional programmers would do it this way. I.e. if you would only do this as an exercise or experiment or would actually do this in production code.
function foo(a, b, opts) {
};
foo(1, 2, {"method":"add"});
foo(3, 4, {"test":"equals", "bar":"tree"});
Just call B() from inside C();
function A(){
B = function() {
// Do something here
}
C = function() { B(); }
};
Or, if you just want to create an alias
function A(){
B = function() {
// Do something here
}
C = B
};
The clean way would be :
var A = function() { };
A.prototype.B = function() { };
A.prototype.C = function() { this.B(); };
The prototype is just a static set of properties that is cloned inside every new instance you create.
The difference between what you're doing and this is that in your case, methods are created and added when you are in the "constructor" of the object, while with this method they already are properties of the object before you enter its "constructor", and are only parsed once (when you add them to the prototype) instead of being parsed everytime you create a new instance, which is faster.
I think, correct me if i'm wrong.
var A = function() {
// this scope is what i mean by "constructor".
};
Related
Function b is declared inside function a. So, i am trying to call function b outside function a. It is not getting called.
var a = function() {
alert("a");
var b = function() {
alert("b");
}
}
Output:-
function b called
Alert box with message b
You'd need to return b and use that. This will involve calling the function a to begin with, but then you'd have a function which you could call repeatedly to alert b:
var a = function() {
alert("a");
var b = function() {
alert("b");
}
return b;
}
var messageB = a();
messageB();
messageB();
First return that function and call it,
var a = function() {
alert("a");
var b = function() {
alert("b");
}
return b;
}
var b = a();
b();
Try to declare 'b' variable outside 'a' function:
var b;
var a = function() {
alert("a");
b = function() {
alert("b");
};
};
That way, you can access b from outside of a as it is declared outside of it. Before a was called the first time, it will be undefined though, so you can't call b before a. Additionally if you call a twice, the previous b will be overriden., as shown here:
var b;
var a = function(name) {
b = function() { alert(name); };
};
a("first version");
b(); // first version
a("second version");
b(); // second version
If you don't need any inner variables from a inside b, there is no reason to nest the functions though, in that case you should just have two independent functions:
var a = function() { alert("a"); };
var b = function() { alert("b"); };
As mentioned you can simply return function b. Functions in Javascript can be passed around like this, it's a very nice feature of a garbage collected language.
But you can go even better, what if you wanted to expose more than one function.
You can just return an object with methods attached.
function A() {
let value = 0;
return {
inc: () => ++ value,
dec: () => -- value,
show: () => console.log(value)
}
}
const a1 = A();
a1.inc(); a1.inc(); a1.show();
const b1 = A();
b1.inc(); b1.dec(); b1.dec(); b1.show();
Now the above looks very similar to what's called a class but it's not. One disadvantage to this is if you wanted to create thousands of instances, a class would be better as that can put it's methods on the prototype. But saying that, as has been found using React Hooks it's not really that bad then.
One big advantage of the above, is you don't have to get into the muddy world of this context of instances.
For completeness here is a class version.
class A {
value = 0;
inc() { ++ this.value; }
dec() { -- this.value; }
show() { console.log(this.value) }
};
const a1 = new A();
a1.inc(); a1.inc(); a1.show();
const b1 = new A();
b1.inc(); b1.dec(); b1.dec(); b1.show();
It was also said a simple solution is to make a and b both global, but the more you avoid the global the better, so if a and b have some common intent, using closures or even a class would be better.
or if you would need object approch
`var a = function() {
print("a");
this.b = function() {
print("b");
}
return this
}
a().b()`
All the other answer's are great enough, but just in case you may like this approach of directly calling inner function without returning that function.
You can simply wrap your inner function i.e b in your case, as a self invoking function like this,
var a = function() {
alert("a");
var b = (function() {
alert("b");
})()
}
Ref
can someone explain to me what I do wrong ?
I want to have a base Object (class) with standard functions and with B i want to overwrite standard functionality to be more specific, so i could change class B with C and have the same functions but underlying other code.
purpose of this all is that I need specific renderers if B or C does not have that function A should provide standard functionality.
in C# you have function overwrite stuff but i cant seem to figure out how it works in javascript.
thanks in advance.
var A = function () {
}
A.prototype = {
sup: function() {
console.log("sup");
},
doSome: function () {
console.log("doSomeA");
}
}
var B = function () {
A.call(this);
}
B.prototype = {
doSome: function () {
console.log("doSomeB");
}
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
var a1 = new B();
a1.doSome();
a1.sup(); // Not a function.
a1.sup(); // Not a function.
You're overwriting your prototype:
B.prototype = { ... }
B.prototype = Object.create(A.prototype);
That's exactly like overwriting any other variable - the latest applies.
And I learned this is the reliable pattern for inheritance:
function B() {
// Call super constructor
A.call(this);
}
// Clone inital properties and methods
B.prototype = Object.create(A.prototype);
// Extend the prototype
B.prototype.foo = "bar"
I'm kind of new to javascript. I'm so confused that javascript Objects!!
My code skeleton is bellow...
var jCanvas = new function(){
this.init = function(canvasID){
...
};
var DrawingManager = new function(){
drawInfos = []; // DrawInfo objects will be pushed into this
this.mouseState = MouseState.released;
...
};
function DrawInfo(bm, cl, id, x, y){
...
}
function Point(x, y){
...
}
var MouseState = new function(){
...
};
var Color = new function(){
...
};
var BrushMode = new function(){
...
};
};
I want jCanvas to be singleton class Object.
in jCanvas object, there are many singleton classes such as DrawingManager, MouseState, Color, BrushMode. And 2 more classes which are not singleton classes(Point, DrawInfo)
What I want is that, in DrawingManager, I want to access other classes and singleton class objects.
Problem is browser gives error that "MouseState is undefined".
I think I'm too familiar with Java, C# etc... I want my program to have good structure but this javascript make me so confused and don't know how to make good design pattern..
Please help me out..
To declare functions, don't use the new keyword. Only use it when creating instances of objects.
In JavaScript, you can declare a "class" like this (the body of the function is the constructor):
function MyClass (arg1) {
this.myClassProperty = arg1;
}
And then instantiate it:
var myObj = new MyClass();
If you want to create a singleton, the best method is to use an immediately invoked function:
var MySingleton = (function() {
var myPrivateFunction = function() { ... };
var myExportedFunction = function() { ... };
var myPrivateVar = 5;
return {
myExportedFunction: myExportedFunction
};
})();
Here, you create an anonymous function and immediately run it. It is kind of a more advanced concept though.
Or you can simply create an object:
var MySingleton = {
myProperty: 1,
myFunction: function() { ... },
...
};
Singleton classes in JavaScript make no sense. Either make a constructor ("class" for Java people) to instantiate multiple objects, or make an object. There is no point in making a constructor that you will only ever use once, then have the code to sanity-check whether or not you actually do use it only once. Just make an object.
The reason for the error is probably (but I might be wrong, I'm guessing about the rest of your code) the misunderstanding between var x = function ... and function name() ... forms. To whit:
var a = function() { console.log("a"); }
function b() { console.log("b"); }
a(); // a
b(); // b
c(); // c
d(); // TypeError: d is not a function
function c() { console.log("c"); }
var d = function() { console.log("d"); }
They are identical in effect, but they differ in whether they are hoisted to the top of the scope or not. var d is hoisted, just like function c() { ... } - so the variable d will exist, but will be undefined, since the assignment is not hoisted. Having both styles of function declarations is inconsistent unless you have a good reason for it; pick one of them and stick to it, is what I'd recommend.
If I need a object into another for use in a function, which is the best?
function A() {
this.alert = function () {
console.log(b.value);
}
this.alert2 = function () {
console.log(this.value);
}
}
function B() {
this.value = 'test';
}
var a = new A();
var b = new B();
A.prototype.b = b;
// Option 1
`a.alert();`
// Option 2
`a.alert2.apply(b);`
I believe option 2 is better because only use the object (b) in one function.
The prototype is much easier, but I'd use it the other way round:
function B() {
this.value = 'test';
}
B.prototype.alert = function() {
console.log(this.value);
}
var b = new B();
b.alert();
If you want to use a function/method of a different object, you should give it a parameter (instead of using an implicit global b variable like in your a.alert function):
var a = {
alert: function(x) {
console.log(x.value);
}
};
a.alert(b);
or inherit from it when you have a method, like:
var a = {
value: "a test",
alert: function() {
console.log(this.value);
}
};
// =============================
function B() {
this.value = 'test';
}
B.prototype.alert = a.alert; // mixin inheritance
var b = new B();
b.alert();
There isn`t a best option, its about what you have to do.
The first option by putting b in its prototype makes A to be more coupled to b.
The 2nd one you are changing its contests.. you need to know what the function does, if you don`t have the documentation you may pass an object wich doesnt has a property needed for the function, so that is not a good choice to make an api for example.
Algo wouldn`t it be happier to set this.alert to a function which receives a parameter?
It all depende on your needs...
function a () {
return "foo";
}
a.b = function () {
return "bar";
}
function c () { };
c.prototype = a;
var d = new c();
d.b(); // returns "bar"
d(); // throws exception, d is not a function
Is there some way for d to be a function, and yet still inherit properties from a?
Actually, it turns out that this is possible, albeit in a non-standard way.
Mozilla, Webkit, Blink/V8, Rhino and ActionScript provide a non-standard __proto__ property, which allow changing the prototype of an object after it has been created. On these platforms, the following code is possible:
function a () {
return "foo";
}
a.b = function () {
return "bar";
}
function c () {
return "hatstand";
}
c.__proto__ = a;
c(); // returns "hatstand"
c.b(); // returns "bar"; inherited from a
This might be of use to anyone who doesn't need to worry about cross-platform compatibility.
However, note that only the properties of an object can be inherited. For example:
var d = {};
d.__proto__ = a;
d.b(); // returns "bar"
d(); // throws exception -- the fact that d is inheriting from a function
// doesn't make d itself a function.
Short answer: not possible.
This line of your code:
var d = new c();
automatically assumes that d is an object. Unless c is a constructor of a builtin object, e.g., Function. But if c is already defined by the language, you cannot manipulate its prototype, and cannot "inherit" it from whatever you like. Well, in some interpreters you can, but you cannot do it safely across all interpreters — the standard says: "you doth not mess with standard objects or the interpreter will smite you!".
The builtin objects are "unique" and JavaScript does not provide ways to duplicate them. It is not possible to recreate String, Number, Function, and so on without resorting to incompatible trickery.
Based on a discussion on meta about a similar question I'm posting this answer here based on #alexander-mills original
This can now be done in a standards compliant way
First create an object which inherits Function
const obj = Object.create(Function.prototype); // Ensures availability of call, apply ext
Then add you custom methods and properties to obj
Next declare the function
const f = function(){
// Hello, World!
};
And set obj as the prototype of f
Object.setPrototypeOf(f,obj);
Demonstraction
const obj = Object.create(Function.prototype);
// Define an 'answer' method on 'obj'
obj.answer = function() {
// Call this object
this.call(); // Logs 'Hello, World'
console.log('The ultimate answer is 42');
}
const f = function() {
// Standard example
console.log('Hello, World');
};
Object.setPrototypeOf(f, obj);
// 'f' is now an object with an 'answer' method
f.answer();
// But is still a callable function
f();
Yes, it is possible if you use the __proto__ property Daniel Cassidy mentioned. The trick is to have c actually return a function that has had a attached to its prototype chain.
function a () {
return "foo";
}
a.b = function () {
return "bar";
}
function c () {
var func = function() {
return "I am a function";
};
func.__proto__ = a;
return func;
}
c.prototype = a;
var d = new c();
d.b(); // returns "bar"
d(); // returns "I am a function"
However, you'll need to do some more tweaking of the prototype chain if you want instanceof to return better results.
d instanceof c // true
d instanceof a // false
c instanceof a // false
Does it have to actually be a prototype chain? You can use a mixin pattern to make a function have all of the properties of a instead. You can even wrap it in a nice "new" syntax to fake it if you really want.
function a () {
return "foo";
}
a.b = function () {
return "bar";
}
function c () {
var f = function(){
return a();
};
//mixin all properties on a
for(var prop in a){
f[prop] = a[prop];
}
return f; //just returns the function instead of "this"
};
var d = new c(); //doesn't need the new keyword, but just for fun it still works
alert(d()); //show "foo"
alert(d.b()); //shows "bar"
You can add properties to d without affecting a. The only difference between this and what you want is that changes to a will not affect existing "instances" of c.
This is something I've been trying to do for a while now. Special thanks to the authors above for their input.
Here is a chained implementation of using a "callable-object":
var $omnifarious = (function(Schema){
var fn = function f(){
console.log('ran f!!!');
return f;
};
Schema.prototype = {
w: function(w){ console.log('w'); return this; },
x: function(x){ console.log('x'); return this; },
y: function(y){ console.log('y'); return this; }
};
fn.__proto__ = (new Schema()).__proto__;
return fn;
})(function schema(){ console.log('created new schema', this); });
console.log(
$omnifarious()().w().x().y()()()
);
Also, with this "Schema" approach, it may be possible to create a reusable interface using Object.freeze() on Schema's prototype or __proto__ object. That might look something like this: fn.__proto__ = Object.freeze(new Schema().__proto__) -- this is not a practical example and more may be needed. That said, its a different discussion. Try it out and let me know!
Hope this is helpful.