Let's say I have classes A and B. Class B has a member which is an instance of class A, let's call it this.a.
When inside B's methods I try to access A's methods as this.a.<methodName>, I get the following error:
TypeError: this.a is undefined
Here is my code:
function A (name) {
this.name = name;
}
A.prototype.foo = function () {
this.name = this.name.toUpperCase();
};
A.prototype.bar = function () {
this.name = this.name.toLowerCase();
};
function B () {
this.a = new A('Hello, World!');
}
B.prototype.methodsOfA = {
foo: this.a.foo, // here is the problem
bar: this.a.bar //
};
B.prototype.executeMethodOfA = function (methodName) {
this.methodsOfA[methodName]();
//the following works if I delete B.prototype.methodsOfA:
//if (methodName.toLowerCase() === 'foo') this.a.foo();
//else if (methodName.toLowerCase() === 'bar') this.a.bar(); //
};
b = new B();
console.log(b.a.name);
b.executeMethodOfA('foo');
console.log(b.a.name);
b.executeMethodOfA('bar');
console.log(b.a.name);
Instead, if I use the following definition:
B.prototype.methodsOfA = {
foo: A.prototype.foo,
bar: A.prototype.bar
};
I get the following error:
TypeError: this.name is undefined
(probably because this in this case is b and a B object has no name property.)
So, how can I access this.a.<methodName> from inside B?
Note: This is a simplified version of a larger problem. I know that what I asked could be solved with class/prototype inheritance, but ideally I would like B not to inherit from A.
My spidey sense says there's a better way to solve this problem, but here is some working code for now..
function A (name) {
this.name = name;
}
A.prototype.foo = function () {
this.name = this.name.toUpperCase();
};
A.prototype.bar = function () {
this.name = this.name.toLowerCase();
};
function B () {
this.a = new A('Hello, World!');
}
B.prototype.methodsOfA = function (methodName) {
var methods = {
foo: this.a.foo.bind(this.a),
bar: this.a.bar.bind(this.a),
}
return methods[methodName];
};
B.prototype.executeMethodOfA = function (methodName) {
this.methodsOfA(methodName)();
};
b = new B();
console.log(b.a.name);
b.executeMethodOfA('foo');
console.log(b.a.name);
b.executeMethodOfA('bar');
console.log(b.a.name);
You had two problems:
this in the context of an object didn't refer to the this you were thinking of. It was referring to the window, because methodsOfA, as a plain object, won't be injected with this. I changed it to a proper method, and now this is the this you want.
You need to bind the A methods to your local instance of A itself. This is because methods are only given the expected this pointer when invoked in the style a.foo(). Assigning a.foo to another name and invoking it, as you're doing, will lose the this context. You can force the correct context with bind() as you see above.
The way you referning this is wrong. In your case this refers to the global context i.e) window.
you can simply use Object.create(A.prototype) to simply get all methods of A.
while executing this.methodsOfA[methodName]() - it calls the A's method with B's context. So, there is no property called name in your B context - it fail.
you have to call A's method with the context of A which is stored in B's context i.e) this.a
this.methodsOfA[methodName].call(this.a);
function A (name) {
this.name = name;
}
A.prototype.foo = function () {
this.name = this.name.toUpperCase();
};
A.prototype.bar = function () {
this.name = this.name.toLowerCase();
};
function B () {
this.a = new A('Hello, World!');
}
B.prototype.methodsOfA = Object.create(A.prototype);
B.prototype.executeMethodOfA = function (methodName) {
this.methodsOfA[methodName].call(this.a);
};
b = new B();
console.log(b.a.name);
b.executeMethodOfA('foo');
console.log(b.a.name);
b.executeMethodOfA('bar');
console.log(b.a.name);
Related
I'd like to add a method "bar" to a parent class A, after a subclass B are is defined, so that the method is inherited. Is it possible?
I tried the following code
function A() {
this.foo = function () {
console.log('foo')
}
}
function B() {
A.call(this)
}
// (trying to) add a new method to A
A.prototype.bar = function () {
console.log('bar');
}
// It works with instances of A
var a = new A()
a.foo() // ok
a.bar() // ok
// but not with an instance of B
var b = new B()
b.foo() // this works
b.bar() // not this one <------
/*
Exception: b.bar is not a function
#Scratchpad/3:17:1
*/
Any suggestion, please?
If you need just fix your code, you can link methods like this:
function B() {
A.call(this)
for(var i in A.prototype){ this[i] = A.prototype[i]; }
}
But i think it is bad way.
function A() {
this.foo = function () {
console.log('foo');
};
}
function B() {
A.call(this);
}
// (trying to) add a new method to A
A.prototype.bar = function () {
console.log('bar');
};
B.prototype = Object.create(A.prototype);
// It works with instances of A
var a = new A() ;
a.foo() ; // ok
a.bar() ; // ok
// but not with an instance of B
var b = new B() ;
b.foo() ; // this works
b.bar() ;
I case of functional-type of inheritance - you can't add methods, that don't exists in class. Use prototypes
// if you define the prototype as an object
var A = {
foo: function() {
console.log('foo');
}
};
// and define constructors using Object.create
function newA() {
return Object.create(A);
};
function newB() {
return Object.create(newA());
};
// you can add methods to the prototype
A.bar = function () {
console.log('bar');
};
// it works with instances of A
var a = newA()
a.foo();
a.bar();
// and instances of B
var b = newB();
b.foo();
b.bar();
// you can even modify the prototype after the fact
A.baz = function() {
console.log('baz');
};
// and that will work as well
a.baz();
b.baz();
http://jsfiddle.net/5s8ahvLq/
If you don't want the latter behavior of being able to edit the protoype after the fact, use Object.assign or something like underscore or lodash that provides that functionality:
function newA() {
return Object.create(Object.assign({}, A));
}
You're missing:
B.prototype.__proto__ = A.prototype
If you don't like using __proto__ you can use:
B.prototype = Object.create(A.prototype);
I'm trying to get this:
a = new Foo(name); // a is function
a(); // returns a result
a.set(); // returns another result
I've implemented above like that:
function Foo (name) = {
val = name;
ret = function () { return val; }
ret.set = function (v) { return val = v; }
return ret;
}
Then, for multiple instances of Foo I'd like not to create method 'set', but share it through prototype property. However, all experiments I did have no effect. It works only on objects, not on functions. Even the code below doesn't work:
foo = function () { return 'a'; }
foo.foo = function () { return 'foo'; }
foo.prototype.bar = function () { return 'bar'; }
foo(); // a
foo.foo(); // foo
foo.bar(); // Uncaught TypeError: Object function () { return 'a'; } has no method 'bar'
Unfortunately there is no way to add a property to only some functions via the prototype chain. Functions have one object in their prototype chain, which is Function.prototype. There is no way to create functions which have other [[Prototype]]s.
The closest you can come to what you want are these two examples:
Your solution
function Foo (name) = {
val = name;
ret = function () { return val; }
ret.set = function (v) { return val = v; }
return ret;
}
Changing Function.prototype
Function.prototype.set = function (v) { return this.val = v; };
function Foo (name){
ret = function () { return this.val; }
ret.val = name;
return ret;
}
var f = new Foo('myfunc');
f.set('myval');
console.log(f.val);
I would strongly recommend the first solution, because in the second one, every function shares the set property/method. Changing predefined Prototypes is usually frowned upon unless it's to port functionality from newer editions of the language.
In your last example foo does not have the function bar, only it's prototype does.
Therefore only a foo object would have the function bar
So you could do this:
foo = function () { return 'a'; }
foo.foo = function () { return 'foo'; }
foo.prototype.bar = function () { return 'bar'; }
var f = new foo(); // [object]
f.foo(); // TypeError: Object [object Object] has no method 'foo'
f.bar(); // bar
Try this:
foo = function (name){
this.name = name;
}
foo.prototype.set = function(name){ return this.name = name; }
var f = new foo('yourName');
alert(f.name);
f.set('yourNameEdited');
alert(f.name);
Here's DEMO
I have such a code:
function A() {
this.hello = function() {
console.log("I'm A");
}
}
function B() {
this.hello = function() {
// I need to call A.hello here, like parent.hello();
B.prototype.hello(); // This is wrong, TypeError
console.log("I'm B");
}
}
B.prototype = new A();
var b = new B();
b.hello();
#=> TypeError: Cannot call method 'hello' of undefined
I read some similar questions here but they all use this technique, they assign a method to a prototype.
FaqPage.prototype.init = function(name, faq) {
BasePage.prototype.init.call(this, name);
this.faq = faq;
}
FaqPage.prototype.getFaq = function() {
return this.faq;
}
But it is not in my case. My prototype is a parent's instance. How may call a parent method in my case? Or do I have to refactor my code?
You need to assign the this.hello a value, at the moment you are just creating a function to run.
Try the following :
function A() {
this.hello = function() {
console.log("I'm A");
}
}
function B() {
this.hello = function() {
B.prototype.hello(); // Now runs correctly and logs "I'm A"
console.log("I'm B");
}
}
B.prototype = new A();
var b = new B();
b.hello();
By changing the code to be this.hello = function() { } we are creating a property of the object that can be called from outside the object.
The result of calling b.hello(); is :
I'm A
I'm B
Example JSFiddle
When I use var keyword to declare any variable it gets declared inside the enclosing scope. However in the code below, I have declared function c (inside an object method a.b) with var keyword and still this inside the function c is bound to the global object window. Why is this?
var a = {
b: function () {
var c = function () {
return this;
};
return c();
}
};
document.write(a.b()); //prints: [object Window]
The value of this is determined by context, not scope.
When you call a function without any context (context.func()) as you do there (c()), the default context is the default object (which is window in browsers) unless you are in strict mode (in which case it is undefined instead).
(There are exceptions to this rule, such as apply, call, bind, and new but none of them apply here).
Many people get confused by this. The value this depends on one of 4 methods of invocation.
However, functional invocation and method-invocation cause most of the confusion.
If a function is a member of an object, this is the object itself.
obj.someFunction(); //method invocation
If a function is called without context this is the global object (in 'strict mode' this is undefined.)
someFunction(); //functional invocation
The confusion occurs when a function is called within an object, but not as a member of the object as in anObject.testWithHelper(..);
var testForThis = function(isThis, message) {
//this can be confusing
if(this === isThis)
console.log("this is " + message);
else
console.log("this is NOT " + message);
};
//functional invocation
testForThis(this, "global"); //this is global
var anObject = {
test: testForThis, //I am a method
testWithHelper: function(isThis, message) {
//functional invocation
testForThis(isThis, message + " from helper");
}
};
//method invocation
anObject.test(anObject, "anObject"); //this is anObject
//method invocation followed by functional invocation
anObject.testWithHelper(anObject, "an object"); //this is NOT anObject from helper
Here is my JSFIDDLE
If you would like c to return a, you can use closure:
var a = {
b: function () {
var that = this;
var c = function () {
return that;
};
return c();
}
};
Or avoid this all together:
var getNewA = function() {
var newA = {};
newA.b = function() {
var c = function() {
return newA;
};
return c();
};
return newA;
};
var newA = getNewA();
I'm trying to understand how to best use the JavaScript module pattern. My problem is that it seems there's no way to refer to the module from within itself, because this is set to the Window object.
I've got this simple test code:
var Test = function() {
var that = this;
return {
something: function() {
console.info(that);
}
}
}
var test1 = Test();
test1.something();
var test2 = Test();
test2.something();
Both test1 and test2 print a reference to the Window object instead of the module itself.
Any idea how to change it so that I have a valid this inside the module?
If you did
var test1 = new Test()
You could then do
test1.something();
An alternative module structure would be to do something like this:
var myModule = function () {
var obj = {};
obj.something = function () {
return console.log(obj);
};
obj.something2 = function () {
return console.log(obj === this); // true
};
return obj;
};
var test = myModule();
test.something();
test.something2();
Hope this helps
I think you're confusing the JavaScript module pattern with JavaScript constructor functions.
JavaScript constructor functions
If you write a function and call it with the new keyword in front of it, then that function is called as a constructor function.
It will automatically return a new object, that you can refer to within the constructor function using the this keyword.
var Test = function() {
var that = this;
this.something = function () {
console.info(that);
console.info(this);
};
}
var test1 = new Test();
test1.something();
You can return your own object instead, but you wouldn't normally do that in a constructor, you'd just use this instead:
var Test = function() {
var that = this;
return {
something: function () {
console.info(that);
console.info(this);
}
};
}
var test1 = new Test();
test1.something();
If you don't call it with the new keyword in front of it, then it's called like a regular function, meaning any references to this inside of it refer to the object of which the function is a property (which, in the absence of anything else, will be the global object, which in web browsers is window).
var geoff = {
Test: function () {
var that = this;
return {
something: function () {
console.info(that);
}
};
}
};
var test2 = geoff.Test();
var test3 = Test();
Note: with constructor functions, you'd normally define methods on their prototype object, so that the methods don't get unnecessarily redefined for each object you create using the constructor function:
var Test = function() {
this.else = "Something Else"
}
Test.prototype.something = function () {
console.info(this);
}
Test.prototype.somethingElse = function () {
console.info(this.else);
}
var test4 = new Test();
test1.somethingElse() // Logs "Something Else"
(Note that if you return your own object from the constructor function as we mentioned above, then you won't be able to access methods on the prototype object any more.)
Also note that each time you call a constructor function, it returns a new object. You can pass parameters into a constructor function (just like you can with any other function) and use them to customise the object returned:
var Test = function(else) {
this.else = else;
}
Test.prototype.somethingElse = function () {
console.info(this.else);
}
var test1 = new Test("Something else");
var test2 = new Test("Something else again");
test1.somethingElse(); // Logs "Something else"
test2.somethingElse(); // Logs "Something else again"
The problem you have is because this refers to an object, but Test() isn't an object; it's just a function. The object that owns Test() is the Window object (because Test is in the global scope), so therefore that's what you get back when you reference this from within Test().
You may want to try something like this:
var testObj = {
Test : function() {
var that = this;
return {
something: function() {
console.info(that);
}
}
}
}
Now you can call testObj.Test(); and you'll get a reference back to the testObj object.
Hope that clarifies things a bit.