Examples of eval and with usages in JavaScript summarize _javascript tips

Source: Internet
Author: User
Tags eval object object

The examples in this article describe the eval and with usage in JavaScript. Share to everyone for your reference, specific as follows:

We all know the scope mechanism of JavaScript, but with and eval sometimes "break" our general understanding of the scope. The following reference online resources and their own understanding summarizes the use of eval and with.

One, eval

1,eval function: A string as a JS expression to execute it.

2. Syntax: eval (strscript) Note: parameter strscript is required

3, the use of instructions

(1) It has a return value, and if the argument string is an expression, the value of the expression is returned. If the argument string is not an expression and there is no value, return "undefined".
(2) The parameter string, when executed as code, is related to the context in which the Eval function is invoked, where the variable or function call that appears must be available in the context of the call to Eval.

4, Examples:

function $ (s) {if (document.getElementById) {return eval (' document.getElementById (' + S + ') ');} else {return eval (' document.all. ' + s);}}
Eval, this comparison is commonly used var myTest = function () {return "eval test";}; function Evaltest () {//Simple Data alert (eval ("1+1"));//2 Alert (eval ("' A ' +1");//a1 alert (eval ("1+ ')");//1A alert (Eval ("parseint (' a ' + 1)")); NaN Alert (eval ("parseint (1+ ')")); 1 Alert (eval ("true")); True Alert (eval ("0==false")); True Alert (eval ("1==undefined")); False Alert (eval ("isNaN (undefined)")); True//Function and Object alert (eval ("this")); [Object] Alert (eval ("typeof (This)")); Object Alert (eval ("typeof (Test)")); Undefined alert (eval ("evaltest")); This displays the details of the definition statement for the current function, including the comment//alert (eval ("Evaltest ()"));
  Call yourself and execute, this will be a big problem ah! Alert (eval ("typeof (Evaltest)"));
  function//other var Tmpfunc = "{a:1}"; Alert (eval (tmpfunc)); 1 Alert (eval ("+ Tmpfunc +")); [Object Object] Alert (eval ("Tmpfunc")); {a:1}//alert (eval ("Tmpfunc ()")); Script Error alert (MyTest ()); Eval ("Alert (MyTest ())");
  and above equivalent alert (eval (myTest)); Alert (eval ("myTest")); and an Input,id=txtusername eval ("$ (' txtUserName ')" in the equivalent//form above. value= ' Jeff Wong ';
  Equivalent to $ (' txtUserName '). Value = ' Jeff Wong ';
Eval ("Alert ($ (' txtusername '); value);"; 

 } evaltest ();

5. Eval and scope

(1) Classic Code Analysis

A, common

var str = "global";
function test () {
  alert (str);//undefined
  var str = "local";
}
Test ();
alert (str); Global

Analysis: As we expected, get the specified value. The STR in the test function is not Var and has a Var declaration, and the result is different and the reader can verify it.

B, eval substitution for direct declaration of variables

var str = "global";
function test () {
  alert (str);
  Eval ("var str= ' local ';"); /Will it
  be as we expected? var str = "local";
  alert (str); What's the result here?
}
Test ();
alert (str); //??

Analysis: Contrast A In the wording, we just in the test function with the Eval statement to replace the direct declaration of the VAR definition variable The last alert, the result is very large.

(2) eval defines the global code

A, compatible with IE and FF general definition of the Eval function of global code

var nav = new Object ();
Universal eval function
nav. The Eval = function (jscode) {
  if (document.all)//ie is execscript
   execscript (jscode);
  else Window.eval (Jscode); Under FF is Window.eval
}

For IE browsers, function execscript is used to execute code in the global space.
For the Firefox browser, the Eval function is invoked directly in the caller's space, if the call Window.eval is executed in the global space, but the return value of alert (Eval==window.eval) is true, the odd ff.

b, call A's test code

var nav = new Object ();
Universal eval function
nav. The Eval = function (jscode) {
  if (document.all)//ie is execscript
   execscript (jscode);
  else Window.eval (Jscode); Under FF is window.eval
}
function Test () {
  nav. Eval ("var str = ' global ';"); Variable STR is declared here, and variable Nav can be invoked in the outer function
  . Eval ("var tmpfunc = function () {alert (' global function ');};"); This declares the function variable tmpfunc, in which function
  alert (str) can be invoked,//global
  tmpfunc (),//global function
}
test ()
; alert (str); Global (Call NAV. The global variable declared by the Eval function)
tmpfunc ();//global function (called NAV. Global function declared by the Eval function)

Analysis: Through the code in B, you may have found an obvious inconvenient place for eval to define global code, which is completely out of the question for global code, JS Smart hints (VS, maybe other tools). So you will certainly ask, in the program through the eval this way to define a lot of global code, its maintainability will be too much? My opinion is to agree with the summary of the Internet, with less eval. After all, off-the-shelf tools are not very good tips, and the programmer's eyesight is often not so good.

Second, with

1.With statement: Specifies a default object for one or a set of statements, typically used to shorten the amount of code that must be written in a particular case .
2. Syntax: With (< OBJECT >) < statement >
With (object)
Statements
(1) Parameter object: the new default object;
(2) Statements: One or more statements, object is the default object for the statement.

3, Examples:

function Withtest () {with
 (document) {//document repeated use
 writeln ("Hello,");
 Writeln ("It ' s A with keyword test!");
 }
 Duplicate
 alert (random ()) with (Math) {//math;
 Alert (ABS ( -10));
 }
Withtest ();

4. With will temporarily modify the scope chain

function Withtest () {
 var userName = ' Jeff Wong ';
 Temporarily modifies the scope chain with
 (document) {
 writeln ("Hello,");
 Writeln (UserName);
 } After execution of the statement within the with, the scope chain is restored to the original
 alert (userName);
}
Withtest ();

Analysis: function withtest in the definition of the withtest scope chain, we think that this scope chain is the top of the Window object, when Withtest was executed, the JS engine generated a call Object (called) and adds it to the end of the scope chain (after the Window object), when the statement runs to with (document), a new scope is generated (essentially the scope of the scope and normal function, except that it executes in the WITH clause, The scope disappears as well) and is added to the end of the scope chain, so a variable lookup within the with will take precedence over this chain's with (document) scope and then look up from the Withtest call object and finally look for window. Once the statement in the with is executed, the scope chain is restored (the scope generated by the with (document) is moved out of the scope chain).

Ps:with is not recommended because operation of the scope chain (move in, move out of scope) is required, and execution is inefficient.

I hope this article will help you with JavaScript programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.