Skip to content

Instantly share code, notes, and snippets.

@mveteanu mveteanu/README.md
Last active Jan 18, 2017

Embed
What would you like to do?
Encapsulation in JavaScript

Encapsulation in JavaScript

These examples shows to JavaScript programmers coming from standard OOP languages how to achieve encapsulation in JavaScript.

To try these examples, just download the gist on your local computer and open the .html files.

Alternatively, you can play with these examples online via jsbin.com:

... you can also run them via bl.ocks.org:

<h1>Encapsulation in javascript - method 1a/3</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>
var shape;
function setup()
{
createButton("Inc").mousePressed(onbtnIncClick);
createButton("Dec").mousePressed(onbtnDecClick);
createP("");
createCanvas(800, 600);
shape = CreateShapeObject();
}
function draw()
{
clear(); // clears the background
shape.draw( width / 2, height / 2);
}
function onbtnIncClick()
{
shape.inc(10);
}
function onbtnDecClick()
{
shape.dec(10);
}
// Use closure to protect private data
function CreateShapeObject()
{
var radius = 50;
function incRadius(n)
{
radius += n;
}
function decRadius(n)
{
radius -= n;
}
function drawShape(x, y)
{
ellipse( x, y, radius * 2, radius * 2 );
}
// Public API (module pattern)
return {
inc : incRadius,
dec : decRadius,
draw : drawShape,
}
}
</script>
<h1>Encapsulation in javascript - method 1b/3</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>
var shape;
function setup()
{
createButton("Inc").mousePressed(onbtnIncClick);
createButton("Dec").mousePressed(onbtnDecClick);
createP("");
createCanvas(800, 600);
shape = CreateShapeObject();
}
function draw()
{
clear(); // clears the background
shape.draw( width / 2, height / 2);
}
function onbtnIncClick()
{
shape.inc(10);
}
function onbtnDecClick()
{
shape.dec(10);
}
// This is the similar to the example in p14.html
function CreateShapeObject()
{
var radius = 50; // private
return {
color: "black", // public
inc : function(n)
{
radius += n;
},
dec : function(n)
{
radius -= n;
},
draw : function(x, y)
{
stroke(this.color);
ellipse( x, y, radius * 2, radius * 2 );
}
}
}
</script>
<h1>Encapsulation in javascript - method 2/3</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>
var shape;
function setup()
{
createButton("Inc").mousePressed(onbtnIncClick);
createButton("Dec").mousePressed(onbtnDecClick);
createP("");
createCanvas(800, 600);
shape = new ShapeObject();
}
function draw()
{
clear(); // clears the background
shape.draw( width / 2, height / 2);
}
function onbtnIncClick()
{
shape.inc(10);
}
function onbtnDecClick()
{
shape.dec(10);
}
function ShapeObject()
{
this.radius = 50;
this.inc = function(n)
{
this.radius += n;
}
this.dec = function(n)
{
this.radius -= n;
}
this.draw = function(x, y)
{
ellipse( x, y, this.radius * 2, this.radius * 2 );
}
}
</script>
<h1>Encapsulation in javascript - method 3/3</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>
var shape;
function setup()
{
createButton("Inc").mousePressed(onbtnIncClick);
createButton("Dec").mousePressed(onbtnDecClick);
createP("");
createCanvas(800, 600);
shape = new ShapeObject();
}
function draw()
{
clear(); // clears the background
shape.draw( width / 2, height / 2);
}
function onbtnIncClick()
{
shape.inc(10);
}
function onbtnDecClick()
{
shape.dec(10);
}
function ShapeObject()
{
this.radius = 50;
}
ShapeObject.prototype.inc = function(n)
{
this.radius += n;
}
ShapeObject.prototype.dec = function(n)
{
this.radius -= n;
}
ShapeObject.prototype.draw = function(x, y)
{
ellipse( x, y, this.radius * 2, this.radius * 2 );
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.