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 code as follows:
<script type="text/javascript">
eval("alert(1+1)");
script>
It's very simple, interpret the string into JS code and execute it, and 2 will pop up.
Of course, the above example is just a toy, and no one would be stupid enough to use it in practice. 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 the code code as follows:
<script type="text/javascript">
for (var loop = 1; loop < 10; 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 such a few uses, 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 the code code as follows:
<script type="text/javascript">
eval("var i=3");
alert(i);
script>
The code is very simple, and the result can pop up 3. Next, compare this code:
Copy the code code as follows:
<script type="text/javascript">
var test = function () {
eval("var i=3");
alert(i);
}
test();
alert(i);
script>
The result is that 3 pops up first, then undefined.
So 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 the code code as follows:
<script type="text/javascript">
var test = function () {
execScript("var i=3");
alert(i);
}
test();
alert(i);
script>
As a result, two 3s popped up. This also shows the characteristics of the execScript function. First of all, it is similar to eval. It can interpret strings into JS code and execute it, but its scope is not the current scope, but the global scope. Scope. When we try the above code on Firefox and Google Chrome: 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 the question arises, how can we bring together the "advantages" of these two functions, that is, global + browser compatibility. I searched online and summarized it myself, which is probably like this:
Copy the code code as follows:
<script type="text/javascript">
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>
In this way, it can 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.
In a general sense we can write code like this:
Copy the code code 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(oc);
Or this:
Copy the code code as follows:
var obj = {
a: 1,
b: 2,
c: 5,
fun: function () {
this.c = this.a + this.b;
}
}
Or this:
Copy the 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(oc);
No matter what, are you tired of this feeling? Then let us take a very different approach, so that it may be more comfortable for the senses at least.
Copy the code code as follows:
<script type="text/javascript">
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 one is very forced and so good. We are not going to discuss whether it looks comfortable or not. Let's discuss such a situation.
Copy the code code as follows:
<script>
varDBCommon = function () {
alert("1."); CreateConnection();
alert("2."); OpenConnection();
alert("3."); CreateCommand();
alert("4."); ExcuteCommand();
alert("5."); CloseConnection();
}
var SQLServerCommon = {
CreateConnection: function () { alert("Establish SQL Server connection"); },
OpenConnection: function () { alert("Open SQL Server connection"); },
CreateCommand: function () { alert("Create SQL Server command"); },
ExcuteCommand: function () { alert("Execute DSQL Server command"); },
CloseConnection: function () { alert("Close SQL Server connection"); }
};
var OracleCommon = {
CreateConnection: function () { alert("Establish ￠Oracle connection"); },
OpenConnection: function () { alert("Open aOracle connection"); },
CreateCommand: function () { alert("Create ¨Oracle command"); },
ExcuteCommand: function () { alert("Execute DOracle command"); },
CloseConnection: function () { alert("Close?Oracle connection"); }
};
with (SQLServerCommon) {
eval("forSQLServer=" + DBCommon);
}
with (OracleCommon) {
eval("forOracle=" + DBCommon);
}
forSQLServer();
forOracle();
script>
Can we think of this as a simple 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.