Develop Reference

Access correct "this" from callback function in array of functions inside an object

I’m trying to access “helperFunction” from inside a function in “steps” array. Obviously using “this” doesn’t refer to the correct object but I can’t seem to work out the proper solution.
const bannerAnimation = {
property: 0,
steps: [
function one() {
this.property = this.helperFunction();
},
function two() {
console.log(this);
}
],
helperFunction() {
// do some calculations and return the result
return 1;
},
doSteps(steps = this.steps) {
steps.forEach(step => {
setTimeout(step, 100);
});
}
};
bannerAnimation.doSteps();
All help much appreciated!

You can achiever this by using bind inside the callback to setTimeout to correctly bind the this to the correct context.
const bannerAnimation = {
property: 0,
steps: [
function one() {
this.property = this.helperFunction();
},
function two() {
console.log(this);
}
],
helperFunction() {
// do some calculations and return the result
return 1;
},
doSteps(steps = this.steps) {
var self = this;
steps.forEach(step => {
setTimeout(step.bind(self), 100);
});
}
};
bannerAnimation.doSteps();

Pass dynamic parameters to callback function in a loop

I wanted to set some jQuery animatios dynamically.
The code:
function anim(data) {
for (index in data) {
(function(){
var props = {};
props[data[index].property] = data[index].value;
data[index].elem.animate(
props,
500,
function() {
data[index].callback();
}
);
})();
}
}
var data =[
{
elem: elem1,
property: 'prop1',
value: 'val1',
callback: function() {
console.log('callback1');
}
},
{
elem: elem2,
property: 'prop2',
value: 'val2',
callback: function() {
console.log('callback2');
}
},
];
anim(data);
The problem is binding callbacks. When the callback is fired, data[index] is not available in current scope. Can somebody tell me how to set those callback propery?

Here you used a closure of Immediately-invoked function expression. You have to pass data[index] as parameter.
(function(dindex){
var props = {};
props[dindex.property] = dindex.value;
dindex.elem.animate(
props,
500,
function() {
dindex.callback();
}
);
})(data[index]);

You can try like this as an alternative,
function anim(data) {
$.each(data, function(x,y){
var props = {};
props[y.property] =y.value;
y.elem.animate(
props,
500,
function() {
y.callback();
}
);
});
}

javascript: extending methods between objects, like mixins

I want to share or reuse some logic between differents objects, that they will be pretty similar, just changing the "scope".
var Mixin = {
show: function () {
this.container.show();
},
hide: function () {
this.container.hide();
},
play: function (data) {
data.map().append();
}
};
var ObjectA = {
container: $('#container_a');
foo: function () {
this.play(otherData); // Mixin common method?
}
};
var ObjectB = {
container: $('#container_b'),
foo: function () {
this.play(data); // Mixin common method?
}
};
ObjectA.show() // show $('#container_a');
ObjectB.show() // show $('#container_b');
I was trying using underscore
_.extend(ObjectA, Mixin);
but it seems like I have issues with the reference of the Mixin (this reference to the last extended object), like if i need to clone the object and extend it?
Is there any approach to do something similar?
Thanks!!
EDIT: I having issue with the scope of 'this', that is referencing to window, when a pass as a callback a function inherits from the mixin, like this.
PersonMixin = {
mixinFoo: function () {
this.handleResponse();
}
};
Person = {
personMethod: function () {
OtherLibrary.libMehtod(this.mixinFoo);
}
};
Object.assign(Person, PersonMixin);
and then, something like this will fail, this an example stack trace
Person.personMethod();
OtherLibrary.libMethod(callbackMixin);
Ajax.post(callbackMixin);
callbackMixin(response); // this.handleResponse() is not defined, because this reference to window object.
EDIT 2: I can solve this issue using bind()

