javascript closures and function contexts

最新推荐文章于 2020-04-08 21:29:56 发布

原创最新推荐文章于 2020-04-08 21:29:56 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

40 篇文章

订阅专栏

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).