如何一次手写到快乐，JavaScript手写实现深拷贝、bind、jQuery

如何一次手写到快乐，JavaScript手写实现深拷贝、bind、jQuery

1. 手写深拷贝函数

function deepClone(obj ={}) {
  if (typeof obj !== 'object' || obj == {}) {
    return obj
  }
  let result
  if (obj instanceof Array) {
    result = []
  } else {
    result = {}
  }
  for (let key in obj) {
    if (obj.hasOwmproperty(key)) {
      result[key] = deepClone(obj[key])
    }
  }
  return result
}

2. 利用apply手写一个bind函数

//给function的显式原型添加一个bindNew函数
Function.prototype.bindNew = function () {
  const args = Array.prototype.slice.call(arguments)		// 转变成数组
  const that = args.shift()		// 将第一项的this拿出来
  const self = this			// 获取调用这个bindNew的函数
  //返回一个函数
  return function () {
      return self.apply(that, args)
  }
}

3. 手写简单的jQuery，需要考虑插件和扩展性。

class jQuery {
  constructor(selector) {
    const result = document.querySelectorAll(selector);
    const length = result.length;
    for (let i = 0; i < length; i++) {
      this[i] = result[i];
    }
    this.length = length;
    this.selector = selector;
  }
  get(index) {
    return this[index];
  }
  each(fn) {
    for (let i = 0; i < this.length; i++) {
      const elem = this[i];
      fn(elem);
    }
  }
  on(type, fn) {
    return this.each((elem) => {
      elem.addEventListener(type, fn, false);
    });
  }
}
// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

// 插件
jQuery.prototype.dialog = function (info) {
  alert(info);
};
// const $p = new jQuery('p')
// $p.dialog('dialog')

// "造轮子"
class myJQuery extends jQuery {
  constructor(selector) {
    super(selector);
  }
  // 扩展自己的方法
  addClass(className) {
    this.each((elem) => elem.classList.add(className));
  }
  style(data) {
    this.each((elem) => elem.classList.add(style));
  }
}
// const $p = new myJQuery('p')
// $p.addClass('test')