In: Articles

By Mike West

Published on September 11, 2006

Scope is one of the foundational aspects of the JavaScript language, and probably the one I’ve struggled with the most when building complex programs. I can’t count the number of times I’ve lost track of what the this keyword refers to after passing control around from function to function, and I’ve often found myself contorting my code in all sorts of confusing ways, trying to retain some semblance of sanity in my understanding of which variables were accessible where.

In typical object-oriented programming, we need a way of identifying and referring to the object that we’re currently working with. this serves the purpose admirably, providing our objects the ability to examine themselves, and point at their own properties.

This article will tackle the problem head-on, outlining definitions of context and scope, examining two JavaScript methods that allow us to manipulate context, and concluding with a deep dive into an effective solution to ninety percent of the problems I’ve run into.

Where Am I? And Who Are You?

Every bit of your JavaScript program is executed in one execution context or another. You can think of these contexts as your code’s neighborhood, giving each line an understanding of where it comes from, and who its friends and neighbors are. As it turns out, this is important information, as JavaScript societies have fairly strict rules about who can associate with whom; execution contexts are better thought of as gated communities than as open subdivisions.

We can refer to these social boundaries generally as scope, and they’re important enough to be codified in each neighborhood’s charter, which we’ll refer to as the context’s scope chain. Code within a particular neighborhood can only access variables listed on its scope chain, and prefers interaction with locals to associations outside its neighborhood.

Practically speaking, evaluating a function establishes a distinct execution context that appends its local scope to the scope chain it was defined within. JavaScript resolves identifiers within a particular context by climbing up the scope chain, moving locally to globally. This means that local variables with the same name as variables higher up on the scope chain take precedence, which makes sense: If my good friends are talking together about “Mike West,” it’s pretty clear that they’re talking about me, not about the bluegrass singer or the Duke professor, even though the latter two are (arguably) better known.

Let’s walk through some example code to explore the implications:

<script type="text/javascript">
 var ima_celebrity = "Everyone can see me! I'm famous!",
  the_president = "I'm the decider!";
 
 function pleasantville() {
  var the_mayor = "I rule Pleasantville with an iron fist!",
   ima_celebrity = "All my neighbors know who I am!";
 
  function lonely_house() {
   var agoraphobic = "I fear the day star!",
    a_cat = "Meow.";
  }
 }
</script>

Our global star, ima_celebrity, is recognized by everyone. She’s politically active, talking with the_president on a fairly frequent basis, and incredibly friendly; she’ll sign autographs and answer questions for anyone she runs into. That said, she doesn’t have a whole lot of personal contact with her fans. She’s pretty sure they exist and that they probably have lives of their own somewhere, but she certainly doesn’t know what they’re doing, or even their names.

Inside pleasantville, the_mayor is a well-known face. She’s always walking the streets of her town, chatting up her constituents, shaking hands, and kissing babies. As pleasantville is a big, important neighborhood, she’s got a big red phone in her office, giving her a direct line to the president (or at least a top aide) 24 hours a day, 7 days a week. She’s seen lonely_house up on a hill at the outskirts of town, but never really worried about who lives inside.

That lonely_house is a world unto itself. The agoraphobic stays inside most of the time, playing solitaire and feeding a_cat. He’s called the_mayor a few times to ask about local noise regulations, and even wrote ima_celebrity (Pleasantville’s ima_celebrity, that is) some fan mail after seeing her on the local news.

this? What’s that?

In addition to establishing a scope chain, each execution context offers a keyword named this. In its most common usage, this serves as an identity function, providing our neighborhoods a way of referring to themselves. We can’t always rely on that behavior, however: Depending on how we get into a particular neighborhood, this might mean something else entirely. In fact, how we get into the neighborhood is itself exactly what this generally refers to. Four scenarios deserve special attention:

• Calling an Object’s Method

  In typical object-oriented programming, we need a way of identifying and referring to the object that we’re currently working with. this serves the purpose admirably, providing our objects the ability to examine themselves, and point at their own properties.

   <script type="text/javascript">
  var deep_thought = {
   the_answer: 42,
   ask_question: function () {
    return this.the_answer;
   }
  };
 
  var the_meaning = deep_thought.ask_question();
 </script>

  This example builds an object named deep_thought, sets its the_answer property to 42, and creates an ask_question method. When deep_thought.ask_question() is executed, JavaScript establishes an execution context for the function call, setting this to the object referenced by whatever came before the last ”.”, in this case: deep_thought. The method can then look in the mirror via this to examine its own properties, returning the value stored in this.the_answer: 42.

