javascript eval(func()) usage example_javascript skills

The function of eval is actually very simple. It is to pass a string to the JS interpreter, and the Javascript interpreter will interpret the string into Javascript code and execute it.

Take the simplest example:

Copy the code The code is as follows: eval("alert(1 1)"); script> It’s very simple, interpret the string into JS The code is executed and 2 pops up.

Of course, the above example is just a toy, and no one would be stupid enough to use it in reality. I think the most basic way to use the eval function is in the DOM. For example, if we have div1, div2, and div3, then there is no way to get our ID when using document.getElementByID. So the simplest way is to use it in a for loop. Use eval to splice such a program. For example: Copy code The code is as follows: for (var loop = 1; loop eval('document.getElementById("div" loop).innerHTML="123"'); } script> After talking about the most basic usage, I believe everyone is still interested in this function. If this function only has this kind of usage, it would be too boring. Then let's take a look at the eval() function bit by bit.

Let’s start with the scope of eval and look at this function: Copy code Code As follows: eval("var i=3"); alert(i); script> The code is very simple and the result can pop up 3. Next, compare this code: Copy code The code is as follows: var test = function () { eval("var i=3"); alert(i); } test(); alert(i); script> The result is that 3 pops up first, then undefined.

Then explain: the code dynamically executed by the eval() function does not create a new scope, and its code is executed in the current scope. So in other words, the eval() function can also use this, argument and other objects in the current scope.

In IE, a function very similar to eval() is supported: execScript(). We can write a simple code. Copy code The code is as follows: var test = function () { execScript("var i=3"); alert(i); } test(); alert(i); script> The result is that two 3s pop up, which also shows the characteristics of the execScript function. First of all, it is similar to eval, and can interpret strings into JS codes and execute them. , but its scope is not the current scope, but the global scope. When we put the above code into Firefox and Google Chrome and try it: we find that the code on execScript is invalid on Firefox, which also illustrates a problem. There is a problem with the browser compatibility of the execScript code.

Then this leads to the question, how can we bring together the "advantages" of these two functions, that is, global browser compatibility. I searched online and summarized it myself. It looks like this: Copy the code The code is as follows: var StrongEval = function (code) { if (window.navigator.userAgent.indexOf("MSIE") >= 1) { execScript(code); } if (window.navigator.userAgent.indexOf("Firefox") >= 1) { window.eval(code); } else { execScript(code); } }; var Test = function () { StrongEval("var i=3"); } Test(); alert(i); script> This will be perfectly compatible with FF and IE. The essential code is that eval and window.eval are not equivalent in FF. This is a very strange thing.

In addition, we can also use eval with to achieve some weird tricks.

We can write code like this in a general sense: Copy code The code is as follows: var obj = function () { this.a = 1; this.b = 2; this.c = 5; this.fun = function () { this.c = this.a this.b; } }; var o = new obj(); o.fun(); alert(o.c ; var obj = { a: 1, b: 2, c: 5, fun: function () { this.c = this.a this.b ; } } Or this:

Copy code

Code As follows:

var obj = function () { this.a = 1; this.b = 2; this.c = 5; }; obj.prototype.fun = function () { this.c = this.a this.b; } var o = new obj(); o.fun() ; alert(o.c); No matter what, are you tired of this? Then let us take a very different approach, so that it may be more comfortable to the senses at least.

Copy code

The code is as follows:

var funtemp = function () { c = a b; } var obj = { a: 1, b: 2, c: 5 }; var fun; with (obj) { eval("fun = " funtemp); } fun(); alert(obj.c); script>

This is very forced, so good, we are not going to discuss whether it looks comfortable or not. Let's discuss such a situation.

Copy code

The code is as follows:

Can we think of this as a simple What about the template method pattern? hehe. We can also call this using eval and with to change the context of a function.

But then again, Eval is rarely used in general situations, and we can completely avoid using it.