如何在 JSON 中存储 javascript 函数

Question

我有一个 JS 对象我想保存在本地存储中以备将来使用，但我无法将其解析为字符串。

代码：

JSON.stringify({
    a: 5,
    b: function (param) {
        return param;
    }
})

结果：

"{"a":5}"

如果不使用 JSON，我如何保存它以供将来使用？

（并创建我自己的 Lexer-Parser 来中断字符串函数，我认为这不是一个选项）

Answer 1

您不能在 JSON 中存储函数。

JSON 中的值只能包含 string、number、object、array、true、 false 或 null:

查看on JSON site。

Answer 2

通常这样的问题表明存在 X/Y 问题：你需要做 X，你认为 Y 会帮助你做到这一点，所以你尝试做 Y，做不到，然后问如何做 Y。它会经常问如何做 X 更有用。

但回答问题：您可以使用 replacer 和 reviver 函数将函数转换为字符串（在 stringify 期间）并返回到函数（在 parse 期间）以存储函数的字符串版本，但这样做有各种各样的问题，尤其是定义函数的范围可能对函数很重要。 （与您在问题中显示的功能无关，但我认为这并不具有代表性。）将本地存储中的字符串转换为您可以运行的代码意味着您相信本地存储内容没有t 被恶意破坏。当然，除非页面已经容易受到 XSS 攻击，否则这不太可能，但这是一个需要牢记的问题。

这是一个例子，但我不推荐它，除非其他选项已经用尽，尤其是因为它使用eval，它（就像它的近亲new Function）可能是恶意代码的载体：

// The object
var obj = {
    a: 5,
    b: function (param) {
        return param;
    }
};

// Convert to JSON using a replacer function to output
// the string version of a function with /Function(
// in front and )/ at the end.
var json = JSON.stringify(obj, function(key, value) {
  if (typeof value === "function") {
    return "/Function(" + value.toString() + ")/";
  }
  return value;
});

// Convert to an object using a reviver function that
// recognizes the /Function(...)/ value and converts it
// into a function via -shudder- `eval`.
var obj2 = JSON.parse(json, function(key, value) {
  if (typeof value === "string" &&
      value.startsWith("/Function(") &&
      value.endsWith(")/")) {
    value = value.substring(10, value.length - 2);
    return (0, eval)("(" + value + ")");
  }
  return value;
});
document.body.innerHTML = obj2.b(42);

(0, eval)("(" + value + ")"); 构造确保eval 在全局范围内运行，而不是在 reviver 函数的范围内运行。通常eval 具有使用您调用它的作用域的神奇能力，但这仅在您直接调用它时才有效。 如图所示的间接eval（或只是var e = eval; e("(" + value + ")");）没有那种神奇的能力，它在全局范围内运行。

Answer 3

一种简单的方法是

var dstr = JSON.stringify( { a: 5
                           , b: x => x
                           }
                         , (k,v) => typeof v === "function" ? "" + v : v
                         );

Answer 4

我已将函数名称与参数值一起存储在一个数组中，数组中的第一项是函数名称，前面带有 $，以便将它们与普通数组分开。

{
    "object": {
        "your-function": ["$functionName", "param-1", "param-2"],
        "color": ["$getColor", "brand", "brand-2"],
        "normal-array": ["normal", "array"]
        ...
    }
}

在上面的示例中，我使用 Sass 和 JS 函数从全局地图/对象中检索颜色值。以这种方式解析函数自然需要自定义代码，但在 JSON 中“存储”函数方面，我喜欢这种方式。

Answer 5

我推荐这种方法：

将参数和正文存储在您的 json 中：

{"function":{"arguments":"a,b,c","body":"return a*b+c;"}}

现在解析json并实例化函数：

var f = new Function(function.arguments, function.body);

我认为是节省

Answer 6

我根据第一个答案创建了JSON.parseIt() 和JSON.stringifyIt() 函数，而没有使用eval

JSON.stringifyIt = (obj)=>{
    return(
        JSON.stringify(obj, function(key, value) {
            if (typeof value === "function") {
                return "/Function(" + value.toString() + ")/";
            }
            if(typeof value === "string"){
                return "/String(" + value.toString() + ")/"
            }
            return value;
        })
    )
}
JSON.parseIt=(json)=>{
    return(
        JSON.parse(json, function(key, value) {
            if (typeof value === "string" &&
            value.startsWith("/Function(") &&
            value.endsWith(")/")) {
                value = value.substring(10, value.length - 2);
                var string = value.slice(value.indexOf("(") + 1, value.indexOf(")"));
                if(/\S+/g.test(string)){
                    return (new Function(string,value.slice(value.indexOf("{") + 1, value.lastIndexOf("}"))))

                }else{
                    return (new Function(value.slice(value.indexOf("{") + 1, value.lastIndexOf("}"))));
                }
                
            }
            if (typeof value === "string" &&
            value.startsWith("/String(") &&
            value.endsWith(")/")){
                value = value.substring(8, value.length - 2);
            }
            return value;
        })
    )
}

// DEMO

var obj = {
    string:"a string",
    number:10,
    func:()=>{
        console.log("this is a string from a parsed json function");
    },
    secFunc:(none,ntwo)=>{console.log(none + ntwo)} ,
    confuse:"/Function(hello)/"
}
const stringifiedObj = JSON.stringifyIt(obj);
console.log("the stringified object is: ",stringifiedObj);

const parsedObj = JSON.parseIt(stringifiedObj);

// console.log("the parsed object is:  ",parsedObj);
console.log(parsedObj.string);
console.log(parsedObj.number);
console.log(parsedObj.confuse);
parsedObj.func();
parsedObj.secFunc(5,6);

我解决的问题是

• 删除了评估。
• 在字符串化和解析中出现问题，如果我给出一个类似的字符串 "/Function(hello)/" 解析时会是一个函数
• 实现了两个功能
• 添加参数插入