• Constructor

  Likewise, when defining a function to be used as a constructor with the new keyword, this can be used to refer to the object being created. Let’s rewrite the example above to reflect that scenario:

   <script type="text/javascript">
  function BigComputer(answer) {
   this.the_answer = answer;
   this.ask_question = function () {
    return this.the_answer;
   }
  }
 
  var deep_thought = new BigComputer(42);
  var the_meaning = deep_thought.ask_question();
 </script>

  Instead of explicitly creating the deep_thought object, we’ll write a function to create BigComputer objects, and instantiate deep_thought as an instance variable via the new keyword. When new BigComputer() is executed, a completely new object is created transparently in the background. BigComputer is called, and its this keyword is set to reference that new object. The function can set properties and methods on this, which is transparently returned at the end of BigComputer’s execution.

  Notice, though, that deep_thought.the_question() still works just as it did before. What’s going on there? Why does this mean something different inside the_question than it does inside BigComputer? Put simply, we entered BigComputer via new, so this meant “the new object.” On the other hand, we entered the_question via deep_thought, so while we’re executing that method, this means “whatever deep_thought refers to”. this is not read from the scope chain as other variables are, but instead is reset on a context by context basis.

• Function Call

  What if we just call a normal, everyday function without any of this fancy object stuff? What does this mean in that scenario?

   <script type="text/javascript">
  function test_this() {
   return this;
  }
  var i_wonder_what_this_is = test_this();
 </script>

  In this case, we weren’t provided a context by new, nor were we given a context in the form of an object to piggyback off of. Here, this defaults to reference the most global thing it can: for web pages, this is the window object.

• Event Handler

  For a more complicated twist on the normal function call, let’s say that we’re using a function to handle an onclick event. What does this mean when the event triggers our function’s execution? Unfortunately, there’s not a simple answer to this question.

  If we write the event handler inline, this refers to the global window object:

   <script type="text/javascript">
  function click_handler() {
   alert(this); // alerts the window object
  }
 </script>
 ...
 <button id='thebutton' onclick='click_handler()'>Click me!</button>

  However, when we add an event handler via JavaScript, this refers to the DOM element that generated the event. (Note: The event handling shown here is short and readable, but otherwise poor. Please use a real addEvent function instead.):

   <script type="text/javascript">
  function click_handler() {
   alert(this); // alerts the button DOM node
  }
 
  function addhandler() {
   document.getElementById('thebutton').onclick = click_handler;
  }
 
  window.onload = addhandler;
 </script>
 ...
 <button id='thebutton'>Click me!</button>

Complications

Let’s run with that last example for a moment longer. What if instead of running click_handler, we wanted to ask deep_thought a question every time we clicked the button? The code for that seems pretty straightforward; we might try this:

<script type="text/javascript">
 function BigComputer(answer) {
  this.the_answer = answer;
  this.ask_question = function () {
   alert(this.the_answer);
  }
 }
 
 function addhandler() {
  var deep_thought = new BigComputer(42),
   the_button = document.getElementById('thebutton');
 
  the_button.onclick = deep_thought.ask_question;
 }
 
 window.onload = addhandler;
</script>

Perfect, right? We click on the button, deep_thought.ask_question is executed, and we get back “42.” So why is the browser giving us undefined instead? What did we do wrong?

The problem is simply this: We’ve passed off a reference to the ask_question method, which, when executed as an event handler, runs in a different context than when it’s executed as an object method. In short, the this keyword in ask_question is pointing at the DOM element that generated the event, not at a BigComputer object. The DOM element doesn’t have a the_answer property, so we’re getting back undefined instead of “42.” setTimeout exhibits similar behavior, delaying the execution of a function while at the same time moving it out into a global context.

This issue crops up all over the place in our programs, and it’s a terribly difficult problem to debug without keeping careful track of what’s going on in all the corners of your program, especially if your object has properties that do exist on DOM elements or the window object.

Manipulating Context With .apply() and .call()

We really do want to be able to ask deep_thought a question when we click the button, and more generally, we do want to be able to call object methods in their native context when responding to things like events and setTimeout calls. Two little-known JavaScript methods, apply and call, indirectly enable this functionality by allowing us to manually override the default value of this when we execute a function call. Let’s look at call first:

<script type="text/javascript">
 var first_object = {
  num: 42
 };
 var second_object = {
  num: 24
 };
 
 function multiply(mult) {
  return this.num * mult;
 }
 
 multiply.call(first_object, 5); // returns 42 * 5
 multiply.call(second_object, 5); // returns 24 * 5
