Menu
I'm studying THREE.js and noticed a pattern where functions are defined like so:
var foo = ( function () { var bar = new Bar(); return function ( ) { //actual logic using bar from above. //return result; }; }()); (Example see raycast method here).
The normal variation of such a method would look like this:
var foo = function () { var bar = new Bar(); //actual logic. //return result; }; Comparing the first version to the normal variation, the first seems to differ in that:
So the main difference is that in the first variation the bar is only assigned once, at initialization, while the second variation creates this temporary variable every time it is called.
My best guess on why this is used is that it limits the number of instances for bar (there will only be one) and thus saves memory management overhead.
My questions:
210
A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript web applications. Another way of looking at patterns are as templates for how we solve problems - ones which can be used in quite a few different situations.
In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object.
“This” keyword refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, “this” references the global object.
Even though a variety of design patterns are used in some situations, designers of JavaScript tend to use some patterns more than others. A design pattern is a reusable solution to common software design issues. Design patterns are the best practices that experienced developers of software use.
This is a design pattern used specifically to clone attributes of an object into new objects, hence the word prototype. JavaScript does this by creating new objects, so setting up your own prototype is an important design pattern to know, especially in JavaScript. function Hello (greeting) { this.greeting = greeting || 'Hello World!';
But using a suitable design pattern can assist you to write better and more understandable code, and because it is simpler to comprehend, the code can be readily preserved. Most importantly, the patterns provide a prevalent vocabulary for software designers to speak about.
Patterns are the object’s reusable models and interactions. Each pattern has a name and when discussing complicated design alternatives becomes a component of a vocabulary. Each developer ambitions to write manageable, readable, and reusable code.
Your assumptions are almost correct. Let's review those first.
- It assigns the return of a self-executing function
This is called an Immediately-invoked function expression or IIFE
- It defines a local variable within this function
This is the way of having private object fields in JavaScript as it does not provide the private keyword or functionality otherwise.
- It returns the actual function containing logic that makes use of the local variable.
Again, the main point is that this local variable is private.
Is there a name for this pattern?
AFAIK you can call this pattern Module Pattern. Quoting:
The Module pattern encapsulates "privacy", state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface. With this pattern, only a public API is returned, keeping everything else within the closure private.
Comparing those two examples, my best guesses about why the first one is used are:
But if you just need the vanilla object every time, then this pattern will probably not add any value.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
