如何将字符串转换为内部代码？答案

【问题标题】：How can I convert string to internal code?如何将字符串转换为内部代码？
【发布时间】：2018-04-19 18:04:34
【问题描述】：

当我试图弄清楚 jQuery 是如何工作的时候，这个问题就出现了。如何声明一个字符串，然后将其转换为机器可读。简而言之，如何放置不带引号的字符串，以便字符串解析为document.querySelector，然后使用选择器添加括号。之前，我有eval(S)(.wrapper).className = "red";

我基本上想实现注释的内容，这里是相关代码：

const S = "document.querySelector";
S(".wrapper").className = "red"; 

/* Below is how I want the final result as. */
/* document.querySelector(".wrapper").className = "red" */

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.wrapper{
    width: 100%;
    height: 100vh;
    text-align: center;
    top: 50;
    left: 50;
    color: dodgerblue;
}

.red {
    color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom.js</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <h1>Dom.js</h1>
        <p>Making Dom Manipulation Easier!</p>
    </div>
    <script src="app.js"></script>
</body>

</html>

【问题讨论】：

您不必将其设为字符串。 var S = document.querySelector; 将允许您在该变量作用域的代码中使用 S 代替该方法。不知道为什么要这样做，因为它会使代码不太清晰。
10 次中有 11 次，当有人想知道如何将字符串转换为可执行代码时，解决方案是换个角度思考问题。

标签： javascript jquery

【解决方案1】：

你可以创建一个返回document.querySelector(selector)的函数

const S = (selector) => {
  return document.querySelector(selector)
}

// or 
/*
const S = function(selector) {
  return document.querySelector(selector)
}
*/

S(".wrapper").className = "red";

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  text-align: center;
  top: 50;
  left: 50;
  color: dodgerblue;
}

.red {
  color: red;
}

<div class="wrapper">
  <h1>Dom.js</h1>
  <p>Making Dom Manipulation Easier!</p>
</div>

或者，如建议 in this post ，不使用函数并保留上下文，使用 bind

var S = document.querySelector.bind(document)

S(".wrapper").className = "red";

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  text-align: center;
  top: 50;
  left: 50;
  color: dodgerblue;
}

.red {
  color: red;
}

<div class="wrapper">
  <h1>Dom.js</h1>
  <p>Making Dom Manipulation Easier!</p>
</div>

【讨论】：

你可以这样做，但实际上这样做是没有意义的。只需将方法分配给变量即可获得相同的结果，但定义的方法少了一个。
@Taplar 完全同意你的观点，但如果我理解正确，这就是问题所在......只是为了避免eval()
避免使用 eval() 并不意味着你必须使用箭头函数。
@Taplar 见stackoverflow.com/questions/10743596/…
啊。 jsfiddle.net/5gcpjh54/24 因此，要不使用箭头方法，您必须将文档绑定到它，以便上下文仍然存在。猜猜这是有道理的。其中 bind() 也创建了一个新方法，所以 耸耸肩，不保存任何东西箭头方法与 bind