</script>

In this example, we first define two objects, first_object and second_object, each with a num property. Then we define a multiply function that accepts a single argument, and returns the product of that argument, and the num property of its this object. If we called that function by itself, the answer returned would almost certainly be undefined, since the global window object doesn’t have a num property unless we explicitly set one. We need some way of telling multiply what its this keyword ought refer to; the call method of the multiply function is exactly what we’re looking for.

The first argument to call defines what this means inside the executed function. The remaining arguments to call are passed into the executed function, just as if you’d called it yourself. So, when multiply.call(first_object, 5) is executed, the multiply function is called, 5 is passed in as the first argument, and the this keyword is set to refer to object first_object. Likewise, when multiply.call(second_object, 5) is executed, the multiply function is called, 5 is passed in as the first argument, and the this keyword is set to refer to object second_object.

apply works in exactly the same way as call, but allows you to wrap up the arguments to the called function in an array, which can be quite useful when programatically generating function calls. Replicating the functionality we just talked about using apply is trivial:

<script type="text/javascript">
 ...
 
 multiply.apply(first_object, [5]); // returns 42 * 5
 multiply.apply(second_object, [5]); // returns 24 * 5
</script>

apply and call are very useful on their own, and well worth keeping around in your toolkit, but they only get us halfway to solving the problem of context shifts for event handlers. It’s easy to think that we could solve the problem by simply using call to shift the meaning of this when we set up the handler:

function addhandler() {
 var deep_thought = new BigComputer(42),
  the_button = document.getElementById('thebutton');
 
 the_button.onclick = deep_thought.ask_question.call(deep_thought);
}

The problem with this line of reasoning is simple: call executes the function immediately. Instead of providing a function reference to the onclick handler, we’re giving it the result of an executed function. We need to exploit another feature of JavaScript to really solve this problem.

The Beauty of .bind()

I’m not a huge fan of the Prototype JavaScript framework, but I am very much impressed with the quality of its code as a whole. In particular, one simple addition it makes to the Function object has had a hugely positive impact on my ability to manage the context in which function calls execute: bind performs the same general task as call, altering the context in which a function executes. The difference is that bind returns a function reference that can be used later, rather than the result of an immediate execution that we get with call.

If we simplify the bind function a bit to get at the key concepts, we can insert it into the multiplication example we discussed earlier to really dig into how it works; it’s quite an elegant solution:

<script type="text/javascript">
 var first_object = {
  num: 42
 };
 var second_object = {
  num: 24
 };
 
 function multiply(mult) {
  return this.num * mult;
 }
 
 Function.prototype.bind = function(obj) {
  var method = this,
   temp = function() {
    return method.apply(obj, arguments);
   };
 
  return temp;
 }
 
 var first_multiply = multiply.bind(first_object);
 first_multiply(5); // returns 42 * 5
 
 var second_multiply = multiply.bind(second_object);
 second_multiply(5); // returns 24 * 5
</script>

First, we define first_object, second_object, and the multiply function, just as before. With those taken care of, we move on to creating a bind method on the Function object’s prototype, which has the effect of making bind available for all functions in our program. When multiply.bind(first_object) is called, JavaScript creates an execution context for the bind method, setting this to the multiply function, and setting the first argument, obj, to reference first_object. So far, so good.

The real genius of this solution is the creation of method, set equal to this (the multiply function itself). When the anonymous function is created on the next line, method is accessible via its scope chain, as is obj (this couldn’t be used here, because when the newly created function is executed, this will be overwritten by a new, local context). This alias to this makes it possible to use apply to execute the multiply function, passing in obj to ensure that the context is set correctly. In computer-science-speak, temp is a closure that, when returned at the end of the bind call, can be used in any context whatsoever to execute multiply in the context of first_object.

This is exactly what we need for the event handler and setTimeout scenarios discussed above. The following code solves that problem completely, binding the deep_thought.ask_question method to the deep_thought context, so that it executes correctly whenever the event is triggered:

function addhandler() {
 var deep_thought = new BigComputer(42),
  the_button = document.getElementById('thebutton');
 
 the_button.onclick = deep_thought.ask_question.bind(deep_thought);
}

Beautiful.

References

