js基础

手动实现前端轮子

2019-12-27  本文已影响0人  旭哥_

1.手动实现 call、apply、bind

call 实现

call 核心：

Function.prototype.call = function(context = window) {
  context.fn = this
  context.fn(...[...arguments].slice(1))
  delete context.fn
}

to do:

方法中 fn 不是唯一值，可能已经被占用

apply 实现

Function.prototype.apply = function(context = window) {
  context.fn = this
  context.fn(...arguments[1])
  delete context.fn
}

bind 实现

Function.prototype.bind = function(context = window) {
  let _this = this
  // 保留了当前函数传入的参数
  let args = [...arguments].slice(1)
  return function() {
    return _this.apply(context, args.concat([...arguments]))
  }
}

// MDN的标准源码
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError(
        'Function.prototype.bind - what is trying to be bound is not callable'
      )
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function() {},
      fBound = function() {
        return fToBind.apply(
          this instanceof fNOP && oThis ? this : oThis || window,
          aArgs.concat(Array.prototype.slice.call(arguments))
        )
      }

    fNOP.prototype = this.prototype
    fBound.prototype = new fNOP()

    return fBound
  }
}

2.手动实现符合 Promise/A+规范的 Promise、手动实现 async await

Promise

基础版

let Promise = function(executor) {
  let self = this // 缓存一下this

  self.status = 'pending' // 状态管理 由pending变为resolved或者rejected
  self.value = undefined // 成功后的值 传给resolve
  self.reason = undefined // 失败原因 传给reject

  self.onResolvedCallbacks = [] // 存放then中成功的回调
  self.onRejectedCallbacks = [] // 存放then中失败的回调
  // 这里说明一下，第三步使用定时器。执行完 new Promise 之后，会执行then方法，此时会把then中的方法缓存起来，
  // 并不执行：此时状态还是pending。等到定时器2秒之后，执行
  // resolve|reject 时，而是依次执行存放在数组中的方法。 参考发布订阅模式

  function resolve(value) {
    // pending => resolved
    if (self.status === 'pending') {
      self.value = value
      self.status = 'resolved'
      // 依次执行缓存的成功的回调
      self.onResolvedCallbacks.forEach(fn => fn(self.value))
    }
  }

  function reject(value) {
    // pending => rejected
    if (self.status === 'pending') {
      self.value = value
      self.status = 'rejected'
      // 依次执行缓存的失败的回调
      self.onRejectedCallbacks.forEach(fn => fn(self.reason))
    }
  }

  try {
    // new Promise 时 executor执行
    executor(resolve, reject)
  } catch (error) {
    reject(error) // 当executor中执行有异常时，直接执行reject
  }
}

Promise.prototype.then = function(onFulfilled, onRejected) {
  let self = this

  // 执行了 resolve
  if (self.status === 'resolved') {
    onFulfilled(self.value)
  }

  // 执行了 reject
  if (self.status === 'rejected') {
    onRejected(self.reason)
  }

  // new Promise中可以支持异步行为 当既不执行resolve又不执行reject时
  // 状态是默认的等待态pending
  if (self.status === 'pending') {
    self.onResolvedCallbacks.push(onFulfilled)
    self.onRejectedCallbacks.push(onRejected)
  }
}

最终版

function Promise(executor) {
  let self = this
  self.status = 'pending'
  self.value = undefined
  self.reason = undefined
  self.onResolvedCallbacks = []
  self.onRejectedCallbacks = []
  function resolve(value) {
    if (self.status === 'pending') {
      self.status = 'resolved'
      self.value = value
      self.onResolvedCallbacks.forEach(function(fn) {
        fn()
      })
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
      self.status = 'rejected'
      self.value = reason
      self.onResolvedCallbacks.forEach(function(fn) {
        fn()
      })
    }
  }
  try {
    executor(resolve, reject)
  } catch (err) {
    reject(err)
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('循环引用'))
  }
  let called
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then
      if (typeof then === 'function') {
        then.call(
          x,
          function(y) {
            if (called) return
            called = true
            resolvePromise(promise2, y, resolve, reject)
          },
          function(err) {
            if (called) return
            called = true
            reject(err)
          }
        )
      } else {
        resolve(x)
      }
    } catch (err) {
      if (called) return
      called = true
      reject(err)
    }
  } else {
    return resolve(x)
  }
}

