I'm well aware there are many more cases where this basic principle gets confusing or misused. An example where this all falls apart is changing out the var keyword on the cnt property inside the CalculatorFunction.js file. However this is meant to be a very simple example of how you can hide fields inside a file. You can do the same thing for methods by not doing a this.func = function() and instead just declaring the function() you wish to use privately.
Explanation
The concept behind this test was to create the same thing as an object and a function. Call the method to add two values together. In this add function it should increase the cnt of methods executed and store that value. After calling that method the program tries to modify the cnt field in both types to see the result. In the function the cnt is protected and in the object it is not.
Screenshot of my results
Index.html
<html>
<body>
<h1>Scoping Tests</h1>
<script src="CalculatorObject.js"></script>
<script src="CalculatorFunction.js"></script>
<script>
var a = 5;
var b = 25;
var c = 30;
var cf = new CalculatorFunction();
var rslt1 = calculatorObject.add(a, b);
rslt1 = rslt1 + calculatorObject.add(b, c);
var rslt2 = cf.add(a, c);
document.write("Result1->" + rslt1 + " count->" + calculatorObject.getCnt());
document.write("<br/>Result2->" + rslt2 + " count->" + cf.getCnt());
/* Testing function encapsulation using var */
document.write("<br/><br/><b>Test Function Encapsulation</b><br/>");
cf.cnt = 25;
document.write("<br/>Setting cf.cnt = 25 won't matter. getCnt() is still: " + cf.getCnt() + " aka encapsulation in JS.");
/* Testing object encapsulation using object parameters */
document.write("<br/><br/><b>Test Object Encapsulation</b><br/>");
calculatorObject.cnt = 999;
document.write("<br/>Setting calculatorObject.cnt = 999. getCnt() on object should return 999: " + calculatorObject.getCnt() + " aka non-encapsulation.");
</script>
</body>
</html>
CalculatorObject.js
var calculatorObject = {
"cnt": 0,
"add": function (a, b) {
'use strict';
this.cnt = this.cnt + 1;
return a + b;
},
"subtract": function (a, b) {
'use strict';
this.cnt = this.cnt + 1;
return a - b;
},
"getCnt": function () {
'use strict';
return this.cnt;
}
};
CalculatorFunction.js
function CalculatorFunction() {
'use strict';
var cnt = 0;
console.log(cnt);
this.add = function (a, b) {
cnt = cnt + 1;
return a + b;
};
this.subtract = function (a, b) {
cnt = cnt + 1;
return a - b;
};
this.getCnt = function () {
return cnt;
};
}
Though this is a very small and simple example it will help you to understand just how these two items work in relation to what problem you are trying to solve in your source code.
Enjoy!