• JavaScript Closures is the best resource on the net for a thorough discussion of closures: what they do, how they do it, and how to use them without going insane.
• The Protype JavaScript Framework is full of little nuggets like bind. The version available here not only allows the binding of a particular this value, but also of some or all of a function’s arguments, which comes in handy all too often.
• Douglas Crockford’s JavaScript essays are excellent resources for both basic and advanced JavaScript programmers. The man knows what he’s talking about, and explains difficult concepts in an easy-to-grasp manner.
• Variable Scope for New Programmers is a good article if you'd like more discussion of scope from a beginner's perspective. Written by Jonathan Snook, and published in this very magazine at the end of last year, it's still an informative and useful read.

    text.onclick=EventBuilder(container);
    //在这里无论是上面这种写法还是直接写function(){}结果占用内存都一样
    //只有直接引用外部函数如text.onclick=EventBuilder才能释放button对象,减少内存
    document.body.appendChild(container);
    document.body.appendChild(text);
    //如果onmouseover中我没有用到container 当然可以用 text=null container=null来打破循环引用
    //经测试用null打不破循环
}

function EventBuilder(container)
{
    return function(e)
    {
        alert(container)//这里container可访问
        text=this;//用this访问自身
    }
}
for(var i =0;i<5000;i++)
myButton()
//conclusion
闭包使返回的内部函数持有私有变量，所以此私有变量持有的dom对象不能被回收。
（被回收的条件：1。 没有context 2。没有被引用 ）
不内部写function。把内部变量传递给外部函数闭包返回不能解决问题。
所以唯一的方法是直接引用外部函数，如text.onclick = outFunc;

<style>
.tdp
{
    border-bottom: 1 solid #000000;
    border-left: ? solid #000000;
    border-right: ? solid #ffffff;
    border-top: 0 solid #ffffff;
}
.tabp
{
    border-color: #000000 #000000 #000000 #000000;
    border-style: solid;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}
.NOPRINT {
 font-family: "宋体";
 font-size: 9pt;
}

</style>

</head>

<body >
<center class="Noprint" >
  <p>
  <OBJECT  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0>
  </OBJECT>
  <input  type=button  value=打印          onclick=document.all.WebBrowser.ExecWB(6,1)>
  <input  type=button  value=直接打印  onclick=document.all.WebBrowser.ExecWB(6,6)>
  <input  type=button  value=页面设置  onclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
  <p>    <input  type=button  value=打印预览  onclick=document.all.WebBrowser.ExecWB(7,1)>
    <br>
    </p>
  <hr align="center" width="90%" size="1" noshade>
</center>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">
 <tr>
  <td colspan="3" class="tdp">第1页</td>
    </tr>
 <tr>
   <td width="29%" class="tdp">&nbsp;</td>
   <td width="28%" class="tdp">&nbsp;</td>
      <td width="43%" class="tdp">&nbsp;</td>
  </tr>
 <tr>
   <td colspan="3" class="tdp">&nbsp;</td>
  </tr>
 <tr>
   <td colspan="3" class="tdp"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" class="tdp"><p>这样的报表</p>
          <p>对一般的要求就够了。</p></td>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT" >

<div class="PageNext"></div><!--打印范围控制-->

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0"  class="tabp">
  <tr>
    <td class="tdp">第2页</td>
  </tr>
  <tr>
    <td class="tdp">看到分页了吧</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp">&nbsp;</td>
  </tr>
  <tr>
    <td class="tdp"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" class="tdp"><p>这样的报表</p>
              <p>对一般的要求就够了。</p></td>
          <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>

</body>
</html>

