JavaScript: Accessing 'closed' variables in an inherited sub-module - javascript

I've got a module object that I want to clone and then override a function for.
var Module1 = (function () {
var hello = "hi there!";
return {
sayHello : function () {
console.log(hello);
}
}
})();
var Module2 = (function (old) {
var my = {}, key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
my.sayHello = function () {
console.log(old.hello + " again");
}
return my;
}(Module1));
Is there a way to access the 'private' variable 'hello' from the submodule? Calling Module2.sayHello() (on the code shown above) prints undefined again!.

No, you can't.
You can add
getHello : function () {
return hello;
}
into Module1's return block, in this case you expose a public function which reuturn's Module1's private vairable hello.

Related

Can I navigate upwards through a javascript object in the same way I can through the DOM? [duplicate]

var user = {
Name: "Some user",
Methods: {
ShowGreetings: function() {
// at this point i want to access variable "Name",
//i dont want to use user.Name
// **please suggest me how??**
},
GetUserName: function() { }
}
}
You can't.
There is no upwards relationship in JavaScript.
Take for example:
var foo = {
bar: [1,2,3]
}
var baz = {};
baz.bar = foo.bar;
The single array object now has two "parents".
What you could do is something like:
var User = function User(name) {
this.name = name;
};
User.prototype = {};
User.prototype.ShowGreetings = function () {
alert(this.name);
};
var user = new User('For Example');
user.ShowGreetings();
var user = {
Name: "Some user",
Methods: {
ShowGreetings: function() {
alert(this.Parent.Name); // "this" is the Methods object
},
GetUserName: function() { }
},
Init: function() {
this.Methods.Parent = this; // it allows the Methods object to know who its Parent is
delete this.Init; // if you don't need the Init method anymore after the you instanced the object you can remove it
return this; // it gives back the object itself to instance it
}
}.Init();
Crockford:
"A privileged method is able to access the private variables and
methods, and is itself accessible to the public methods and the
outside"
For example:
function user(name) {
var username = name;
this.showGreetings = function()
{
alert(username);
}
}
You can try another approach using a closure:
function userFn(name){
return {
Methods: {
ShowGreetings: function() {
alert(name);
}
}
}
}
var user = new userFn('some user');
user.Methods.ShowGreetings();
Old question but why can't you just do something like this :
var user = {
Name: "Some user",
Methods: {
ShowGreetings: function() {
// at this point i want to access variable "Name",
//i dont want to use user.Name
// **please suggest me how??**
var thisName = user.Name; //<<<<<<<<<
},
GetUserName: function() { }
}
}
Because you will only call user.Methods.ShowGreetings() after the user has been instantiated. So you will know about the variable 'user' when you want to use its name ?
As others have said, with a plain object it is not possible to lookup a parent from a nested child.
However, it is possible if you employ recursive ES6 Proxies as helpers.
I've written a library called ObservableSlim that, among other things, allows you to traverse up from a child object to the parent.
Here's a simple example (jsFiddle demo):
var test = {"hello":{"foo":{"bar":"world"}}};
var proxy = ObservableSlim.create(test, true, function() { return false });
function traverseUp(childObj) {
console.log(JSON.stringify(childObj.__getParent())); // returns test.hello: {"foo":{"bar":"world"}}
console.log(childObj.__getParent(2)); // attempts to traverse up two levels, returns undefined because test.hello does not have a parent object
};
traverseUp(proxy.hello.foo);
Very late to the party, but this works
var user = {
Name: "Some user",
Methods() {
return {
that: this,
ShowGreetings: function() {
console.log(this.that.Name)
},
GetUserName: function() { }
}
}
}
user.Methods().ShowGreetings() // Some user
David Dorward's right here. The easiest solution, tho, would be to access user.Name, since user is effectively a singleton.
ES6 Classes
One simple solution would be to create a Class with methods!
class User {
// Assign properties when an instance
// is created using the `new` keyword
constructor(name) {
this.name = name;
}
// Methods:
showGreetings() {
console.log(`Hello, ${this.name}!`);
}
getUserName() {
return this.name;
}
// Or rather, use Getters:
get username() {
return this.name;
}
}
// Create a new user:
const user = new User("Praveen");
// Use methods:
user.showGreetings(); // "Hello, Praveen!"
console.log(user.getUserName()); // "Praveen"
console.log(user.username); // "Praveen"
Why the above suggestion? Mostly because:
you cannot reference a parent Object from a child Object directly
const User = {
name: "Some user", // hardcoded stuff? Is this an intentional Singleton?
methods: { // <<< Child Object of User
sayName() {
// Sadly, `this` refers to `methods`, not to `user`:
console.log(this); // methods{}
console.log(User.name); // "Some user" // Get Singleton's name
// ... but that's not what you want.
}
}
};
User.methods.sayName();
// ^^^^^^^ Why would you want this `methods` anyways?!
and it makes no sense to hardcode Strings (like "Some user") inside an Object Singleton — which could actually be a reusable function Object.
If you want to associate a child Node to a parent Node — read this answer (Get value of parent Object).
How about this way?
user.Methods.ShowGreetings.call(user, args);
So you can access user.Name in ShowGreetings
var user = {
Name: "Some user",
Methods: {
ShowGreetings: function(arg) {
console.log(arg, this.Name);
},
GetUserName: function() { }
},
Init: function() {
this.Methods.ShowGreetings.call(this, 1);
}
};
user.Init(); // => 1 "Some user"
As a variant:
var user = (obj => {
Object.keys(obj.Methods).map(option => {
const currOpt = obj.Methods[option];
if (currOpt instanceof Function) {
obj.Methods[option] = currOpt.bind(obj);
};
});
return obj;
})({
Name: "Some user",
Methods: {
Greeting: function () { return this.Name },
GetUserName: function() { console.log(this) }
},
});
But I don't know why somebody can use this strange approach
I know I'm very late.
I wrote this simple method. Let's say you have:
{
subObj: {
x:'hello_world';
}
}
Then, if you want a reference to the bigger object from subObj, you can convert it to a function, and utilize this.
var tmpVal=reference_to_subObj; //keep value of subObj safe
reference_to_subObj=function(){return this;}//this returns the scope, here the parent
var parent=reference_to_subObj(); //call the function
reference_to_subObj=tmpVal; delete tmpVal; //set things back to normal
//Now you have variable 'parent'.
I used a Function() constructor because it let me create the function as a string, so I could pass a string as code.
function findParent(stringReference) {
Function(/*same as above, except filled in all reference_to_subObj with stringReference.*/
//stringReference is a stringified version of dot or bracket notation.
So I could call findParent('obj.subObj').
// Make user global
window.user = {
name: "Some user",
methods: {
showGreetings: function () {
window.alert("Hello " + this.getUserName());
},
getUserName: function () {
return this.getParent().name;
}
}
};
// Add some JavaScript magic
(function () {
var makeClass = function (className) {
createClass.call(this, className);
for (key in this[className]) {
if (typeof this[className][key] === "object") {
makeClass.call(this[className], key);
}
}
}
var createClass = function (className) {
// private
var _parent = this;
var _namespace = className;
// public
this[className] = this[className] || {};
this[className].getType = function () {
var o = this,
ret = "";
while (typeof o.getParent === "function") {
ret = o.getNamespace() + (ret.length === 0 ? "" : ".") + ret;
o = o.getParent();
}
return ret;
};
this[className].getParent = function () {
return _parent;
};
this[className].getNamespace = function () {
return _namespace;
}
};
makeClass.call(window, "user");
})();
user.methods.showGreetings();
I ran across this old post trying to remember how to solve the problem. Here is the solution I used. This is derived from Pro JavaScript Design Patterns by Harmes and Diaz (Apress 2008) on page 8. You need to declare a function and then create a new instance of it as shown below. Notice the Store method can access "this".
function Test() {
this.x = 1;
}
Test.prototype = {
Store: function (y) { this.x = y; },
}
var t1 = new Test();
var t2 = new Test();
t1.Store(3);
t2.Store(5);
console.log(t1);
console.log(t2);
Like #Quentin said, there is no upwards relationship in JS. However try this workaround;
foo = { bar: {parent: foo} };
console.log(foo);
console.log(foo.bar.parent);
which is also similar to;
function Foo(){
this.bar = {parent: this}
}
foo = new Foo();
console.log(foo);
console.log(foo.bar.parent);

How can a function communicate with a prototype in an embeddable javascript widget?

I am trying to build an embeddable javascript widget. The following (example) is included in a script tag.
(function (window) {
function TestFunction(params) {
console.log("init");
this.someVal = "ThisVal";
}
TestFunction.prototype.protoFunc = function () {
return "Hello " + this.someVal;
};
function hello() {
return eval("TestFunction.protoFunc();");
}
}(window));
When I instantiate the widget as follows
let test = TestFunction({});
If I then type
test.protoFunc();
Hello ThisVal
will be printed. However if the hello function fires it throws an error saying that TestFunction.protoFunc is not a function. Is there a way that the hello() function can fire the TestFunction.prototype.protoFunc function?
I've updated the example a bit. The workflow is now object driven. If I misunderstood you please give me some more information.
(function (window) {
// Object instance
let instance = null;
// Class definition
var TestFunction = function (params) {
console.log("init");
this.options = params;
setTimeout(hello, 100); // triggering after initiation
}
// Class method
TestFunction.prototype.protoFunc = function () {
console.log("Hello " + this.options.name);
};
// the triggering function
function hello() {
return eval("instance.protoFunc()");
}
// initiate the instance
instance = new TestFunction({ name: 'Jon Doe' });
hello(); // trigger outside of class
}(window));
I've another example to show you how capsulating works.
var TestFunction = (function() {
function TestFunction(params) {
console.log('init');
this.options = params;
}
TestFunction.prototype.setName = function(name) {
this.options.name = name;
};
TestFunction.prototype.getName = function() {
return this.options.name;
};
TestFunction.prototype.protoFunc = function() {
console.log("Hello " + this.getName());
};
return TestFunction;
}());
var test = new TestFunction({
name: 'test'
});
test.protoFunc();
test.setName('Wuhu!');
test.protoFunc();

How to encapsulate data in javascript without function duplication in every object instance?

I create a class in JavaScript with public and private properties - data and methods to operate on this data. Some data is private and should not be accessible via "."(dot) operator from class instance. Is there way to avoid method duplication for every class instance?
function MyClass() {
let privateVar;
let publicVar;
function publicFun() {
// do something
}
function privateFun(){
// do something else
}
this.v = publicVar;
this.f = publicFun;
}
let obj1 = new MyClass();
let obj2 = new MyClass(); // publicFun and privateFun methods duplication
ClassName.prototype approach require completely public API for all class data. So this doesn't work for me.
Here is my example if I understood you correctly:
Methods are defined only once, within the wrapper function (thus they are not declared on every instance)
You can create instances of objects they will all refer to the same methods, and can have exposed data.
Here is a fiddle example:
function wrapper() {
//Methods defined only once
function method() {
alert("this is method");
}
function methodWithParams(param, callback) {
var paramsVar = param;
function realMethodHere() {
alert("We passed a param: " + paramsVar);
paramsVar = "Changed"
callback(paramsVar);
alert("Now we cahnged the param's value to: " + paramsVar + ", rerun the method to verify");
}
return realMethodHere;
}
//Class constructor
function classConstructor() {
//Private
var privateData = "Private"
function privateFunction() {
alert("this is some private function, inaccesible");
}
//This callback was addedto allow yo uto change private data.
function privateDataChangerCallback(param) {
privateData = param;
}
//Public
this.publicData = "Public"
this.callMethod = method;
this.paramMethod = methodWithParams(privateData, privateDataChangerCallback);
}
return classConstructor;
}
var classDefinition = wrapper();
var classInstance = new classDefinition();
classInstance.callMethod(); //method without param
classInstance.paramMethod(); //method with exposed Private data
//rerunning the method to see what the value is:
classInstance.paramMethod(); //method with exposed Private data
You can try using TypeScript it's a javascript library that support OOP so you can write your code like in c# or java and the compiler will generate the real javascript for you.
If I understand right, you can add a parameter to your class definition and based on this parameter, you can choose to include additional properties to your return object.
Sample
function myClass(option) {
var myFunc1 = function() {}
var myFunc2 = function() {}
var myFunc3 = function() {}
var myFunc4 = function() {}
var myFunc5 = function() {}
var finalProps = {
myFunc1: myFunc1,
myFunc2: myFunc2,
}
switch (option) {
case "all":
finalProps["myFunc5"] = myFunc5;
case "more":
finalProps["myFunc3"] = myFunc3;
finalProps["myFunc4"] = myFunc4;
break;
}
return finalProps;
}
(function() {
var f1 = new myClass();
var f2 = new myClass("more");
var f3 = new myClass("all");
console.log(f1, f2, f3)
})()
You can create a stand-alone function in the constructor function:
var HelloWorld = (function () {
function anonymouse() {
return "MUHAHAHA! ALL MINE!!!";
}
function HelloWorld() {
this.greeting = "Hello World";
}
//public
HelloWorld.prototype.greet = function () {
console.log("Hello, " + this.greeting + " " + anonymouse());
};
return HelloWorld;
}());
var greeter = new HelloWorld();
greeter.greet();
console.log(greeter);
But this does have the side effect of duplicating said function on all instances of your class.
Alternatively, maybe create a namespace to hide it in, and reference your functions from there. That would eliminate the duplicate function issue:
var MySecretClasses;
(function (MySecretClasses) {
function anonymouse() {
return "MUHAHAHA! ALL MINE!!!";
}
var HelloWorld = (function () {
function HelloWorld() {
this.greeting = "Hello World";
}
//public
HelloWorld.prototype.greet = function () {
console.log("Hello, " + this.greeting + " " + anonymouse());
};
return HelloWorld;
}());
MySecretClasses.HelloWorld = HelloWorld;
})(MySecretClasses || (MySecretClasses = {}));
var greeter = new MySecretClasses.HelloWorld();
greeter.greet();
console.log(MySecretClasses);
console.log(greeter);
TYPESCRIPT
As Shlomi Haver points out, you could use TypeScript for this.
module MySecretClasses {
function anonymouse() {
return "MUHAHAHA! ALL MINE!!!";
}
export class HelloWorld {
greeting: string = "Hello World";
constructor() {
}
//public
public greet() {
console.log("Hello, " + this.greeting + anonymouse());
}
}
}
var greeter = new MySecretClasses.HelloWorld();
greeter.greet();
console.log(greeter);

Revealing Module Pattern with a constructor

I'm having a bit of trouble figuring out the best way to implement this.
I want a module that has a constructor that takes in an argument that stores it for later use within the module.
var ModuleB = function(moduleA) {
this.moduleA = moduleA;
}
ModuleB.prototype = function() {
//private stuff/functions
function someMethod() {
moduleA.doSomething();
}
//public api
return {
someMethod : someMethod
};
}();
In some other file
//ModuleA defined elsewhere
var moduleA = new ModuleA();
//...
var module = new ModuleB(moduleA);
module.someMethod();
Now above in someMethod, moduleA is undefined, and this, is the global window object. Can someone explain how I would get access to moduleA? I don't understand what happens to this.moduleA = moduleA; after the constructor. I'm not really a javascript developer so if I'm using the wrong pattern here or something, feel free to chime in.
You are very close, but you're missing something important in your definition of someMethod.
EDIT: is is easier to tell what works and what doesn't if you change the name of the module property in ModuleB:
var ModuleA = function() {}
ModuleA.prototype = (function () {
return {
someMethod: function () {
return 'foo';
}
};
}());
var ModuleB = function(moduleA) {
this.innerModule = moduleA;
}
ModuleB.prototype = (function () {
return {
doStuff: function () {
return this.innerModule.someMethod();
}
};
}());
var moduleA = new ModuleA();
var moduleB = new ModuleB(moduleA);
console.log(moduleB.doStuff()); // prints "foo"
http://jsfiddle.net/mN8ae/1/
Try this:
var ModuleB = function(moduleA) {
this.moduleA = moduleA;
}
// Simplifying your code, what was missin is the "this" keyword accessing the moduleA
ModuleB.prototype.someMethod = function() {
this.moduleA.doSomething();
};
var module1 = new ModuleB({
doSomething: function(){
alert('i do something');
}
});
module1.someMethod();
You would need to use call/apply to execute the method for given context.
try this code (I have modified your code)
var ModuleB = function(moduleA) {
this.moduleA = moduleA;
};
ModuleB.prototype = function() {
//private stuff/functions
function someMethod() {
this.doSomething();
}
//public api
return {
someMethod : someMethod
}; }();
var ModuleA=function(){
this.doSomething=function(){
alert('moduleA Method');
}; };
var modA=new ModuleA(); var modB=new ModuleB(modA);
modB.someMethod.call(modA);
Thanks!

Private-like properties in models or views of Backbone.js

Is it possible to have private properties in a model? Like the locally declared variables in a (constructor) function, not attached to this, but declared locally and visible only by whatever is defined in the (constructor)function.
Example without BB View:
function MyView(aModel){
var $internalInput = $('<input>');
this.render: function($where){
$internalInput.val(aModel.get('SomeProperty'));
$where.append($('<div class="inputWraper">').append($internalInput));
};
this.toggleReadonly: function() {
toggle $internalInputs readonly attribute
}
...
+ Code to bind input.val to some aModel property(ies) and setup events
...
}
Note that internalInput is not accessible to outside world and aModel is also not accessible (through MyView at least).
So if I want to use Backbone.View to implement the above MyView, how would i do it and keep $internalInput 'private'?
You should be able to achieve private data by passing an IIFE to extend when defining your Backbone objects, rather than just a plain object. For example:
var Thing = Backbone.Model.extend((function () {
var foo = "Private data!";
return {
bar: function () {
console.log(foo);
}
};
})());
You'd better off with
var Thing = Backbone.Model.extend(
{
constructor : function ()
{
var _value = "Private data!";
this.getValue = function ()
{
return _value;
};
this.setValue = function (value)
{
_value = value;
};
}
});
Javascript is fun!
var Thing = (function () {
var number_of_things = 0;
return function (options) {
var value = "Private data!";
return new ( Backbone.Model.extend({
constructor: function constructor () {
number_of_things += 1;
},
getValue: function getValue () {
return value;
}
}) )();
};
}());
I'm a little concerned by the fact that every instance of this "Thing" is also a subclass, in the OOP lingo.
In the context of using Broserify.js with Backbone (and really any above medium project) I found the following way to have private vars and functions:
myView.js
'use strict';
var config = require('../config.js'),
private_var = 'private variable',
my_private_fn = function() {
...
};
module.exports = Backbone.Model.extend({
initialize: function() {
this.my_public = 'public variable');
console.log('This is my' + this.my_public);
console.log('This is my' + my_private);
},
});
The idea to take here is go with Browserify :P
The simplest way is the following:
...
initialize:function(properites){
// Init the logic with private and public methods/variable
this.logic.initFirst(this);
// Use public methods
this.logic.doSomething();
},
logic:{
initFirst:function(modelOrView){
// Do not continue if already initiated
if( this.instance !== undefined ) return;
// Write all logic here
this.instance = (function(logic, modelOrView){
// Private variables
var private = "private";
// Public methods
logic.doSomething = function(){
console.log(private, modelOrView);
};
// Private methods
function hidden(){
}
}(this, modelOrView));
}
},

Categories