如何在JavaScript中序列化函数?

问题描述 投票:28回答:6

例如,假设我有一个定义如下的函数:

function foo() {
  return "Hello, serialized world!";
}

我希望能够序列化该函数并使用localStorage存储它。我怎么能这样做呢?

javascript html5 serialization local-storage
6个回答
26
投票

大多数浏览器(Chrome,Safari,Firefox,可能还有其他浏览器)都会从.toString()方法返回函数的定义:

> function foo() { return 42; }
> foo.toString()
"function foo() { return 42; }"

请小心,因为本机函数不能正确序列化。例如:

> alert.toString()
"function alert() { [native code] }"

7
投票
function foo() {
  alert('native function');
  return 'Hello, serialised world!';
}

序列化

var storedFunction = foo.toString();

反序列化

var actualFunction = new Function('return ' + foo.toString())()

Explanation

foo.toString()将是函数foo的字符串版本

"function foo() { ... return 'Hello, serialised world!';}"

但是new Function占据了一个函数的主体,而不是函数本身。

MDN: Function

因此,我们可以创建一个函数,将函数返回给我们并将其分配给某个变量。

"return function foo() { ... return 'Hello, serialised world!';}"

所以现在当我们将这个字符串传递给构造函数时,我们得到一个函数,然后我们立即执行它以获取原始函数。 :)


2
投票

我做了这个答案来解决现有答案的一些相当大的缺陷:如果你的函数分别使用.toString()或命名参数(eval()),new Function() / thisfunction (named, arg) {}本身就不会工作。

使用下面的toJSON(),您需要做的就是像往常一样在函数上调用JSON.stringify(),并在Function.deserialise时使用parse()ing

以下不适用于简洁的函数(hello => 'there'),但对于标准的ES5 fat函数,它将按照定义返回它,当然还有闭包。 My other answer will work with all that ES6 goodness


Function.prototype.toJSON = function() {
    var parts = this
        .toString()
        .match(/^\s*function[^(]*\(([^)]*)\)\s*{(.*)}\s*$/)
    ;
    if (parts == null)
        throw 'Function form not supported';

    return [
        'window.Function',
        parts[1].trim().split(/\s*,\s*/),
        parts[2]
    ];
};
Function.deserialise = function(key, data) {
    return (data instanceof Array && data[0] == 'window.Function') ?
        new (Function.bind.apply(Function, [Function].concat(data[1], [data[2]]))) :
        data
    ;
};

看看DEMO

这是最简单的:

var test = function(where) { return 'hello ' + where; };
test = JSON.parse(JSON.stringify(test), Function.deserialise);
console.log(test('there'));
//prints 'hello there'

更有用的是,您可以序列化包含函数的整个对象并将其拉出:

test = {
  a : 2,
  run : function(x, y, z) { return this.a + x + y + z; }
};
var serialised = JSON.stringify(test);
console.log(serialised);
console.log(typeof serialised);

var tester = JSON.parse(serialised, Function.deserialise);
console.log(tester.run(3, 4, 5));

输出:

{"a":2,"run":["window.Function",["x","y","z"]," return this.a + x + y + z; "]}
string
14

我没有测试过旧的IE,但它适用于IE11,FF,Chrome,Edge。

NB,函数的name丢失了,如果你使用那个属性,那么你无能为力,真的。 您可以将其更改为不轻易使用prototype,但如果您需要,那就是您可以做的。


0
投票

如果你需要一种在ES6中序列化qazxsw poi的方法,我已经编写了一个可以使一切正常工作的序列化器。

您需要做的就是像往常一样在包含该函数的函数或对象上调用Arrow Functions,并在JSON.stringify()上调用Function.deserialise以使其工作。

显然你不应该期望闭包工作,毕竟它是序列化,但默认,解构,the other sidethisarguments成员函数,它们都将被保留。 如果您只使用ES5符号,请使用class。这个真的超越了


my other answer

在Chrome / Firefox / Edge中工作。 Bellow是演示的输出;一些函数,序列化的字符串,然后调用反序列化后创建的新函数。

Here's the demonstration

最后,神奇

test = {
    //make the function
    run : function name(x, y, z) { return this.a + x + y + z; },
    a : 2
};
//serialise it, see what it looks like
test = JSON.stringify(test) //{"run":["window.Function",["x","y","z"],"return this.a + x + y + z;"],"a":2}
test = JSON.parse(test, Function.deserialise)
//see if `this` worked, should be 2+3+4+5 : 14
test.run(3, 4, 5) //14

test = () => 7
test = JSON.stringify(test) //["window.Function",[""],"return 7"]
JSON.parse(test, Function.deserialise)() //7

test = material => material.length
test = JSON.stringify(test) //["window.Function",["material"],"return material.length"]
JSON.parse(test, Function.deserialise)([1, 2, 3]) //3

test = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c
test = JSON.stringify(test) //["window.Function",["[a, b] = [1, 2]","{ x: c } = { x: a + b }"],"return a + b + c"]
JSON.parse(test, Function.deserialise)([3, 4]) //14

class Bob {
    constructor(bob) { this.bob = bob; }
    //a fat function with no `function` keyword!!
    test() { return this.bob; }
    toJSON() { return {bob:this.bob, test:this.test} }
}
test = new Bob(7);
test.test(); //7
test = JSON.stringify(test); //{"bob":7,"test":["window.Function",[""],"return this.bob;"]}
test = JSON.parse(test, Function.deserialise);
test.test(); //7

0
投票

由于对JSON的缺点有点恼火,我编写了一个正确处理序列化的小序列化函数:函数,null,undefined,NaN和Infinity。唯一不做的就是序列化类实例,因为我想不出一种绕过调用构造函数的方法。