var LetterPaperConstructor = {

 config : (function ()
 {
  var obj = document.getElementById("paper");
  return {
   title : obj.getAttribute("title") || "",
   date : obj.getAttribute("date") || "1900-1-1",
   heart : obj.getAttribute("heart") || "",
   weather : obj.getAttribute("weather") || "",
   author : obj.getAttribute("author") || "",
   content : obj.innerHTML
  };
 })(),

 corePath : (
  function ()
  {
   var s = document.getElementsByTagName("script");
    s = s[s.length - 1];
   var c = s.src;
    c = c.match(/(.*)core\.js$/)[1];
   return c;
  }
 )(),

 template : [
   "<html>",
   " <head>",
   "  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />",
   "  <title>{title}</title>",
   "  <style type=\"text/css\">",
   "   body, td { font: 14px ËÎÌå; }",
   "   body { background-color: #ddd; margin: 0; padding: 0; }",
   "   #content { width: auto; margin: 0 45px; background: #fff url(\"{corePath}common/images/line.gif\") repeat 0 0; line-height: 20px; }",
   "   #content td { color: #808080; }",
   "   #content .title { width: auto; text-align: center; font-weight: bold; }",
   "   #padding-bottom { width: auto; height: 37px; }",
   "  </style>",
   " </head>",
   " <body>",
   "  <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"608\" align=\"center\" style=\"margin: 5px auto;\">",
   "   <tr><td background=\"{corePath}common/images/table-top.gif\" width=\"608\" height=\"45\"></td></tr>",
   "   <tr><td background=\"{corePath}common/images/table-middle.gif\">",
   "    <div id=\"content\">",
   "     <div class=\"title\">{title}</div>",
   "     <table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" height=\"20\">",
   "      <tr>",
   "       <td width=\"120\">Date:<i> {date}</i></td>",
   "       <td width=\"120\">Heart:<i> {heart}</i></td>",
   "       <td width=\"120\">Weather:<i> {weather}</i></td>",
   "       <td width=\"120\">Author:<i> {author}</i></td>",
   "      </tr>",
   "     </table>",
   "     {content}",
   "    </div>",
   "    <div id=\"padding-bottom\">&nbsp;</div>",
   "   </td></tr>",
   "   <tr><td background=\"{corePath}common/images/table-bottom.gif\" height=\"8\"></td></tr>",
   "  </table>",
   " </body>",
   "</html>"
  ],

 disposeTemplate : function ()
 {
  this.template = this.template.join("\r\n")
   .replace(/\{corePath\}/g, this.corePath)
   .replace(/\{title\}/g, this.config.title)
   .replace(/\{content\}/, this.config.content)
   .replace(/\{date\}/, this.config.date)
   .replace(/\{heart\}/, this.config.heart)
   .replace(/\{weather\}/, this.config.weather)
   .replace(/\{author\}/, this.config.author);
 },

 initialize : function ()
 {
  var me = this;
  this.disposeTemplate();
  window.setTimeout(function ()
  {
   document.write(me.template);
  }, 1);
 }

}
LetterPaperConstructor.initialize();

<script type="text/javascript"><!--
var keyStr = "ABCDEFGHIJKLMNOP" +
             "QRSTUVWXYZabcdef" +
             "ghijklmnopqrstuv" +
             "wxyz0123456789+/" +
             "=";

function encode64(input) {
   input = escape(input);
   var output = "";
   var chr1, chr2, chr3 = "";
   var enc1, enc2, enc3, enc4 = "";
   var i = 0;

   do {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
         enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
         enc4 = 64;
      }

      output = output +
         keyStr.charAt(enc1) +
         keyStr.charAt(enc2) +
         keyStr.charAt(enc3) +
         keyStr.charAt(enc4);
      chr1 = chr2 = chr3 = "";
      enc1 = enc2 = enc3 = enc4 = "";
   } while (i < input.length);

   return output;
}

function decode64(input) {
   var output = "";
   var chr1, chr2, chr3 = "";
   var enc1, enc2, enc3, enc4 = "";
   var i = 0;

   // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
   var base64test = /[^A-Za-z0-9\+\/\=]/g;
   if (base64test.exec(input)) {
      alert("There were invalid base64 characters in the input text.\n" +
            "Valid base64 characters are A-Z, a-z, 0-9, '+', '/', and '='\n" +
            "Expect errors in decoding.");
   }
   input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

   do {
      enc1 = keyStr.indexOf(input.charAt(i++));
      enc2 = keyStr.indexOf(input.charAt(i++));
      enc3 = keyStr.indexOf(input.charAt(i++));
      enc4 = keyStr.indexOf(input.charAt(i++));

      chr1 = (enc1 << 2) | (enc2 >> 4);
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
      chr3 = ((enc3 & 3) << 6) | enc4;

      output = output + String.fromCharCode(chr1);

      if (enc3 != 64) {
         output = output + String.fromCharCode(chr2);
      }
      if (enc4 != 64) {
         output = output + String.fromCharCode(chr3);
      }

      chr1 = chr2 = chr3 = "";
      enc1 = enc2 = enc3 = enc4 = "";

   } while (i < input.length);

   return unescape(output);
}

//-->
</script>

<body>
<form name="base64Form">
   Type in the message you want to encode in base64, or paste<br>
   base64 encoded text into the text field, select Encode or Decode, <br>
   and click the button!<br>

   <textarea name="theText" cols="40" rows="6"></textarea><br>

   <input type="button" name="encode" value="Encode to base64"
      onClick="document.base64Form.theText.value=encode64(document.base64Form.theText.value);">
   <input type="button" name="decode" value="Decode from base64"
      onClick="document.base64Form.theText.value=decode64(document.base64Form.theText.value);">
