javascript closures and function contexts
Javascript has four kind of functions, namely
- global function
- constructor
- prototype
- closure
I may be wrong about the types, but the rule of thumb is that the functions differs from each other in terms of how the 'this' pointer is determined.
another things that you might be aware is that , with the .call() and .apply() method, you can manipulate the context of a function.
let's take an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../unit.js" type="text/javascript"></script>
</head>
<style type="text/css" >
#results li.pass { color: Green }
#results li.fail { color: Red }
</style>
<body>
<button id="test">click me!</button>
<script type="text/javascript">
function trigger(elem, name) {
elem[name]();
}
window.onload = function () {
test("function context ", function () {
var Button = {
click: function () {
this.clicked = true;
}
};
var elem = document.getElementById("test");
elem.addEventListener("click", Button.click, false);
trigger(elem, "click");
assert(elem.clicked, " The clicked property was accidently set on the element");
elem.removeEventListener("click", Button.click, false);
});
};
</script>
<ul id="results" />
</body>
</html>
please be NOTED that the unit.js is a home-crafted test framework, which I will share in some other post.
as you can see, if you run this test, when you click on the button, the button with id test will have its clicked proeprty set, which is not what we want, it happens because the 'this' inside of the click function is referring to whatever context the function currently has.
a revised way is like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../unit.js" type="text/javascript"></script>
<script src="functioncontext.js" type="text/javascript"></script>
</head>
<style type="text/css" >
#results li.pass { color: Green }
#results li.fail { color: Red }
</style>
<body>
<button id="test">click me!</button>
<script type="text/javascript">
function trigger(elem, name) {
elem[name]();
}
window.onload = function () {
test("function context 2", function () {
var Button = {
click: function () {
this.clicked = true;
}
};
var elem = document.getElementById("test");
var eventhandler = bind(Button, "click");
elem.addEventListener("click", eventhandler, false);
trigger(elem, "click");
assert(Button.clicked, "the clicked property was set on our object");
elem.removeEventListener("click", eventhandler, false);
});
};
</script>
<ul id="results" />
</body>
</html>
the content of the "functioncontext.js" is like this
function bind(context, name) {
return function () {
return context[name].apply(context, arguments);
}
}
the key here is that we used the .call() funtion, which we can override the function context (affect what this binds to).