JavaScript 手写代码无敌秘籍

（给前端大全加星标，提升前端技能）

作者：前端劝退师

手写路径导航

• 实现一个new操作符

• 实现一个JSON.stringify

• 实现一个JSON.parse

• 实现一个call或 apply

• 实现一个Function.bind

• 实现一个继承

• 实现一个JS函数柯里化

• 手写一个Promise(中高级必考)

• 手写防抖(Debouncing)和节流(Throttling)

• 手写一个JS深拷贝

• 实现一个instanceOf

1. 实现一个 new操作符

来源：「你不知道的javascript」 英文版

new操作符做了这些事：

• 它创建了一个全新的对象。

• 它会被执行 [[Prototype]]（也就是 __proto__）链接。

• 它使 this指向新创建的对象。。

• 通过 new创建的每个对象将最终被 [[Prototype]]链接到这个函数的 prototype对象上。

• 如果函数没有返回对象类型 Object(包含 Functoin,Array,Date,RegExg,Error)，那么 new表达式中的函数调用将返回该对象引用。

1. function New(func) {

2. var res = {};

3. if (func.prototype !== null) {

4. res.__proto__ = func.prototype;

5. }

6. var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

7. if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {

8. return ret;

9. }

10. return res;

11. }

12. var obj = New(A, 1, 2);

13. // equals to

14. var obj = new A(1, 2);

2. 实现一个 JSON.stringify

JSON.stringify(value[,replacer[,space]])：

• Boolean|Number|String 类型会自动转换成对应的原始值。

• undefined、任意函数以及 symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。

• 不可枚举的属性会被忽略

• 如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。

1. function jsonStringify(obj) {

2. let type = typeof obj;

3. if (type !== "object" || type === null) {

4. if (/string|undefined|function/.test(type)) {

5. obj = '"' + obj + '"';

6. }

7. return String(obj);

8. } else {

9. let json = []

10. arr = (obj && obj.constructor === Array);

11. for (let k in obj) {

12. let v = obj[k];

13. let type = typeof v;

14. if (/string|undefined|function/.test(type)) {

15. v = '"' + v + '"';

16. } else if (type === "object") {

17. v = jsonStringify(v);

18. }

19. json.push((arr ? "" : '"' + k + '":') + String(v));

20. }

21. return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")

22. }

23. }

24. jsonStringify({x : 5}) // "{"x":5}"

25. jsonStringify([1, "false", false]) // "[1,"false",false]"

26. jsonStringify({b: undefined}) // "{"b":"undefined"}"

3. 实现一个 JSON.parse

JSON.parse(text[,reviver])

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

3.1 第一种：直接调用 eval

1. function jsonParse(opt) {

2. return eval('(' + opt + ')');

3. }

4. jsonParse(jsonStringify({x : 5}))

5. // Object { x: 5}

6. jsonParse(jsonStringify([1, "false", false]))

7. // [1, "false", falsr]

8. jsonParse(jsonStringify({b: undefined}))

9. // Object { b: "undefined"}

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

它会执行JS代码，有XSS漏洞。

如果你只想记这个方法，就得对参数json做校验。

1. var rx_one = /^[\],:{}\s]*$/;

2. var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;

3. var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;

