TypeScript compiles a class something like:
var UrlProvider = (function(){
//tons of logic in here that only needs to be performed once for each UrlProvider instance
function UrlProvider(baseUrl){
var baseRequest = {
get: function(){return baseUrl;},
update: function(){return baseUrl;},
delete: function(){return baseUrl;}
};
var documents = function(){
var context = '/documents/';
return{
get: function(){return baseRequest.get() + context;},
post: function(){return baseRequest.post() + context;},
delete: function(){return baseRequest.delete() + context;}
}
};
var editors = function(){
var context = '/editors/';
return{
get: function(){ return baseRequest.get() + context; },
post: function(){ return baseRequest.post() + context; },
delete: function(){ return baseRequest.delete() + context; }
}
}
}
return UrlProvider;
})();
Is there any benefit to putting logic outside of the UrlProvider constructor, but inside the closure of the outer IIFE? My thinking was that perhaps if we needed a remote service or some other expensive process to create UrlProviders that could possibly be better placed in the outer closure vs. the constructor of the UrlProvider? Is this correct? IS there any benefit to putting logic in outside the constructor, but inside the IIFE?
IS there any benefit to putting logic in outside the constructor, but inside the IIFE
Yes. The IIFE is needed for inheritance to capture the base class. This is shown below
class Foo {
log() { }
}
class Bar extends Foo {
log() {
super.log(); // IIFE needed for `super` to work
}
}
Look at the generated javascript (I've removed the extends function).
var Foo = (function () {
function Foo() {
}
Foo.prototype.log = function () {
};
return Foo;
})();
var Bar = (function (_super) {
__extends(Bar, _super);
function Bar() {
_super.apply(this, arguments);
}
Bar.prototype.log = function () {
_super.prototype.log.call(this); // IIFE needed for `super` to work
};
return Bar;
})(Foo);
_super is captured by the IIFE. Reason is that functions are the only thing that create a variable scope in JavaScript and that is why we create an IIFE in the codegen to capture the base class in a nice local name (_super). This is conventional JavaScript, not specific to TypeScript.
Related
This question already has answers here:
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 4 years ago.
I was following a tutorial where they used a translator to translate a class in Typescript into javascript. The translated javascript is a bit confusing and I was wondering if someone can explain to me what the code is doing.
Original Typescript:
class Greeter {
greeting: string;
constructor(message: string){
this.greeting;
}
greet(){
return "Hello, " + this.greeting;
}
}
and the translated Javascript:
var Greeter = (function(){
function Greeter(message){
this.greeting = message;
}
Greeter.prototype.greet = function(){
return "Hello, " + this.greeting;
};
return Greeter;
}());
I am confused about this part (function() { ... }());
what is the first () doing? why is the function(){} necessary? and what is the following () doing?
The syntax is pretty confusing and I hope someone can explain this.
I am confused about this part (function() { ... }());
IIFE this function will executed as soon as it is interpreted by the browser. You don't have to explicitly call this function.
what is the first () doing? why is the function(){} necessary?
All functions in javascript are Object by nature. To create a instance of it you have to call like new Greeter() so the context this is set properly. If executed like Greeter() now the context this is from where it's executed. In most cases it's the window object.
Reference articles
https://www.phpied.com/3-ways-to-define-a-javascript-class/
https://medium.com/tech-tajawal/javascript-classes-under-the-hood-6b26d2667677
That's called IIFE.
General syntax:
(function () {
statements
})();
But sometimes, you can write:
(function () {
statements
}());
I usually use the second's because it's following these steps:
Defining a function: function () { /* statements */ }
Calling the function: function () { /* statements */ }()
And wrapping the function: (function () { /* statements */ }())
Or use it with as an asynchronous thread:
(async function () {
// await some task...
})();
(async () => {
// await some task...
})();
You can also use it to define some local variable(s), like this:
let Person = (function () {
let _name = null;
class Person {
constructor(name) {
_name = name;
}
getName() {
return _name;
}
}
return Person;
}());
let person = new Person('Harry');
console.log(person.getName());
console.log(window._name);
For modules, you want to create some plugin(s) and make it to be global, you can write:
(function (global, factory) {
// we can use "global" as "window" object here...
// factory is a function, when we run it, it return "Person" class
// try to make it global:
global.Person = factory(); // same to: window.Person = factory();
}(window, function () {
class Person {};
return Person;
}));
This construct:
const foo = (function() { })();
Creates an anonymous function, and immediately calls it. The result gets places into foo.
It's possible to split this up in more lines with an extra variable:
const temp = function() { };
const foo = temp();
The reason typescript does this, is because placing code in function creates its own new scope. This makes it possible to do certain things without changing the global namespace.
(function() { ... }()); is a form of IIFE (Immediately Invoked Function Expression)
For example:
var Greeter = (function(){
return 1;
}());
The result is equal to
function fn() {
return 1;
}
var Greeter = fn();
The value of Greeter is 1 after executing the above codes. But the former one uses anonymous function and the latter one declared a variable fn to store the function.
Greeter.prototype.greet = function(){
return "Hello, " + this.greeting;
};
This code snippet is to define a function on the prototype of object Greeter so that this function can be inherited when you create new Greeter(). You may refer to Object.prototype
Here is a trivial use of a closure:
function Thing() {
var _x;
return {
setX: function(val) { _x = val; },
getX: function() { return _x }
};
}
var a = Thing();
var b = Thing();
a.setX(12);
b.setX(23);
a.getX(); //returns 12
What I want to do is be able to define the implementation of setX and getX outside the definition of Thing.
I tried something like this:
function setXimpl(val) {
_x = val;
}
function getXimpl() {
return _x;
}
function Thing() {
var _x;
return {
setX: setXimpl,
getX: getXimpl
};
}
var a = Thing();
var b = Thing();
a.setX(12);
b.setX(23);
a.getX(); //returns 23 not 12!
It's pretty obvious that setXimpl and getXimpl are setting/reading some globally scoped _x, rather than inside the closure.
I tried a bunch of other stuff (mostly syntactical changes), but I just can't get an outside function to be a part of the Thing closure. Is there any way to achieve what I want?
The very short answer to your question is no.
Closures work on the principle of accessing variables within function scope which are not accessible in global scope. This only occurs when the function doing the getting/setting are nested functions within a function that has returned (creating the closure). This implies new functions for setX and getX have to be created each time Thing is called, as in your Thing code.
This doesn't mean that functions returned from Thing can't call functions closer to global scope that are static by using (say) a IIFE
to define Thing:
var Thing = function(){
function a(...) {...}; // create once
function b(...) {...}; // create once
return function () { // the Thing function (create once)
var _x;
return {
setX: function(val) { _x = val; },
getX: function() { return _x }
};
};
}();
effectively giving the anonymous getter and setter functions access to statically defined encapsulated function helpers.
Try a factory:
function setXimplLoader(x) {
return function setXimpl(val) {
x.value = val;
};
}
function Thing() {
var _x = { value: '' };
return {
setX: setXimplLoader(_x),
getX: function() { return _x.value; }
};
}
var a = Thing();
var b = Thing();
a.setX(12);
b.setX(23);
console.log(a.getX())
Or use some utility library:
https://lodash.com/docs#partial
I came across the following pattern recently:
/* PATTERN 1 */
(function(window) {
var Stuff = (function() { // Variable assignment and self-invoking anonymous function
function Stuff(params) {
this.items = [];
}
Stuff.prototype = {
someMethod1: function() {
},
someMethod2: function() {
}
};
return Stuff;
}()); // END Variable assignment
Stuff.create = function(params) {
return new Stuff(params);
};
window.Stuff = Stuff;
}(window));
What confuses me is the role that assigning the Stuff variable plays. Specifically, how is this pattern operationally different to the following:
/* PATTERN 2 */
(function(window) {
// No variable assignment or self-invoking anonymous function
function Stuff(params) {
this.items = [];
}
Stuff.prototype = {
someMethod1: function() {
},
someMethod2: function() {
}
};
Stuff.create = function(params) {
return new Stuff(params);
};
window.Stuff = Stuff;
}(window));
Is the scope of pattern 1's prototype methods private in some way that pattern 2's prototype methods aren't?
Is this purely a stylistic approach for more clearly separating business logic?
No difference at all. The inner IIFE is totally pointless, as it doesn't have any local variables, and can be safely omitted. The only (little) difference is that Stuff in the outer IIFE is now a function declaration, not a function assigned to a variable.
Of course, as it stands, the outer IEFE is quite useless as well, except maybe for code organisation.
Both patterns allows you to easily create true private variables that are attached to the Stuff "class", but can't be accessed outside of it:
var Stuff = (function() { // Variable assignment and self-invoking anonymous function
var stuff_private = "stuff";
function Stuff(params) {
this.items = [];
}
Stuff.prototype = {
someMethod1: function() {
},
someMethod2: function() {
}
getStuff: function() {
return stuff_private;
}
};
return Stuff;
}()); // END Variable assignment
stuff_private is now embedded in the scope of Stuff, but it's invisible to the outside world. You could do this in the second pattern as well, but if you were creating multiple classes in the same file, each with their own private variables, then the first pattern might make sense.
I'm trying something like this:
(function() {
var Foo, foo;
Foo = function(proto) {
var obj, privateMethod, publicMethod;
privateMethod = function() {
return console.log("private", this);
};
publicMethod = function() {
console.log("public", this);
return privateMethod();
};
obj = Object.create(proto);
obj.bar = publicMethod;
return obj;
};
foo = new Foo({
baz: "dooz"
});
foo.bar();
}).call(this);
Obviously this is the object itself when publicMethod is called, but is set to the global object in the privateMethod. I know it can be solved by changing:
return privateMethod();
to:
return privateMethod.call(this);
I know that this get's lost when a function is nested in a function, but did not expect that case here. Do I encounter this JavaScript bug here or is there something that I simply do not understand yet?
Context (this), in javascript, is set by how a function is called, and is in no way a property of the function itself.
obj.bar = function() { console.log(this) };
obj.bar() // obj
obj['bar']() // obj
// But break the function off the object, and this changes
fn = obj.bar
fn() // window
What this example shows us is that the the dot syntax there sets this. Think of obj.bar() is syntax sugar for obj.bar.call(obj).
So your public method gets the right this, because of how it's called in external code.
foo.bar();
But your private method is invoked with no receiver at all.
return privateMethod();
So no context is assigned, and it defaults to the global object.
So given you are creating these functions in the constructor, you have some flexibility.
You could assign the proper value of this in the constructor to something else, and use that in your private functions. (Likely the best option)
var self = this;
privateMethod = function() {
return console.log("private", self);
};
Or if your JS target engine support Function.prototype.bind (not all do, sadly) you could do:
privateMethod = function() {
return console.log("private", this);
}.bind(this);
Which will return a function that has an assigned context, no matter what.
Or you could bind it manually yourself.
_privateMethod = function() {
return console.log("private", this);
}
Foo = function(proto) {
privateMethod = function() {
_privateMethod.call(this);
}
}
You're calling foo.bar(). This means the function bar() is called on foo, meaning this is foo inside bar().
In your case foo is a Foo object obj, and bar() is publicMethod.
When publicMethod() calls privateMethod(), there's no context, so this becomes the global this (window).
I have the following function
var myInstance = (function() {
var privateVar = 'Test';
function privateMethod () {
// ...
}
return { // public interface
publicMethod1: function () {
// all private members are accesible here
alert(privateVar);
},
publicMethod2: function () {
}
};
})();
what's the difference if I add a new to the function. From firebug, it seems two objects are the same. And as I understand, both should enforce the singleton pattern.
var myInstance = new (function() {
var privateVar = 'Test';
function privateMethod () {
// ...
}
return { // public interface
publicMethod1: function () {
// all private members are accesible here
alert(privateVar);
},
publicMethod2: function () {
}
};
})();
While the end result seems identical, how it got there and what it executed in is different.
The first version executes the anonymous function with this being in the context of the window object. The second version executes the anonymous function, but this is in the context of a new empty object.
In the end, they both return another object(your Singleton). It's just a slight difference in execution context.
To test this out, but an alert(this); right before the declaration of the privateVar variable.
#Tom Squires: That's not necessarily true and is poor practice not to declare your variables. A script with the "use strict"; directive does cause the JS engine to complain (assuming that the engine supports "use strict";