Javascript access parent public variable - javascript

I am trying to get subclass to access parent variable. Can someone tell me what's wrong with this code?
function a() {
this.val = 600;
var self = this;
this.c = new b();
this.d = function() {
console.log("P:");
this.c.p();
}
}
function b() {
this.val2 = 1;
this.p = function() {
console.log(self.val);
}
}
var test = new a();
test.d();

In the b function, self is undefined since it doesn't create a closure. This means you can't reference self.
The way you coded it doesn't create closures.
If you do it like this it works:
http://jsfiddle.net/y2A93/
function a() {
this.val = 600;
var self = this;
this.c = new b();
this.c.self = self; // create `self` variable
this.d = function() {
console.log("P:");
this.c.p();
}
}
function b() {
this.val2 = 1;
this.p = function() {
console.log(this.self.val); // create closure that passes `self` from `b` to `p`.
}
}
var test = new a();
test.d();
What I do is create a self variable in the instance of b called c. Than I create a closure by accessing the self in b from an inner function; p in this case.

Error: self does not exist in the scope of function b. self exists only in scope of a. Try assigning this.c.parent = self (or constructing this.c with that value) and access it from
(new b()).p() as this.parent instead
Try:
function a() {
this.val = 600;
var self = this;
this.c = new b(self);
this.d = function() {
console.log("P:");
this.c.p();
}
}
function b(parent) {
this.val2 = 1;
this.parent = parent;
this.p = function() {
console.log(this.parent.val);
}
}
var test = new a();
test.d();

Related

Reference Javascript object method when instantiating object

a = function(x){
this.c = x;
this.c();
}
a.prototype.b = function () {
alert("B");
}
a.prototype.c = function () {
//overwrite this
}
var z = new a(this.b);
I know using this.b is wrong but is there anyway I can reference an objects method and pass it as an argument when instantiating the object?
I know the object instance doesn't exist yet but the prototypes do.
I can't paste the context as it's far too complicated I'm afraid. Basically I want to overwrite prototype.b on some occasions and do that at the instantiation point rather than afterwards. Mainly for prettier code. But if can't be done no worries.
You would need to reference it from the constructor.
a = function(x) {
this.c = x;
this.c();
}
a.prototype.b = function() {
alert("B");
}
var z = new a(a.prototype.b);
or maybe it would be nicer to send the name of the desired method, and have the constructor do it.
a = function(x) {
if (x in a.prototype) {
this.c = a.prototype[x];
this.c();
}
}
a.prototype.b = function() {
alert("B");
}
var z = new a("b");

JavaScript: Inheritance in ECMAScript5

var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
inherit(A, B);
};
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get undefined here
I am new to JS, sorry for dump question. I would like to inherit B from A. What am I doing wrong?
You're only calling inherit() after creating the instance of B.
You need to call inherit() statically, once, after defining both functions.
You also need to call A on your instance in B.
For more details on how to properly do inheritance, see my blog.
What am I doing wrong?
Two things:
You're calling inherit inside B. You should be doing it outside.
Inside B, you should be calling A, e.g.
A.call(this/*, other, args, here, if, needed*/);
or
A.apply(this, arguments);
to pass on all of the arguments B received at runtime via the automatic arguments pseudo-array.
Like so:
var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
A.call(this); // <==== Added
};
inherit(A, B); // <==== Moved
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get 2 here now
You didn't call the base constructor. Also, it's enough if you inherit only once the classes.
var A = function () {
this.p1 = 2;
};
A.prototype.f1 = function () {
return 7;
};
var B = function () {
A.apply(this, arguments);
};
inherit(A, B);
function inherit(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
}
var b = new B();
console.log(b.p1); // get undefined here

javascript access "this" in function constructor

