javascript closures and function contexts -

joe.bq.wang

浏览: 399754 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript closures and function contexts

博客分类：

javascript

javascript

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

分享到：

WPF VisualTreeHelper and LogicalTreeHelp ... | Javascript divide and load multiple .js ...

2012-07-31 08:13
浏览 872
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript closures and function contexts

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript closures and function contexts

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

最近访客更多访客>>