AngularJS factory: Best way to call parent in literal? - javascript

If I have
var test = {
return {
foo: function() {
return 1
},
sub: {
bar: function() {
var foo = this.foo() // <--- here, does obviously not work
}
}
}
}
What is the recommended and best way to access foo() from within sub.bar() ...?
To clarify, I want to split an angularjs service into sections.
"Real" code:
angular.module('myApp').factory('Service' function() {
return {
foo: function() {
return 1
},
sub: {
bar: function() {
var foo = this.foo() // <--- here, does obviously not work
}
}
}
})

Since you are using an angular factory, you can Use the Revealing Module Pattern:
angular.module('myApp').factory('Service' function() {
function foo() {
return 1
}
var sub = {
bar: function() {
var foo = foo()
}
}
return {
foo: foo,
sub: sub
}
})

This is not ok:
return {
foo: function() {
return 1
}
}
You need to remove that return statement and within the function bar you can access the function foo using the name of the variable test as follow: test.foo()
var test = {
foo: function() {
return 98989;
},
sub: {
bar: function() {
var foo = test.foo();
console.log(foo);
}
}
};
test.sub.bar();
Another way is using the function bind, but it's overkill:
var test = {
foo: function() {
return 98989;
},
sub: {
bar: function() {
var foo = this.foo(); // Using the object 'this'
console.log(foo);
}
}
};
test.sub.bar.bind(test)();
Now, you can declare a variable service and use that variable:
angular.module('myApp').factory('Service'function() {
var service = {
foo: function() {
return 1
},
sub: {
bar: function() {
var foo = service.foo();
^^^^^^^
}
}
};
return service;
});

Related

QML - How to call overloaded function from child

I have the QML component Rect.qml:
Rectangle {
id: prntRect
property var foo: function() {
console.log("FOO");
}
function bar() {
console.log("BAR");
}
}
and have created one in main.qml:
Rect {
id: chldRect
property var foo: function() {
console.log("FOO CHILD");
}
function bar() {
console.log("BAR CHILD");
}
}
Its possible to call prntRect's foo/bar implementations from within chldRect? If yes how?
Thanks!

Implementing Custom bind issues

I'm trying to implement native bind functionality. However, when I try to test it out, I'm not getting the expected output.
Can someone tell me where am I going wrong?
Function.prototype.myBind = function(...args) {
const self = this;
return function() {
return self.apply(this, args);
}
};
function demo() {
return {
name: 'James Bond',
printName: function (args) {
console.log(this.name, args);
}
};
}
const test = {
name: 'Aqua Man'
};
console.log(demo().printName.myBind(test)('2020'));
// expected
console.log(demo().printName.bind(test)('2020'));
You need to bind to argument like this:
Function.prototype.myBind = function(binder) {
const self = this;
return function() {
return self.apply(binder, arguments);
}
};

Can you use shorthand property assignment using 'this'?

I can do this:
class Temp {
constructor() {
this.foo = 'foo'
this.bar = 'bar'
}
getObj() {
let boo = 'boo'
return {
boo
}
}
}
console.log(new Temp().getObj())
//prints { boo: 'boo' }
So how can I do this:
class Temp {
constructor() {
this.foo = 'foo'
this.bar = 'bar'
}
getObj() {
return {
this.foo
}
}
}
console.log(new Temp().getObj())
Is there special syntax or is it not supported?
I guess what you actually look for is:
return { ...this };
or if you want to omit some properties:
const { bar, ...take } = this;
return take;
No, this is not yet supported. You will have to go by {foo: this.foo}.
However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.
If 'foo' is a public property you can do something like this:
class Foo {
constructor() {
this.foo = 'foo';
}
}
const { foo } = (new Foo());
console.log(foo); // 'foo'
https://repl.it/repls/FastForcefulMice
If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:
class Temp {
constructor() {
this.foo = 'foo'
this.bar = 'bar'
}
getObj() {
const { foo } = this;
return {
foo
}
}
}
console.log(new Temp().getObj())

How can i set an object under another by constructor

