一、前言

目前在做一些項(xiàng)目，很多項(xiàng)目想實(shí)現(xiàn)動(dòng)態(tài)擴(kuò)展，比如對(duì)接口字段進(jìn)行處理，用戶可以自定義添加過(guò)濾函數(shù)，從而獲取想要的字段內(nèi)容，如何將自定義函數(shù)存在json中，從而實(shí)現(xiàn)后端存儲(chǔ)。

二、實(shí)現(xiàn)思路剖析

一般情況下，把json轉(zhuǎn)成字符串都是直接用JSON.stringify()的， 以及平常我做簡(jiǎn)單對(duì)象的深度拷貝也是直接 JSON.parse(JSON.stringify(obj))；不過(guò)JSON.stringify() 存在一些問(wèn)題：
1、轉(zhuǎn)換值如果有toJson()方法，那么由toJson()定義什么值將被序列化。
2、非數(shù)組對(duì)象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中。
3、布爾值、數(shù)字、字符串的包裝對(duì)象在序列化過(guò)程中會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的原始值。
4、undefined、任意的函數(shù)以及 symbol 值，在序列化過(guò)程中會(huì)被忽略（出現(xiàn)在非數(shù)組對(duì)象的屬性值中時(shí)）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時(shí)）;函數(shù)、undefined 被單獨(dú)轉(zhuǎn)換時(shí)，會(huì)返回 undefined，如JSON.stringify(function(){})or JSON.stringify(undefined)。
5、所有以symbol為屬性鍵的屬性都會(huì)被完全忽略掉，即便 replacer 參數(shù)中強(qiáng)制指定包含了它們。
6、Date 日期調(diào)用了 toJSON()將其轉(zhuǎn)換為了string 字符串（同Date.tolSOString()），因此會(huì)被當(dāng)做字符串處理。
7、NaN 和 Infinity 格式的數(shù)值及 null 都會(huì)被當(dāng)做 null。
8、其他類型的對(duì)象，包括 Map/Set/WeakMap/WeakSet，僅會(huì)序列化可枚舉的屬性。

這里我們主要看針對(duì)第四條，則有如下輸出結(jié)果：

let obj = {
    name: [1,2, undefined, 3],
    fn: () => {},
    age: null,
    sex: undefined
}
console.log(JSON.stringify(obj)) // {"name":[1,2,null,3],"age":null}

可以看到，函數(shù) 和 undefined 類型的會(huì)被干掉，數(shù)組中的undefined 會(huì)被轉(zhuǎn)成null,這幾點(diǎn)在使用JSON.parse(JSON.stringify(obj)) 做深度拷貝的時(shí)候也要注意。

三、解決方式

3.1 使用JSON.stringify的第二個(gè)參數(shù)

具體實(shí)現(xiàn)如下：

JSON.stringify(obj, (k, v) => {
    if(typeof v === 'function') {
        return `${v}`
    } else {
      return v
    }
})

思路就是不讓JSON.stringify把 函數(shù)去掉，咱們給他轉(zhuǎn)成字符串

const stringify = (obj) => {
  return JSON.stringify(obj, (k, v) => {
    if(typeof v === 'function') {
        return `${v}`
    } else {
      return v
    }
  })
}

let obj = {
  arr: [1, 2, '11', '22'],
  fn: function filterNumber (){
    return this.arr.filter(item => {
      return typeof item === 'number'
    })
  }
}

// 輸出字符串結(jié)果
console.log(stringify(obj))

// {"arr":[1,2,"11","22"],"fn":"function filterNumber (){\n    return this.arr.filter(item => {\n      return typeof item === 'number'\n    })\n  }"}

3.2 上面可以把函數(shù)轉(zhuǎn)為字符串，但是如何將字符串再變回原來(lái)的函數(shù)，這里則用到了new Function

new Function(str) 的語(yǔ)法如下：

let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

換句話說(shuō)，函數(shù)的參數(shù)（或更確切地說(shuō)，各參數(shù)的名稱）首先出現(xiàn)，而函數(shù)體在最后。所有參數(shù)都寫成字符串形式。通過(guò)查看示例，可以更容易理解。這是一個(gè)有兩個(gè)參數(shù)的函數(shù)：

let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3

也可以不傳參數(shù)，直接傳一個(gè)函數(shù)的字符串，如下：

let str = 'function say(){console.log(1)}'
let fn = new Function(`return ${str}`)()
fn() // 輸出1

現(xiàn)在可以把函數(shù)轉(zhuǎn)成字符串了，也可以把字符串轉(zhuǎn)為函數(shù)了，但是json中那么多字符串，如何識(shí)別哪個(gè)才是由函數(shù)轉(zhuǎn)成的呢？這時(shí)候只需在函數(shù)轉(zhuǎn)字符串的時(shí)候，加一個(gè)前綴做為標(biāo)示就可以，具體代碼如下：

// 這里前綴的標(biāo)識(shí)用 'FUNCTION_FLAG' 可根據(jù)需要自定修改
const stringify = (obj) => {
  return JSON.stringify(obj, (k, v) => {
    if(typeof v === 'function') {
        return `FUNCTION_FLAG ${v}`
    } else {
      return v
    }
  })
}

解析字符串的時(shí)候，只需判斷下就行，代碼如下：

const parse = (jsonStr) => {
  return JSON.parse(jsonStr, (key, value) => {
    if(value && typeof value === 'string') {
        return value.indexOf('FUNCTION_FLAG') > -1 ? new Function(`return ${value.replace('FUNCTION_FLAG', '')}`)() : value
    }
    return value
  })
}

再加上try catch 處理，完整代碼如下：

const stringify = (obj) => {
  try {
    return JSON.stringify(obj, (k, v) => {
      if(typeof v === 'function') {
          return `FUNCTION_FLAG ${v}`
      } else {
        return v
      }
    })
  } catch (error) {
    console.log(error)
    return '出錯(cuò)了'
  }
}

const parse = (jsonStr) => {
  try {
    return JSON.parse(jsonStr, (key, value) => {
      if(value && typeof value === 'string') {
          return value.indexOf('FUNCTION_FLAG') > -1 ? new Function(`return ${value.replace('FUNCTION_FLAG', '')}`)() : value
      }
      return value
    })
  } catch (error) {
    console.log(error)
    return '出錯(cuò)了'
  }
}

let obj = {
  arr: [1, 2, '11', '22'],
  fn: function filterNumber (){
    return this.arr.filter(item => {
      return typeof item === 'number'
    })
  }
}

let str = stringify(obj)
let result = parse(str)
console.log(result.fn()) // [1,2]