Method:
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {
baz() {
return this.foo
}
}
}
a.bar() this which refers to a which is what I want. I'm looking for a way for the child method inside a.lol.baz to also have this refer to a. Is there anyway to do it?
You can't refer to it directly. But you can bind the function to the object explicitly, then this will be available.
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {}
}
a.lol.baz = (function() {
return this.foo
}).bind(a);
console.log(a.lol.baz());
you can use a.lol.baz.call(a) function
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {
baz() {
return this.foo
}
}
}
var res=a.lol.baz.call(a)
alert(res)
Related
I have a question about .bind() function.
I have this code and it outputs Window object and I don't understand why. Could you explain to me why bind(this) had no effect on the function?
let vakho = {
name: "salome",
a: function () {
let something = function () {
return this;
}
something.bind(this)
return {
f: function () {
return something();
}
}
},
}
console.log(vakho.a().f())
.bind returns a new function with the attached context. You need to assign the result to the something again.
let vakho = {
name: "salome",
a: function () {
let something = function () {
return this;
};
something = something.bind(this); // Assign to the something
return {
f: function () {
return something();
}
}
},
}
console.log(vakho.a().f());
console.log(vakho.a().f().name);
How can I extend the scope of this so that the below works? I've tried using the .bind() function but I can't seem to get anything to work.
var myObj = {
test: "Hello",
test2: " World",
run: {
all: function() {
return this.test + this.test2;
},
part: function() {
return this.test2;
}
}
}
console.log(myObj.run.all())
// => "Hello World"
console.log(myObj.run.part())
// => " World"
The functions all and part are members of the object run and run does not have the values test and test2. They're member objects of myObj.
You can replace the this keyword with myObj.
var myObj = {
test: "Hello",
test2: " World",
run: {
all: function() {
return myObj.test + myObj.test2;
},
part: function() {
return myObj.test2;
}
}
}
console.log(myObj.run.all())
console.log(myObj.run.part())
I came across the same issue recently.
I solved by using a function
var myObj = function(){
var self = this;
this.test = "Hello";
this.test2 = " World";
this.run = {
all: function() {
return self.test + self.test2;
},
part: function() {
return self.test2;
}
}
}
console.log(myObj.run.all())
// => "Hello World"
console.log(myObj.run.part())
// => " World"
I also found out the bind does the job!
var myObj = {
test: "Hello",
test2: " World",
run: {
all: function() {
return this.test + this.test2;
},
part: function() {
return this.test2;
}
}
};
console.log( myObj.run.all.bind(myObj)() );
// => "Hello World"
console.log( myObj.run.part.bind(myObj)() );
// => "World"
Working fiddle ==> https://jsfiddle.net/sn5w7872/
Use apply
The apply() method calls a function with a given this value, and arguments provided as an array
var myObj = {
test: "Hello",
test2: " World",
run: {
all: function() {
return this.test + this.test2;
},
part: function() {
return this.test2;
}
}
}
console.log(myObj.run.all.apply(myObj,[]));
// => "Hello World"
console.log(myObj.run.part.apply(myObj,[]));
Use ES6 classes and arrow functions.
class myObj {
constructor() {
this.test = "Hello";
this.test2 = " World";
this.run = {
all: () => this.test + this.test2,
part: () => this.test2
}
}
}
var obj = new myObj();
console.log(obj.run.all())
// => "Hello World"
console.log(obj.run.part())
// => " World"
Here is the working fiddle - https://jsfiddle.net/sgsvenkatesh/vn9b1f95/
I have something like this:
var yourNamespace = {
foo: function() {
.....
},
bar: function() {
function foobar() {....
}
}
};
Is there a possibility to call inside of foo, the foobar function inside of bar?
With your exact structure you cannot however you can do something like that :
var yourNamespace = {
foo: function() {
.....
yourNamespace.foobar()
},
bar: function() {
function foobar() {....}
yourNamespace.foobar = foobar;
}
};
Or nicer, (IMO) :
var yourNamespace = {
foo: function() {
.....
yourNamespace.bar.foobar()
},
bar: function() {
yourNamespace.bar.foobar = function() {....}
}
};
Please note: in both case, bar() must run before foo() otherwise foobar is undefined
This is just a simple Module pattern. What you should do is make bar it's own module, and return foobar from that module. Example:
var yourNamespace = {
foo: function() {
this.bar.foobar();
},
bar: {
abc: '',
foobar: function() {
console.log('do something');
}
}
};
Or you could do something more like this:
var yourNamespace = {
foo: function() {
var bar = this.bar();
},
bar: function() {
var abc = '';
function foobar() {
console.log('return abc or do something else');
return abc;
}
return {
foobar: foobar
}
}
};
I'm whondering how to access a specific method in a widget, which I've created.
var foo = {
init : function() {
$.bar.addEventListener('click', this.handleClick);
},
handleClick : function(e) {
console.log(this); // TiUIButton { widgetId="Ti.UI.Button:0" ...
// I want to call baz() here....How to do that?
},
baz: function() {
}
};
foo.init()
Greetings from germany and thanks for your help,
--marc
Pretty straightforward:
var foo = {
init : function() {
$.bar.addEventListener('click', this.handleClick);
},
handleClick : function(e) {
console.log(this); // TiUIButton { widgetId="Ti.UI.Button:0" ...
// I want to call baz() here....How to do that?
// Like this
foo.baz();
},
baz: function() {
}
};
foo.init()
var abc = {
'a': 10,
'b': 10,
c: function() {
//like if I have many many functions in c
init_a();
multiple();
function init_a() {
abc.a = 30;
}
function multiple() {
alert(abc.a * abc.b);
}
function minus() {
alert(abc.a - abc.b);
}
return {
function myalert() {
var result = abc.a + abc.b;
alert(result);
}
}
},
d: function() {
abc.c.myalert(); // ??? error??
abc.c().myalert(); // ??? error?? **it run all functions in c but not just myalert, strange things happening...
}
}
abc.d();
whats the correct syntax to call the 'myalert()' function in function d?
The myalert() function iswas local to abc.c(), so that's not possible.
You could let c() return myalert() though:
c: function() {
return function myalert() {
// whatever
}
}, d: function() {
this.c()()
}
Note that the returned function doesn't have to be named, i.e. return function() { .. }.
Update
If you want to call it like this.c().myalert(), then c() needs to return an object instead of the function directly:
c: function() {
return {
myalert: function() { ... }
}
}
Update 2
Your c() function now contains other statements besides the declaration of myalert(). When called, init_a() and multiple() get called before it returns.
I would suggest refactoring your code, such as, move myalert() into the main object instead:
var abc = {
a: 10,
b: 10,
c: function() { ... }
myalert: function() { ... }
d: function() {
this.myalert();
}
}
You can return an object from c that contains myalert:
var abc = {
'c': function() {
return {
myalert: function() {
alert('foo');
}
};
},
'd': function(){
abc.c().myalert(); // foo
}
};
abc.d();
Demo: http://jsfiddle.net/g2KEK/
c: function() {
return {
myalert : function() {
// whatever
}
}
}, d: function() {
this.c().myalert()
}