4. var rx_four = /(?:^|:|,)(?:\s*\[)+/g;

5. if (

6. rx_one.test(

7. json

8. .replace(rx_two, "@")

9. .replace(rx_three, "]")

10. .replace(rx_four, "")

11. )

12. ) {

13. var obj = eval("(" +json + ")");

14. }

3.2 第二种：Function

来源 神奇的eval()与new Function()

核心： Function与 eval有相同的字符串参数特性。

varfunc=newFunction(arg1,arg2,...,functionBody);

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

1. var jsonStr = '{ "age": 20, "name": "jack" }'

2. var json = (new Function('return ' + jsonStr))();

eval 与 Function 都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。

这里是面向面试编程，写这两种就够了。至于第三，第四种，涉及到繁琐的递归和状态机相关原理，具体可以看：

《JSON.parse 三种实现方式》

4. 实现一个 call或 apply

call语法：

fun.call(thisArg,arg1,arg2,...)，调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

apply语法：

func.apply(thisArg,[argsArray])，调用一个函数，以及作为一个数组（或类似数组对象）提供的参数。

4.1 Function.call按套路实现

call核心：

• 将函数设为对象的属性

• 执行&删除这个函数

• 指定 this到函数并传入给定参数执行函数

• 如果不传入参数，默认指向为 window

为啥说是套路实现呢？因为真实面试中，面试官很喜欢让你逐步地往深考虑，这时候你可以反套路他，先写个简单版的：

4.1.1 简单版

1. var foo = {

2. value: 1,

3. bar: function() {

4. console.log(this.value)

5. }

6. }

7. foo.bar() // 1

4.1.2 完善版

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

1. Function.prototype.call2 = function(content = window) {

2. content.fn = this;

3. let args = [...arguments].slice(1);

4. let result = content.fn(...args);

5. delete content.fn;

6. return result;

7. }

8. var foo = {

9. value: 1

10. }

11. function bar(name, age) {

12. console.log(name)

13. console.log(age)

14. console.log(this.value);

15. }

16. bar.call2(foo, 'black', '18') // black 18 1

4.2 Function.apply的模拟实现

apply()的实现和 call()类似，只是参数形式不同。直接贴代码吧：

1. Function.prototype.apply2 = function(context = window) {

2. context.fn = this

3. let result;

4. // 判断是否有第二个参数

5. if(arguments[1]) {

6. result = context.fn(...arguments[1])

7. } else {

8. result = context.fn()

9. }

10. delete context.fn()

11. return result

12. }

5. 实现一个 Function.bind()

bind()方法:

会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

此外， bind实现需要考虑实例化后对原型链的影响。

1. Function.prototype.bind2 = function(content) {

2. if(typeof this != "function") {

3. throw Error("not a function")

4. }

5. // 若没问参数类型则从这开始写

6. let fn = this;

7. let args = [...arguments].slice(1);

8. let resFn = function() {

9. return fn.apply(this.instanceof resFn ? this : content,args.concat(...arguments) )

10. }

11. function tmp() {}

12. tmp.prototype = this.prototype;

13. resFn.prototype = new tmp();

14. return resFn;

15. }

6.实现一个继承

寄生组合式继承

一般只建议写这种，因为其它方式的继承会在一次实例中调用两次父类的构造函数或有其它缺点。

核心实现是：用一个 F 空的构造函数去取代执行了 Parent 这个构造函数。

1. function Parent(name) {

2. this.name = name;

3. }

4. Parent.prototype.sayName = function() {

5. console.log('parent name:', this.name);

6. }

7. function Child(name, parentName) {

8. Parent.call(this, parentName);

9. this.name = name;

10. }

11. function create(proto) {

12. function F(){}

13. F.prototype = proto;

14. return new F();

15. }

16. Child.prototype = create(Parent.prototype);

17. Child.prototype.sayName = function() {

18. console.log('child name:', this.name);

19. }

20. Child.prototype.constructor = Child;

21. var parent = new Parent('father');

22. parent.sayName(); // parent name: father

23. var child = new Child('son', 'father');

7.实现一个JS函数柯里化

 什么是柯里化？

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

7.1 通用版

1. function curry() {

2. var args = Array.prototype.slice.call(arguments);

3. var fn = function() {

4. var newArgs = args.concat(Array.prototype.slice.call(arguments));

5. return multi.apply(this, newArgs);

6. }

7. fn.toString = function() {

8. return args.reduce(function(a, b) {

9. return a * b;

10. })

11. }

12. return fn;

13. }

14. function multiFn(a, b, c) {

15. return a * b * c;

16. }

17. var multi = curry(multiFn);

18. multi(2)(3)(4);

19. multi(2,3,4);

20. multi(2)(3,4);

21. multi(2,3)(4);

7.2 ES6骚写法

1. const curry = (fn, arr = []) => (...args) => (

2. arg => arg.length === fn.length

3. ? fn(...arg)

4. : curry(fn, arg)

5. )([...arr, ...args])

8.手写一个 Promise(中高级必考)

我们来过一遍 Promise/A+规范：

• 三种状态 pending|fulfilled(resolved)|rejected

• 当处于 pending状态的时候，可以转移到 fulfilled(resolved)或者 rejected状态

• 当处于 fulfilled(resolved)状态或者 rejected状态的时候，就不可变。

1. 必须有一个 then异步执行方法， then接受两个参数且必须返回一个promise：

1. // onFulfilled 用来接收promise成功的值

2. // onRejected 用来接收promise失败的原因

3. promise1=promise.then(onFulfilled, onRejected);

8.1 Promise的流程图分析

 来回顾下 Promise用法：

1. var promise = new Promise((resolve,reject) => {

2. if (操作成功) {

3. resolve(value)

4. } else {

5. reject(error)

6. }

7. })

8. promise.then(function (value) {

9. // success

10. },function (value) {

11. // failure

12. })

8.2 面试够用版

来源：实现一个完美符合Promise/A+规范的Promise

1. function myPromise(constructor){

2. let self=this;

3. self.status="pending" //定义状态改变前的初始状态

4. self.value=undefined;//定义状态为resolved的时候的状态

5. self.reason=undefined;//定义状态为rejected的时候的状态

6. function resolve(value){

7. //两个==="pending"，保证了状态的改变是不可逆的

8. if(self.status==="pending"){

9. self.value=value;

10. self.status="resolved";

11. }

12. }

13. function reject(reason){

14. //两个==="pending"，保证了状态的改变是不可逆的

15. if(self.status==="pending"){

16. self.reason=reason;

17. self.status="rejected";

18. }

19. }

20. //捕获构造异常

21. try{

22. constructor(resolve,reject);

23. }catch(e){

24. reject(e);

25. }

26. }

同时，需要在 myPromise的原型上定义链式调用的 then方法：

1. myPromise.prototype.then=function(onFullfilled,onRejected){

2. let self=this;

3. switch(self.status){

4. case "resolved":

5. onFullfilled(self.value);

6. break;

7. case "rejected":

8. onRejected(self.reason);

9. break;

10. default:

11. }

12. }

测试一下：

1. var p=new myPromise(function(resolve,reject){resolve(1)});

2. p.then(function(x){console.log(x)})

3. //输出1

8.3 大厂专供版

直接贴出来吧，这个版本还算好理解

1. const PENDING = "pending";

2. const FULFILLED = "fulfilled";

3. const REJECTED = "rejected";

4. function Promise(excutor) {

5. let that = this; // 缓存当前promise实例对象

6. that.status = PENDING; // 初始状态

7. that.value = undefined; // fulfilled状态时 返回的信息

8. that.reason = undefined; // rejected状态时 拒绝的原因

9. that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数

10. that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

11. function resolve(value) { // value成功态时接收的终值

12. if(value instanceof Promise) {

13. return value.then(resolve, reject);

14. }

15. // 实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

16. setTimeout(() => {

17. // 调用resolve 回调对应onFulfilled函数

18. if (that.status === PENDING) {

19. // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)

20. that.status = FULFILLED;

21. that.value = value;

22. that.onFulfilledCallbacks.forEach(cb => cb(that.value));

23. }

24. });

25. }

26. function reject(reason) { // reason失败态时接收的拒因

27. setTimeout(() => {

28. // 调用reject 回调对应onRejected函数

29. if (that.status === PENDING) {

30. // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)

31. that.status = REJECTED;

32. that.reason = reason;

33. that.onRejectedCallbacks.forEach(cb => cb(that.reason));

34. }

35. });

36. }

37. // 捕获在excutor执行器中抛出的异常

38. // new Promise((resolve, reject) => {

39. // throw new Error('error in excutor')

40. // })

41. try {

42. excutor(resolve, reject);

43. } catch (e) {

44. reject(e);

45. }

46. }

47. Promise.prototype.then = function(onFulfilled, onRejected) {

48. const that = this;

49. let newPromise;

50. // 处理参数默认值 保证参数后续能够继续执行

51. onFulfilled =

52. typeof onFulfilled === "function" ? onFulfilled : value => value;

53. onRejected =

54. typeof onRejected === "function" ? onRejected : reason => {

55. throw reason;

56. };

57. if (that.status === FULFILLED) { // 成功态

58. return newPromise = new Promise((resolve, reject) => {

59. setTimeout(() => {

60. try{

61. let x = onFulfilled(that.value);

62. resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值

63. } catch(e) {

64. reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);

65. }

66. });

67. })

68. }

69. if (that.status === REJECTED) { // 失败态

70. return newPromise = new Promise((resolve, reject) => {

71. setTimeout(() => {

72. try {

73. let x = onRejected(that.reason);

74. resolvePromise(newPromise, x, resolve, reject);

75. } catch(e) {

76. reject(e);

77. }

78. });

79. });

80. }

81. if (that.status === PENDING) { // 等待态

82. // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中

83. return newPromise = new Promise((resolve, reject) => {

84. that.onFulfilledCallbacks.push((value) => {

85. try {

86. let x = onFulfilled(value);

87. resolvePromise(newPromise, x, resolve, reject);

88. } catch(e) {

89. reject(e);

90. }

91. });

92. that.onRejectedCallbacks.push((reason) => {

93. try {

94. let x = onRejected(reason);

95. resolvePromise(newPromise, x, resolve, reject);

96. } catch(e) {

97. reject(e);

98. }

99. });

100. });

101. }

102. };

 emmm，我还是乖乖地写回进阶版吧。