Promise.prototype.then = function(onFulfiled, onRejected) {
  //成功和失败默认不传给一个函数
  onFulfiled =
    typeof onFulfiled === 'function'
      ? onFulfiled
      : function(value) {
          return value
        }
  onRejected =
    typeof onRejected === 'function'
      ? onRejected
      : function(err) {
          throw err
        }
  let self = this
  let promise2 //新增: 返回的promise
  if (self.status === 'resolved') {
    promise2 = new Promise(function(resolve, reject) {
      setTimeout(function() {
        //用setTimeOut实现异步
        try {
          let x = onFulfiled(self.value) //x可能是普通值 也可能是一个promise, 还可能是别人的promise
          resolvePromise(promise2, x, resolve, reject) //写一个方法统一处理
        } catch (e) {
          reject(e)
        }
      })
    })
  }
  if (self.status === 'rejected') {
    promise2 = new Promise(function(resolve, reject) {
      setTimeout(function() {
        try {
          let x = onRejected(self.reason)
          resolvePromise(promise2, x, resolve, reject)
        } catch (e) {
          reject(e)
        }
      })
    })
  }

  if (self.status === 'pending') {
    promise2 = new Promise(function(resolve, reject) {
      self.onResolvedCallbacks.push(function() {
        setTimeout(function() {
          try {
            let x = onFulfiled(self.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        })
      })
      self.onRejectedCallbacks.push(function() {
        setTimeout(function() {
          try {
            let x = onRejected(self.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        })
      })
    })
  }
  return promise2
}

async/await

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async 函数是什么？一句话，它就是 Generator 函数的语法糖。

读取文件

// 用Generator 函数实现
const fs = require('fs')

const readFile = function(fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error)
      resolve(data)
    })
  })
}

const gen = function*() {
  const f1 = yield readFile('/etc/fstab')
  const f2 = yield readFile('/etc/shells')
  console.log(f1.toString())
  console.log(f2.toString())
}

//上面代码的函数gen可以写成async函数
const asyncReadFile = async function() {
  const f1 = await readFile('/etc/fstab')
  const f2 = await readFile('/etc/shells')
  console.log(f1.toString())
  console.log(f2.toString())
}

async 函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器。

Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。

asyncReadFile();
上面的代码调用了 asyncReadFile 函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用 next 方法，或者用 co 模块，才能真正执行，得到最后结果。

（2）更好的语义。

async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用 then 方法指定下一步的操作。

进一步说，async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。

async 函数的实现原理

// async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里
async function fn(args) {
  // ...
}

// 等同于

function fn(args) {
  return spawn(function*() {
    // ...
  });
}

// spawn函数(自动执行器)的实现
function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch (e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(funtion(v){
        step(function(){ return gen.next(v) })
      }, function(e){
        step(function(){ return gen.throw(e) })
      })
    }
    step(function(){ return gen.next(undefined) })
  });
}

3.手写一个 EventEmitter 实现事件发布、订阅

class EventEmitter {
  constructor() {
    this.subs = {
      any: []
    }
  }
  // 添加订阅
  subscribe(type = 'any', fn) {
    if (!this.subs[type]) {
      this.subs[type] = []
    }
    this.subs[type].push(fn) // 将订阅方法保存在数组里
  }
  // 退订
  unsubscribe(type = 'any', fn) {
    this.subs[type] = this.subs[type].filter(function(item) {
      return item !== fn
    }) // 将退订的方法从数组中移除
  }
  // 发布订阅
  publish(type = 'any', ...args) {
    this.subs[type].forEach(function(item) {
      item(...args) // 根据不同的类型调用相应的方法
    })
  }
}

4.可以说出两种实现双向绑定的方案、可以手动实现

极简版的双向绑定

我们都知道,Object.defineProperty 的作用就是劫持一个对象的属性,通常我们对属性的 getter 和 setter 方法进行劫持,在对象的属性发生变化时进行特定的操作。

我们就对对象 obj 的 text 属性进行劫持,在获取此属性的值时打印'get val',在更改属性值的时候对 DOM 进行操作,这就是一个极简的双向绑定。

const obj = {}
Object.defineProperty(obj, 'text', {
  get: function() {
    console.log('get val')
  },
  set: function(newVal) {
    console.log('set val:' + newVal)
    document.getElementById('input').value = newVal
    document.getElementById('span').innerHTML = newVal
  }
})

const input = document.getElementById('input')
input.addEventListener('keyup', function(e) {
  obj.text = e.target.value
})

升级版的双向绑定

Vue 的操作就是加入了发布订阅模式，结合 Object.defineProperty 的劫持能力，实现了可用性很高的双向绑定。

首先，我们以发布订阅的角度看我们第一部分写的那一坨代码,会发现它的监听、发布和订阅都是写在一起的,我们首先要做的就是解耦。

我们先实现一个订阅发布中心，即消息管理员（Dep）,它负责储存订阅者和消息的分发,不管是订阅者还是发布者都需要依赖于它。

let uid = 0
// 用于储存订阅者并发布消息
class Dep {
  constructor() {
    // 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher
    this.id = uid++
    // 储存订阅者的数组
    this.subs = []
  }
  // 触发target上的Watcher中的addDep方法,参数为dep的实例本身
  depend() {
    Dep.target.addDep(this)
  }
  // 添加订阅者
  addSub(sub) {
    this.subs.push(sub)
  }
  notify() {
    // 通知所有的订阅者(Watcher)，触发订阅者的相应逻辑处理
    this.subs.forEach(sub => sub.update())
  }
}
// 为Dep类设置一个静态属性,默认为null,工作时指向当前的Watcher
Dep.target = null

