前端高频手撕代码整理（一）

1. 手写闭包

首先，看一个简单的案例：

for (var i = 0; i < 4; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}
//  每隔一秒打印 4 4 4 4

因为var 没有块级作用域，循环变量变成全局变量。如何解决？----> 闭包

for (var i = 0; i < 4; i++) {
    (function(j) {
        setTimeout(() => {
            console.log(j);
        }, j * 1000);
    })(i)
}
// 每隔一秒打印 0 1 2 3 

补：还可以通过let解决。

2. 手写实现call、apply、bind

（1）call

test.call(a)

call首先将test的this指向a，然后执行函数test。

我们可以将函数test挂载到a上面，让函数test变成a的一个方法，通过a.test来调用

Function.prototype.myCall = function(context) {
    context = context || window; //没传入this 默认绑定window对象
    context.fn = this; // 将myCall函数的调用者test挂载到context的属性上，可以通过context.fn调用test函数.这里的context就是a
    const args = [...arguments].slice(1); // 将第一个参数去掉，即去掉test.myCall中的a，然后args=[1,2]
    const results = context.fn(...args); // 去调用test（1,2）
    delete context.fn
    return results
}

function test(arg1, arg2) {
    console.log(arg1, arg2);
    console.log(this.name, this.offer);
}
const a = {
    name: 'coder',
    offer: 100
}
test.myCall(a, 1, 2)

1 2
coder 100

 （2）apply

apply和call 的区别就是：apply的第二个参数必须是数组

Function.prototype.myApply = function(context) {
    var context = context || window
    context.fn = this
    var result
        // 需要判断是否存储第二个参数
        // 如果存在，就将第二个参数展开
    if (arguments[1]) {
        if (Array.isArray(arguments[1])) {
            result = context.fn(...arguments[1])
        } else {
            console.log("输入的参数不是数组");
        }

    } else {
        result = context.fn()
    }

    delete context.fn
    return result
}

（3）bind

bind和另两个的区别就是：bind返回一个新的函数，但不调用

Function.prototype.myBind = function(context) {
    if (typeof this != 'function') {
        throw new TypeError('Error')
    }
    var _this = this
    var args = [...arguments].slice(1)
    return function F() {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        return _this.apply(context, args.concat(...arguments))
    }
}

 3. new运算符的实现

new运算符做了这些事情：

• 创建一个空对象；
• 构造函数中的this指向该空对象；
• 执行构造函数为这个空对象添加属性；
• 确保返回值是一个对象

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}

其中：

[].shift.call(arguments) // 表示拿到arguments的第一项。比如arguments=[1, 2, 3],则返回 1

4. Promise.all的实现

Promise.all = function(iterator) {
  if (!Array.isArray(iterator)) return;
  let count = 0;
  let res = [];
  return new Promise((resolve, reject) => {
    for (let item of iterator) {
      Promise.resolve(item)
        .then(data => {
          res[count++] = data;
          if (count == iterator.length) {
            resolve(res)
          }
        })
        .catch(e => {
          reject(e)
        })
    }
  })
}

 5. 防抖和节流

防抖和节流的作用都是防止函数多次调用，区别在于：

• 防抖：在一定时间内只执行一次（多次执行变一次）
• 节流：经过一定时间间隔就执行一次（多次执行变成每隔一段时间执行一次）

防抖：

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数

节流：

/**
 * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait
 *
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间窗口的间隔
 * @param  {object}     options   如果想忽略开始函数的的调用，传入{leading: false}。
 *                                如果想忽略结尾函数的调用，传入{trailing: false}
 *                                两者不能共存，否则函数不能执行
 * @return {function}             返回客户调用函数
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的时间戳
    var previous = 0;
    // 如果 options 没传则设为空对象
    if (!options) options = {};
    // 定时器回调函数
    var later = function() {
      // 如果设置了 leading，就将 previous 设为 0
      // 用于下面函数的第一个 if 判断
      previous = options.leading === false ? 0 : _.now();
      // 置空一是为了防止内存泄漏，二是为了下面的定时器判断
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 获得当前时间戳
      var now = _.now();
      // 首次进入前者肯定为 true
      // 如果需要第一次不执行函数
      // 就将上次时间戳设为当前的
      // 这样在接下来计算 remaining 的值时会大于0
      if (!previous && options.leading === false) previous = now;
      // 计算剩余时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果当前调用已经大于上次调用时间 + wait
      // 或者用户手动调了时间
       // 如果设置了 trailing，只会进入这个条件
      // 如果没有设置 leading，那么第一次会进入这个条件
      // 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
      // 其实还是会进入的，因为定时器的延时
      // 并不是准确的时间，很可能你设置了2秒
      // 但是他需要2.2秒才触发，这时候就会进入这个条件
      if (remaining <= 0 || remaining > wait) {
        // 如果存在定时器就清理掉否则会调用二次回调
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        // 判断是否设置了定时器和 trailing
        // 没有的话就开启一个定时器
        // 并且不能不能同时设置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

 6.深浅拷贝

浅拷贝：（两种方法）

let newObj = Object.assign({}, obj);

let newObj = {...obj}

深拷贝：（两种方法）

let newObj = JSON.parse(JSON.stringify(oldObj))

　　该方法有局限性：

• 会忽略 undefined
• 会忽略 symbol
• 不能序列化函数
• 不能解决循环引用的对象
• 使用递归↓

function deepClone(obj) {
  if (!obj || typeof obj !== 'object') return
  let newObj = Array.isArray(obj) ? [] : {}
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] =
        typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]
    }
  }
  return newObj
}