9. 手写防抖( Debouncing)和节流( Throttling)

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。

9.1 防抖( Debouncing)实现

典型例子：限制 鼠标连击 触发。

一个比较好的解释是：

当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。

1. // 防抖动函数

2. function debounce(fn,wait=50,immediate) {

3. let timer;

4. return function() {

5. if(immediate) {

6. fn.apply(this,arguments)

7. }

8. if(timer) clearTimeout(timer)

9. timer = setTimeout(()=> {

10. fn.apply(this,arguments)

11. },wait)

12. }

13. }

9.2 节流( Throttling)实现

可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次

简单的节流函数:

1. function throttle(fn, wait) {

2. let prev = new Date();

3. return function() {

4. const args = arguments;

5. const now = new Date();

6. if (now - prev > wait) {

7. fn.apply(this, args);

8. prev = new Date();

9. }

10. }

9.3 结合实践

通过第三个参数来切换模式。

1. const throttle = function(fn, delay, isDebounce) {

2. let timer

3. let lastCall = 0

4. return function (...args) {

5. if (isDebounce) {

6. if (timer) clearTimeout(timer)

7. timer = setTimeout(() => {

8. fn(...args)

9. }, delay)

10. } else {

11. const now = new Date().getTime()

12. if (now - lastCall < delay) return

13. lastCall = now

14. fn(...args)

15. }

16. }

17. }

10. 手写一个JS深拷贝

有个最著名的乞丐版实现，在《你不知道的JavaScript（上）》里也有提及：

10.1 乞丐版

1. var newObj = JSON.parse( JSON.stringify( someObj ) );

10.2 面试够用版

1. function deepCopy(obj){

2. //判断是否是简单数据类型，

3. if(typeof obj == "object"){

4. //复杂数据类型

5. var result = obj.constructor == Array ? [] : {};

6. for(let i in obj){

7. result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];

8. }

9. }else {

10. //简单数据类型 直接 == 赋值

11. var result = obj;

12. }

13. return result;

14. }

关于深拷贝的讨论天天有，这里就贴两种吧，毕竟我...

11.实现一个 instanceOf

1. function instanceOf(left,right) {

2. let proto = left.__proto__;

3. let prototype = right.prototype

4. while(true) {

5. if(proto == null) return false

6. if(proto == prototype) return true

7. proto = proto.__proto__;

8. }

9. }

推荐阅读

（点击标题可跳转阅读）

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

好文章，我在看❤️