Function.deserialise = function(key, data) {
    return (data instanceof Array && data[0] == 'window.Function') ?
        new (Function.bind.apply(Function, [Function].concat(data[1], [data[2]]))) :
        data
    ;
};
Function.prototype.toJSON = function() {
    var whitespace = /\s/;
    var pair = /\(\)|\[\]|\{\}/;

    var args = new Array();
    var string = this.toString();

    var fat = (new RegExp(
        '^\s*(' +
        ((this.name) ? this.name + '|' : '') +
        'function' +
        ')[^)]*\\('
    )).test(string);

    var state = 'start';
    var depth = new Array(); 
    var tmp;

    for (var index = 0; index < string.length; ++index) {
        var ch = string[index];

        switch (state) {
        case 'start':
            if (whitespace.test(ch) || (fat && ch != '('))
                continue;

            if (ch == '(') {
                state = 'arg';
                tmp = index + 1;
            }
            else {
                state = 'singleArg';
                tmp = index;
            }
            break;

        case 'arg':
        case 'singleArg':
            var escaped = depth.length > 0 && depth[depth.length - 1] == '\\';
            if (escaped) {
                depth.pop();
                continue;
            }
            if (whitespace.test(ch))
                continue;

            switch (ch) {
            case '\\':
                depth.push(ch);
                break;

            case ']':
            case '}':
            case ')':
                if (depth.length > 0) {
                    if (pair.test(depth[depth.length - 1] + ch))
                        depth.pop();
                    continue;
                }
                if (state == 'singleArg')
                    throw '';
                args.push(string.substring(tmp, index).trim());
                state = (fat) ? 'body' : 'arrow';
                break;

            case ',':
                if (depth.length > 0)
                    continue;
                if (state == 'singleArg')
                    throw '';
                args.push(string.substring(tmp, index).trim());
                tmp = index + 1;
                break;

            case '>':
                if (depth.length > 0)
                    continue;
                if (string[index - 1] != '=')
                    continue;
                if (state == 'arg')
                    throw '';
                args.push(string.substring(tmp, index - 1).trim());
                state = 'body';
                break;

            case '{':
            case '[':
            case '(':
                if (
                    depth.length < 1 ||
                    !(depth[depth.length - 1] == '"' || depth[depth.length - 1] == '\'')
                )
                    depth.push(ch);
                break;

            case '"':
                if (depth.length < 1)
                    depth.push(ch);
                else if (depth[depth.length - 1] == '"')
                    depth.pop();
                break;
            case '\'':
                if (depth.length < 1)
                    depth.push(ch);
                else if (depth[depth.length - 1] == '\'')
                    depth.pop();
                break;
            }
            break;

        case 'arrow':
            if (whitespace.test(ch))
                continue;
            if (ch != '=')
                throw '';
            if (string[++index] != '>')
                throw '';
            state = 'body';
            break;

        case 'body':
            if (whitespace.test(ch))
                continue;
            string = string.substring(index);

            if (ch == '{')
                string = string.replace(/^{\s*(.*)\s*}\s*$/, '$1');
            else
                string = 'return ' + string.trim();

            index = string.length;
            break;

        default:
            throw '';
        }
    }

    return ['window.Function', args, string];
};

让我们测试吧!

let serialize = function(input){
    const escape_sequences = {"\\\\": "\\\\", "`": "\\`", "\\\\b": "\\\\b", '"': '\\"', "\\n": "\\n", "\\\\f": "\\\\f", "\\r": "\\r", "\\\\t": "\\\\\\t", "\\\\v": "\\\\v"};
    if(typeof input === "string"){
        let result = input;
        for(var key in escape_sequences){
          result = result.replace(new RegExp(key, "g"), escape_sequences[key]);
        }
        return '`'+result+'`';
    }else if(typeof input === "number"){
        return input.toString();
    }else if(typeof input === "function"){
        // Handle build in functions
        if((/\{\s*\[native code\]\s*\}/).test('' + input)) return input.name;
        return input.toString().replace(/"/g, '\"');
    }else if(typeof input === "symbol"){
        return input.toString();
    }else if(input === null || input === undefined){
        return input;
    }else if(input instanceof Array){
        let res_list = [];
        for(let i = 0; i < input.length; i++){
            res_list.push(serialize(input[i]));
        }
        return "["+res_list.join(",")+"]";
    }else if(input.constructor == Object){
        let res_list = [];
        for(let key in input){
            res_list.push('"'+key.replace(/"/g, '\\"')+'":'+serialize(input[key]));
        }   
        return "{"+res_list.join(",")+"}";
    }else if(typeof input === "object"){
        throw(`You are trying to serialize an instance of `+input.constructor.name+`, we don't serialize class instances for a bunch of reasons.`)
    }else{
        return input;
    }
}

let unserialize = function(input){
    return Function(`
        "use strict";
        return `+input+`;`
    )();
}

-1
投票
let input = {
    'a': "str normal",
    'b"': 'str "quote"',
    'c': 1,
    'd': -1.3,
    'e': NaN,
    'f': -Infinity,
    'g': ()=>123,
    'h': function(){return "lalala"},
    'i': null,
    'j': undefined,
    'k': true,
    'l': Symbol(123),
    'm': [1,2,3],
    'n': [{"a": "str normal",'b"': 'str "quote"','c': 1,'d': -1.3,'e': NaN,'f': -Infinity,'g': ()=>123,'h': function(){return "lalala"},'i': null,'j': undefined,'k': true,'l': Symbol(123),'m': [1,2,3],}],
};

let output = unserialize(serialize(input));

for(let key in input){
    console.log(input[key], output[key]);
}

这与w(3)不同,w(3)仍然记得添加3。

© www.soinside.com 2019 - 2024. All rights reserved.