I have a construcrtor simply like
function foo() {
this.bar = function() {
return "fubar";
}
}
here no problem when i call new foo().bar();
But if I wanna make something like this
function foo() {
this.bar = function() {
function subbar() {
return "subbar";
};
}
}
I've tried the versions below but none of them works.
function foo() {
this.bar = function() {
this.bar.subbar() {
return "subbar";
};
}
}
function foo() {
this.bar = function() {
this.bar.prototype.subbar() {
return "subbar";
};
}
}
How can i reach subbar like new foo().bar().subbar()
Just return an object with the inner most function:
function foo() {
this.bar = function() {
return { subbar: function subbar() {
return "subbar";
};
}
}
}
Alternatively, you could just return the function without the object:
function foo() {
this.bar = function() {
return function subbar() {
return "subbar";
};
}
}
Then you would call it like this: this.bar()() The second set of parens calls the returned subbar() function
Since functions are objects, when you call bar(), the return value will be the function subbar()
What you want is to return an object with a function attached to it.
function foo() {
this.bar = function() {
return {
subbar: function() {
return 'subbar';
}
};
};
}

How to create a constructor creating constructor in javascript?

Sometimes in JavaScript I need many constructors and objects for pseudo-classes because I like objective very much so I do something like:
var anyClass = (function (settings) {
var staticPrivate = {}, staticPublic = function () {
var public = this, private = {};
(function constructor (here, the, args) {
this.hta = [here, the, args, arguments];
}).apply(this, arguments);
arguments = undefined;delete arguments;
private.stuff = function () {}
Object.defineProperties(public, {
"e.g. length": {
get: function () {
return private.length;
},
set: function (newValue) {
return;
},
enumerable: false
}
});
};
Object.defineProperties(staticPublic, {
"staticFinalHiddenString": {
get: function () {
return "YEAH, I'm static and final and hidden...";
},
set: function (newValue) {
return "You cannot set me.. :P";
},
enumerable: false
}
});
staticPrivate.some = function (init) {
if (settings.some == "settings") init();
}
window.requestAnimationFrame(function () {
staticPrivate.some(function (I) {
run(on, first, render);
});
});
return staticPublic;
})({
some: "settings",
here: null
});
And that every time, so now I want a constructor that creates a new class for me. I think on this:
new Class({
constructor: function (here) {
is(my + constructor);
},
properties: {
name: {
getter: function () {},
setter: function (newValue) {},
hidden: false,
static: false,
final: false
},
version: {
getter: function () {
return 0.3;
},
setter: function (newValue) {},
hidden: true,
static: true,
final: true
}
}
});
but my problem is that I have no idea how to create an prototype/constructor with an constructor class.prototype.prototype does not work.
I just tried that:
var Class = (function () {
var Class = (function () {
var constructor = function () {
return (function (information) {
this.prototype = {};
var properties = {};
for(var key in information.properties) {
properties[key] = {
get: information.properties[key].getter,
set: information.properties[key].setter,
enumerable: !information.properties[key].hidden || true
};
};
Object.defineProperties(this.prototype, properties);
return this;
}).apply(this, arguments);
};
return constructor;
})();
return Class;
})();
That does not work for me :C
I hope you can help me. Thanks...
I understood my mistake and now I can return somthing when I have an constructor.
The var Class = function () {}; and the Class.prototype in the closure function with .apply(this, arguments) does the thing, that is why I can return Class in the constructor function, if I would just do
var Class = function () {
var ClassICreate = function () {};
...
return ClassICreat;
}
it would not work, because you cannot return from a constructor, because it is an object.
That is how it works for my:
var Class = (function () {
var Class = function () {
return (function (information) {
var Class = function () {};
var properties = {};
for(var key in information.properties) {
properties[key] = {
get: information.properties[key].getter,
set: information.properties[key].setter,
enumerable: !information.properties[key].hidden || true
};
};
Object.defineProperties(Class.prototype, properties);
return Class;
}).apply(this, arguments);
};
return Class;
})();
After I found the answer it looked so easy to me, and thanks for the comments, they helped my to find the right answer...

Categories

Resources