JavaScript手写代码总结

1. 实现一个new操作符

new操作符做了这些事：
• 它创建了一个全新的对象。
• 它会被执行[[Prototype]]（也就是__proto__）链接。
• 它使this指向新创建的对象。。
• 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
• 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用。

function New(func) {
   
 var res = {
   };
 if (func.prototype !== null) {
   
  res.__proto__ = func.prototype;
 }
 var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
 if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
   
  return ret;
 }
 return res;
}
var obj = New(A, 1, 2);
// equals to
var obj = new A(1, 2);

2. 实现一个JSON.stringify

JSON.stringify(value[, replacer [, space]])：
• Boolean | Number| String 类型会自动转换成对应的原始值。
• undefined、任意函数以及symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。
• 不可枚举的属性会被忽略
• 如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。

function jsonStringify(obj) {
   
 let type = typeof obj;
 if (type !== "object") {
   
  if (/string|undefined|function/.test(type)) {
   
   obj = '"' + obj + '"';
  }
  return String(obj);
 } else {
   
  let json = []
  let arr = Array.isArray(obj)
  for (let k in obj) {
   
   let v = obj[k];
   let type = typeof v;
   if (/string|undefined|function/.test(type)) {
   
    v = '"' + v + '"';
   } else if (type === "object") {
   
    v = jsonStringify(v);
   }
   json.push((arr ? "" : '"' + k + '":') + String(v));
  }
  return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
 }
}
jsonStringify({
   x : 5}) // "{"x":5}"
jsonStringify([1, "false", false]) // "[1,"false",false]"
jsonStringify({
   b: undefined}) // "{"b":"undefined"}"

3. 实现一个JSON.parse

JSON.parse(text[, reviver])

用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
3.1 第一种：直接调用 eval

function jsonParse(opt) {
   
 return eval('(' + opt + ')');
}
jsonParse(jsonStringify({
   x : 5}))
// Object { x: 5}
jsonParse(jsonStringify([1, "false", false]))
// [1, "false", falsr]
jsonParse(jsonStringify({
   b: undefined}))
// Object { b: "undefined"}

避免在不必要的情况下使用 eval，eval() 是一个危险的函数， 他执行的代码拥有着执行者的权利。如果你用 eval()运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。
它会执行JS代码，有XSS漏洞。
如果你只想记这个方法，就得对参数json做校验。

var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if (
 rx_one.test(
  json
   .replace(rx_two, "@")
   .replace(rx_three, "]")
   .replace(rx_four, "")
 )
) {
   
 var obj = eval("(" +json + ")");
}

3.2 第二种：Function
来源神奇的eval()与new Function()
核心：Function与eval有相同的字符串参数特性。

var func = new Function(arg1, arg2, ..., functionBody);

在转换JSON的实际应用中，只需要这么做。

var jsonStr = '{ "age": 20, "name": "jack" }'
var json = (new Function('return ' + jsonStr))();

eval 与 Function 都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。
这里是面向面试编程，写这两种就够了。至于第三，第四种，涉及到繁琐的递归和状态机相关原理，具体可以看：
《JSON.parse 三种实现方式》

4. 实现一个call或 apply

实现改编来源：JavaScript深入之call和apply的模拟实现 #11
call语法：
fun.call(thisArg, arg1, arg2, …)，调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
apply语法：
func.apply(thisArg, [argsArray])，调用一个函数，以及作为一个数组（或类似数组对象）提供的参数。
4.1 Function.call按套路实现
call核心：
• 将函数设为对象的属性
• 执行&删除这个函数
• 指定this到函数并传入给定参数执行函数
• 如果不传入参数，默认指向为 window
为啥说是套路实现呢？因为真实面试中，面试官很喜欢让你逐步地往深考虑，这时候你可以反套路他，先写个简单版的：
4.1.1 简单版

var foo = {
   
 value: 1,
 bar: function() {
   
  console.log(this.value)
 }
}
foo.bar() // 1

4.1.2 完善版
当面试官有进一步的发问，或者此时你可以假装思考一下。然后写出以下版本：

Function.prototype