js进阶-手写js原生方法

call

Function.prototype.myCall = function(context,...args) {
  context = context || window  //如果没有传或传的值不为对象 context指向window
  let fn = Symbol('fn') //创建一个唯一的键值
  context[fn] = this //给context添加一个方法 指向this
  let result = context[fn](...args) //执行fn
  delete context[fn] //删除方法
  return result //将执行的结果返回
}

apply

Function.prototype.myApply = function(context,...arg) {
  context = context || window  //如果没有传或传的值不为对象 context指向window  
  let fn = Symbol('fn')
  context[fn] = this 
  let result = context[fn](arg) //执行fn
  delete context[fn] //删除方法
  return result
}
//其实apply和call差别主要是在参数的传递上

bind

Function.prototype.myBind = function (_this,...arg) {
  if(typeof this !== 'function'){//如果不为function的话，直接报错
    return throw new Error('must be function')
  }
  let fn = this;
  let fnNop = function(){};//中转
  let resultFn = function(){
    //需判断是否将bind返回的函数，去当做构造函数使用
    fn.apply(this instanceof fnNop ? this : _this,
      arg.concat(Array.prototype.slice.call(arguments)))
  }
  fnNop.prototype = this.prototype;
  resultFn.prototype = new fnNop();//继承原函数的属性
  return resultFn
}

模拟new操作

function MyNew(fn,...arg){
  if(typeof fn !== 'function'){ 
    throw new TypeError('Type Error')
  }
  let child = Object.create(fn.prototype)
  let result = fn.apply(child,arg)
  return result instanceof Object ? result :child
}

instanceof

const myInstanceof = (left, right) => {
  if(typeof left !== 'object' ||  left ===null) return false
  // 基本数据类型都返回false
   left = Object.getPrototypeOf(left);
   right = right.prototype
  while (true) {
    if (left === null) return false;
    if (left === right) return true;
    left = Object.getPrototypeOf(left); //一层一层向上找
  }
}

继承

function Parent() {
  this.name = 'parent';
}
function Child() {
  Parent.call(this);
  this.type = 'children';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

图片懒加载

function lazyload() {
  const imgs = document.getElementsByTagName('img');
  const len = imgs.length;
  // 视口的高度
  const viewHeight = document.documentElement.clientHeight;
  // 滚动条高度
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < len; i++) {
    const offsetHeight = imgs[i].offsetTop;
    if (offsetHeight < viewHeight + scrollHeight) {
      const src = imgs[i].dataset.src;
      imgs[i].src = src;
    }
  }
}

渲染几万条数据不卡住页面

// 渲染大数据时，合理使用createDocumentFragment和requestAnimationFrame，
//将操作切分为一小段一小段执行。
setTimeout(() => {
  // 插入十万条数据
  const total = 100000;
  // 一次插入的数据
  const once = 20;
  // 插入数据需要的次数
  const loopCount = Math.ceil(total / once);
  let countOfRender = 0;
  const ul = document.querySelector('ul');
  // 添加数据的方法
  function add() {
    const fragment = document.createDocumentFragment();
    for(let i = 0; i < once; i++) {
      const li = document.createElement('li');
      li.innerText = Math.floor(Math.random() * total);
      fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    countOfRender += 1;
    loop();
  }
  function loop() {
    if(countOfRender < loopCount) {
      window.requestAnimationFrame(add);
    }
  }
  loop();
}, 0)

发布订阅者

class EventHub{
  constructor() {
    this.bus = {}
  }
  add(name,fn){
    this.bus[name]?this.bus[name].push(fn):this.bus[name] = [fn]
  }
  remove(name,fn){
    if(fn){
      this.bus[name] = this.bus[name].filter(item=>item===fn)
    }else{
      //无fn，则全清
      delete this.bus[name]
    }
  }
  notice(name,msg){
    this.bus[name].forEach(item=>{
      item(msg)
    })
  }
}
let e1 = new EventHub()
e1.add('go',function (msg) {
  console.log(msg,'1');
})
e1.add('go',function (msg) {
  console.log(msg,'2');
})
e1.notice('go','学习')