I'm trying to create a function constructor:
var obj = function() {
this.num = 2;
this.func = function() {
// need to access the **instance** num variable here
};
};
var instance = new obj();
I need to access the instance properties from a propery (which is the function func) of the object. But it doesn't work, since this is always the current function..
Store this in a variable which func can access:
var obj = function() {
var _this = this;
_this.num = 2;
_this.func = function() {
console.log(_this.num);
};
};
Please, use well-known approach, store this into separate field:
var obj = function() {
self = this;
self.num = 2;
self.func = function() {
alert(self.num);
// need to access the **instance** num variable here
};
};
var instance = new obj();
This is the pattern I use for the problem:
var obj = function(){
var self = this;
this.num = 2;
this.func = function() {
console.info(self.num);
};
};
var instance = new obj();
The variable self now can be accessed in all function of obj and is always the obj itself.
This is the same then:
var obj = function(){
var self = this;
self.num = 2;
self.func = function() {
console.info(self.num);
};
};
var instance = new obj();
You can do it using the Custom Constructor Functions, used to create a custom constructor and it's accessed without any problem, try it:
var Obj = function () {
this.num = 2;
this.func = function () {
alert("I have " + this.num);
return "I have " + this.num;
};
};
var instance= new Obj();
instance.func();//will return and show I have 2

What is the best way to access to "this" inside a sub object in javascript class?

This doesn't work because f.bar.bar() in undefined.
var myFunction = function(foo){
this.foo = foo;
this.bar = {
bar: function(){
return this.foo;
}
}
}
var f = new myFunction('foo');
alert(f.bar.bar());
You can always declare a variable in the parent scope:
var myFunction = function(foo){
var func = this;
this.foo = foo;
this.bar = {
bar: function(){
return func.foo;
}
}
}
var f = new myFunction('foo');
alert(f.bar.bar());

how to expose public methods of member variables in JS

I have a class
function A()
{
var that = this;
var b = new B();
this.setBSize = function(newSize)
{
b.setSize(newSize);
}
};
function B()
{
var that = this;
this.setSize = function(newSize)
{
...
}
}
a = new A();
a.setBSize(5);
How do I avoid writing the setBSize method? How do I expose the public methods of b automatically? I want to do the call like this
a.setSize(5);
Also I need a reference to new B(); which is b inside A()
You could always set the prototype of A to B if you want to inherit all the methods in B
function A() {
var that = this;
};
function B() {
var that = this;
this.setSize = function (newSize) {
console.log(newSize); // 5
}
}
A.prototype = new B();
a = new A();
a.setSize(5);
FIDDLE
In jQuery: $.extend(that, new B());
In angular: angular.extend(that, new B());
function A()
{
var that = this;
$.extend(that, new B());
};
function B()
{
var that = this;
this.setSize = function(newSize)
{
...
}
}
a = new A();
a.setSize(5);
And if you want to use any private variables in B() class define them as var someVar, and all public (overridable) variables as that.somePublicVar
You can use call method for this:
function A() {
var that = this;
B.call(this);
};
function B() {
var that = this;
this.setSize = function (newSize) {
this.size = newSize;
}
}
var a = new A();
a.setSize(5);
Basically you invoke B in context of A, and what happens is that all own properties of the B instance are going to be assigned to this which is A instance. This pattern is called constructor or methods borrowing.
You should utilize prototyping.
make a constructor which shares the function among all the classes(objects):
var myConstructor = function(newSize){
this.setSize = function(newSize)
{
...
}
}
Now you do instanciation:
var a = new myConstructor(someSize);
var b = new myConstrucotr(someSize);
Now with this change a.setSize() is the same as b.setSize()
Using prototype for inheriting the method setSize and discarding all the this and that code.
function B() {
};
function A() {
B.call(this);
};
B.prototype.setSize = function(newSize) {
console.log(newSize);
}
A.prototype = Object.create(B.prototype);
A.prototype.constructor = A;
var a = new A();
a.setSize(5); // 5
console.log(a instanceof A);// true
console.log(a instanceof B);// true

Categories

Resources