</form>
</body>
</html>

</script>
</body>
</html>

</implements>
<public>
  <event name="customize" />
  <method name="test"/>
</public>
<script language="JScript">
<![CDATA[
function ld()
{
   document.body.innerHTML += "load successfully!";
}
var orColor,orBg;
function over(){
   orColor = style.color;
   style.color = "red";
   style.backgroundColor = "yellow";
}
function out(){
   style.color = orColor;
   style.backgroundColor = "";
}
function test(){
var oEvent = createEventObject();
oEvent.asfman="pass the expando prop";
fireEvent("customize",oEvent);
return 123;
}
]]>
</script>
</component>
htm文件：
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>this is a test div</title>
</head>

<body>
<div id="test" style="behavior:url(behavior.wsc);border:1px solid red;width:200px;height:100px;line-height:100px;text-align:center;"></div>
<script>
var o = document.getElementById("test");
o.customize=function(){alert(event.asfman);};
alert(o.test());
</script>
</body>

</html>
新在学会了通过createEventObject创建事件实例传递属性给event，非常爽

<html>

<head>
<title>WMI Scripting HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JScript" event="OnCompleted(hResult,pErrorObject, pAsyncContext)" for="foo">

document.forms[0].txtMACAddr.value=unescape(MACAddr);
document.forms[0].txtIPAddr.value=unescape(IPAddr);
document.forms[0].txtDNSName.value=unescape(sDNSName);
//document.formbar.submit();
</script>
<script language="JScript" event="OnObjectReady(objObject,objAsyncContext)" for="foo">

if(objObject.IPEnabled != null && objObject.IPEnabled != "undefined" && objObject.IPEnabled == true)
...{
if(objObject.MACAddress != null && objObject.MACAddress != "undefined")
MACAddr = objObject.MACAddress;
if(objObject.IPEnabled && objObject.IPAddress(0) != null && objObject.IPAddress(0) != "undefined")
IPAddr = objObject.IPAddress(0);
if(objObject.DNSHostName != null && objObject.DNSHostName != "undefined")
sDNSName = objObject.DNSHostName;
}
</script>
</head>

<body>

<object id="locator" classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" viewastext>
</object>
<object id="foo" classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223">
</object>
<script language="JScript">
var service = locator.ConnectServer();
var MACAddr ;
var IPAddr ;
var DomainAddr;
var sDNSName;
service.Security_.ImpersonationLevel=3;
service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');
</script>
<form id="formfoo" name="formbar" action="index.do" method="post">
    <input value="00-11-11-B4-52-EF" name="txtMACAddr" />
    <input value="210.42.38.50" name="txtIPAddr" />
    <input value="zhupan" name="txtDNSName" />
</form>

</body>

</html>

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1859378

function f(a,b,c)
{
    var t=check(arguments,this);
    if(t)return t;
    alert([a,b,c]);
}
var d=f(1)(2)(3);
var e=f(4,5)(6);
</script>

     假设你想创建十个新段落。你可能这样写：

var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++)
...{
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    document.body.appendChild(op);
}

 这段代码运行良好，但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时，文档碎片会更高效：

var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();

for(var i=0;i<arrText.length;i++)
...{
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    oFrag.appendChild(op);
    
}
document.body.appendChild(oFrag);

其实你永远不需要在JavaScript使用 new Object()。用字面量的形式{}去取代吧。

同理，不要使用 new Array() ，而代之以字面量[]。JavaScript中的数组并不象Java中的数组那样工作的，使用类似Java的语法只会让你糊涂。

同理不用使用 new Number, new String, 或者 new Boolean。这些的用法只会产生无用的类型封装对象。就直接使用简单的字面量吧。

不要使用 new Function 去创建函数对象。用函数表达式更好。比如：

frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”)

更好的写法是：

frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;};

第二种形式让脚本编译器更快的看到函数主体，于是其中的语法错误也会更快被检测出来。有时候程序员使用 new Function 是因为他们没有理解内部函数是如何工作的。

selObj.onchange = new Function(”dynamicOptionListObjects[”+
        dol.index+”].change(this)”);

如果我们让用字符串做函数体，编译器不能看到它们。如果我们用字符串表达式做函数体，我们同样也看不到它们。更好的方式就是不要盲目编程。通过制造一个返回值为函数的函数调用，我