Develop Reference

How to call class this in object?

I have a class testClass and in testClass there is a getter called testGetter and a public object called testObject. In testObject I have a function nestedFunction which attempts to call testGetter but cannot as the scope for this is in the testObject. How could I call the getter (or any function) from the object?
class testClass {
get testGetter() {
return "test"
}
testObject = {
nestedFunction : function(){
console.log(this)
return this.testGetter
}
}
constructor()
{
console.log(this.testObject.nestedFunction())
}
}
new testClass()
Output:
{ nestedFunction: [Function: nestedFunction] }
undefined

Classic use case of arrow functions.
class testClass {
get testGetter() {
return "test"
}
testObject = {
nestedFunction: () => {
console.log(this)
return this.testGetter
}
}
constructor() {
console.log(this.testObject.nestedFunction())
}
}
new testClass()

AngularJS factory: Best way to call parent in literal?

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;
});

typescript: context preservation. Is it a good idea to do it such way?

I want to keep this in class methods.
I can use arrow functions, but I want to override some methods in extended class.
Now I have this solution and it works:
class Foo {
bar = "Context preserved.";
constructor() {
this.foo = this.foo.bind(this);
}
foo() {
alert(this.bar);
}
}
class Foo2 extends Foo {
foo() {
alert(this.bar + " Class extended");
}
}
class Bar {
bar = "Context lost.";
}
let foo = new Foo2();
let bar = new Bar();
foo.foo.apply(bar); // Context preserved. Class extended
Is it a good practice to do it such way? If it is, is there some keyword in typescript to do it automatically?
like
class Foo() {
public conserved foo() { }
}
which generates:
var Foo = (function () {
function Foo() {
this.foo = this.foo.bind(this);
}
Foo.prototype.foo = function () { };
return Foo;
}());

It's a valid practice and it's being used.
I'm unaware of a way to tell typescript to do this automatically, but you can search the issues for something like it.
You can have a decorator that does that for you, for example:
function construct(constructor: Function, methods: string[], args: any[]) {
var c: any = function () {
return constructor.apply(this, args);
}
c.prototype = constructor.prototype;
let instance = new c();
methods.forEach(name => {
instance[name] = instance[name].bind(instance);
});
return instance;
}
function BindMethods(constructor: Function) {
const methods = [] as string[];
Object.keys(constructor.prototype).forEach(name => {
if (typeof constructor.prototype[name] === "function") {
methods.push(name);
}
});
return (...args: any[]) => {
return construct(constructor, methods, args);
};
}
#BindMethods
class Foo {
bar = "Context preserved.";
foo() {
console.log(this.bar);
}
}
let foo = new Foo();
setTimeout(foo.foo, 10);
(code in playground)
I tested it with this simple use case and it worked just fine.

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 extends a javascript object?

I made a simple example of my problem with a babel object :
function babel(){
this.english = {
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { alert('T-shirt'); }
}
}
Now, I want to extends this object :
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('au revoir'); }
}
But what if I need to use an existing function define before ?
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { this.english.teeshirt(); }
}
What I could do is :
var say = new babel();
(function (_this) {
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
hello: function () { _this.english.hello(); }
}
})(say);
But in this case, I will always use the context of the say object, isn't it ?

The problem is, that in teeshirt function call this points to the french object, not babel object. If you have to access parent object, you should store reference to it somewhere. For example you can change your constructor like this:
function babel(){
this.english = {
parent: this,
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { this.parent.french.something(); }
}
}
But as you can see, there is a problem if you don't create object in constructor. I don't see any 'nice' approach, but you can do this:
function babel(){
this.english = {
parent: this,
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); }
teeshirt: function () { this.parent.french.something(); }
};
for (var i in babel.prototype) {
this[i].parent = this;
}
}
Then your french will look like this:
babel.prototype.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { this.parent.english.teeshirt(); }
}

While the question as asked does bring up all the fascinating issues with JavaScript's this and prototypal inheritance, I would suggest simplifying the whole problem and refactoring your objects. There are a couple ways to do this.
If the English version of teeshirt is the default, it should be in the object which is at the end of the prototype chain. That is, a French object would have as its prototype an English object. The French object would simply not contain a teeshirt member. This is similar to the way resource bundles work.
Now this idea may not work for you, because the relationship among the different bundles may be complex: perhaps sometimes Engish is a fallback sometimes but not other times. In this case, see if you can make your babel objects all singletons (i.e., just plain objects).
var babel = {}
babel.english = {
hello: function () { alert('hello'); },
goodbye: function () { alert('goodbye'); },
teeshirt: function () { alert('T-shirt'); }
}
babel.french = {
bonjour: function () { alert('bonjour'); },
aurevoir: function () { alert('aurevoir'); },
teeshirt: function () { babel.english.teeshirt(); }
}
babel.english.teeshirt();
babel.french.teeshirt();
Try it at http://jsfiddle.net/yRnLj/
I realize this looks like a complete avoidance of your interesting question. But if you only need one copy of each language bundle, it is a lot simpler. :-)