You can do this in a number of ways, my preference is adjusting the objects __proto__ property on creation which will cause it to inherit your mixin via its prototype chain. This does not require the use of underscore.
I adjusted your example for ES6 and made it a bit simpler but should get the point across.
const PlayerType = (
{ show() {
console.info(`show ${this.name}`)
}
, hide() {
console.info(`hide ${this.name}`)
}
, play: function (data) {
data.map().append();
}
}
)
const objA = { __proto__: PlayerType
, name: 'objA'
, foo(...args) {
this.play(...args)
}
}
const objB = { __proto__: PlayerType
, name: 'objB'
, foo(...args) {
this.play(...args)
}
}
objA.show()
objB.show()
Simpler and no ES6:
var Mixin = (
{ show() {
console.info('show ' + this.name)
}
, hide() {
console.info('hide ' + this.name)
}
}
)
var a = { __proto__: Mixin, name: 'a' }
var b = { __proto__: Mixin, name: 'b' }
a.show()
b.show()
Alternate - Does the same thing with Object.create().
var Mixin = (
{ show() {
console.info('show ' + this.name)
}
, hide() {
console.info('hide ' + this.name)
}
}
)
var a = Object.create(Mixin, { name: { value: 'a', enumerable: true } })
var b = Object.create(Mixin, { name: { value: 'b', enumerable: true } })
a.show()
b.show()

It works, just check your syntax also.
var Mixin = {
show: function() {
console.log(this.tmp);
}
}
var oA = {
tmp: 'tmpA'
}
var oB = {
tmp: 'tmpB'
}
var mA = Object.assign(oA, Mixin);
var mB = Object.assign(oB, Mixin)
mA.show();
mB.show()

Get name of property from its own function

I would like to get the name of a property from within its own function. My current approach does not work because the function is nameless. How can I do this?
window.APP = {
models: {
ex_model: kendo.observable({
ex_property: function () {
var property_name = arguments.callee.name.toString();
console.log(property_name);
},
}),
}
}
Thank you.

You can make ex_property have a name. Instead of using function(), you can say function function_name(), and then arguments.callee.name.toString() would return function_name. Like this:
window.APP = {
models: {
ex_model: kendo.observable({
ex_property: function function_name() {
var property_name = arguments.callee.name.toString();
console.log(property_name); // will return function_name
},
}),
}
}

Calling function defined in an object

I have an object that defines the name and parameters of a function to be called in the click event of a page element.
object_array = [
{
id: "id1",
onclick: "load_file(filename.php);",
},
{
id: "id2",
onclick: "open_url('http://url.com');",
}
];
That information must be retrieved dynamically. I'd like in the click event to call the onclick function for a given object in the array.
$('element').click(function() {
// call object.onclick
});
Seems that eval() is not a good choice. Is there a different way of calling that function?

You should refactor the object_array to:
[{
id: "id1",
action: "load_file",
url: "filename.php"
}, {
id: "id2",
action: "open_url",
url: 'http://url.com'
}];
Then you can call it with:
var actions = {
load_file: function(url) {
...
},
open_url: function(url) {
...
},
...
};
object_array.forEach(function(ob) {
$("#"+ob.id).click(function() {
actions[ob.action](ob.url);
});
});
If you have more complex arguments, you could also deliver an arguments array instead of url and use apply() on the function.
Or, if you just want a lookup-table of functions, use:
var object = {
"id1": function() {
load_file('filename.php');
},
"id2": function() {
open_url('http://url.com');
}
};
$('element').click(function() {
object[this.id]();
});

Here's a working jsfiddle:
http://jsfiddle.net/Zh6Fv/1/
Like so:
object_array = [
{
id: "id1",
// Encapsulate in an anonymous function
onclick: function(){ load_file('filename.php'); },
},
{
id: "id2",
// Encapsulate in an anonymous function
onclick: function(){ open_url('http://url.com'); },
}
];
Then actually bind it it like this ::
$('element').click(obj.onclick);
Presumably you would be using it like this::
object_array.forEach(function(obj){
// Note there is no need to wrap the obj.onclick
// into another anonymous function anymore!
$("#" + obj.id).click(obj.onclick);
});
Here's a working jsfiddle:
http://jsfiddle.net/Zh6Fv/1/

you can declare a function like
onclick : function()
{
action(arguments);
}