现在我们需要实现监听者(Observer),用于监听属性值的变化。

// 监听者，监听对象属性值的变化
class Observer {
  constructor(value) {
    this.value = value
    this.walk(value)
  }
  // 遍历属性值并监听
  walk(value) {
    Object.keys(value).forEach(key => this.convert(key, value[key]))
  }
  // 执行监听的具体方法
  convert(key, val) {
    defineReactive(this.value, key, val)
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep()
  // 给当前属性的值添加监听
  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      // 如果Dep类存在target属性，将其添加到dep实例的subs数组中
      // target指向一个Watcher实例，每个Watcher都是一个订阅者
      // Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
      if(Dep.target){
        dep.depend()
      }
      return val
    }
    set: newVal => {
      if (val === newVal) return
      val = newVal
      // 对新值进行监听
      childOb = observe(newVal)
      // 通知所有订阅者，数值被改变了
      dep.notify()
    }
  })
}

function observe(value) {
  // 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
  if(!value || typeof value !== 'object'){
    return
  }
  return new Observer(value)
}

那么接下来就简单了,我们需要实现一个订阅者(Watcher)。

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.depIds = {} // hash储存订阅者的id,避免重复的订阅者
    this.vm = vm // 被订阅的数据一定来自于当前Vue实例
    this.cb = cb // 当数据更新时想要做的事情
    this.expOrFn = expOrFn // 被订阅的数据
    this.val = this.get() // 维护更新之前的数据
  }
  // 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
  update() {
    this.run()
  }
  addDep(dep) {
    // 如果在depIds的hash中没有当前的id,可以判断是新Watcher
    // 因此可以添加到dep的数组中储存
    // 此判断是避免同id的Watcher被多次储存
    if (!this.depIds.hasOwnProperty(dep.id)) {
      dep.addSub(this)
      this.depIds[dep.id] = dep
    }
  }
  run() {
    const val = this.get()
    if (val !== this.val) {
      this.val = val
      this.cb.call(this.vm, val)
    }
  }
  get() {
    // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时
    // 通知订阅者管理员收集当前订阅者
    Dep.target = this
    const val = this.vm._data[this.expOrFn]
    // 置空，用于下一个Watcher使用
    Dep.target = null
    return val
  }
}

那么我们最后完成 Vue,将上述方法挂载在 Vue 上。

class Vue {
  constructor(options = {}) {
    // 简化了$options的处理
    this.$options = options
    // 简化了对data的处理
    let data = (this._data = this.$options.data)
    // 将所有data最外层属性代理到Vue实例上
    Object.keys(data).forEach(key => this._proxy(key))
    // 监听数据
    observe(data)
  }
  // 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
  $watch(expOrFn, cb) {
    new Watcher(this, expOrFn, cb)
  }
  _proxy(key) {
    Object.defineProperty(this, key, {
      configurable: true,
      enumerable: true,
      get: () => this._data[key],
      set: val => {
        this._data[key] = val
      }
    })
  }
}

Proxy 实现的双向绑定

const input = document.getElementById('input')
const p = document.getElementById('p')
const obj = {}

const newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, value, receiver) {
    if (key === 'text') {
      input.value = value
      p.innerHTML = value
    }
    return Reflect.set(target, key, value, receiver)
  }
})

input.addEventListener('keyup', function(e) {
  newObj.text = e.target.value
})

5.手写 JSON.parse、JSON.stringify

JSON.parse

window.JSON.parse = function(jsonStr) {
  return eval('(' + jsonStr + ')')
}

JSON.stringify

window.JSON.stringify = function(jsonObj) {
  val result = '',
      curVal
  if (jsonObj === null) return String(jsonObj)
  switch (typeof jsonObj) {
    case 'number':
    case 'boolean':
      return String(jsonObj)
    case 'string':
      return '"' + jsonObj + '"'
    case 'undefined':
    case 'function':
      return undefined
  }
  switch (Object.prototype.toString.call(jsonObj)) {
    case '[object Array]':
      result += '['
      for (var i = 0, len = jsonObj.length; i < len; i++) {
        curVal = JSON.stringify(jsonObj[i])
        result += (curVal === undefined ? null : curVal) + ','
      }
      if (result !== '[') {
        result = result.slice(0, -1)
      }
      result += ']'
      return result
    case '[object Date]':
      return (
        '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"'
      )
    case '[object RegExp]':
      return '{}'
    case '[object Object]':
      result += '{'
      for (i in jsonObj) {
        if (jsonObj.hasOwnProperty(i)) {
          curVal = JSON.stringify(jsonObj[i])
          if (curVal !== undefined) {
            result += '"' + i + '":' + curVal + ','
          }
        }
      }
      if (result !== '{') {
        result = result.slice(0, -1)
      }
      result += '}'
      return result

    case '[object String]':
      return '"' + jsonObj.toString() + '"'
    case '[object Number]':
    case '[object Boolean]':
      return jsonObj.toString()
  }
}
上一篇下一篇

猜你喜欢

热点阅读