前端手寫代碼原理實現

前言

如今的前端門檻愈來愈高，再也不是隻會寫寫頁面那麼簡單。模塊化、自動化、跨端開發等逐漸成爲要求，可是這些都須要創建在咱們牢固的基礎之上。無論框架和模式怎麼變，把基礎原理打牢才能快速適應市場的變化。下面介紹一些經常使用的源碼實現：

• call實現
• bind實現
• new實現
• instanceof實現
• Object.create實現
• 深拷貝實現
• 發佈訂閱模式

call

call用於改變函數this指向，並執行函數

通常狀況，誰調用函數，函數的this就指向誰。利用這一特色，將函數做爲對象的屬性，由對象進行調用，便可改變函數this指向，這種被稱爲隱式綁定。apply實現同理，只需改變入參形式。

let obj = {
  name: 'JoJo'
}
function foo(){
  console.log(this.name)
}
obj.fn = foo
obj.fn() // log: JoJo
複製代碼

實現

Function.prototype.mycall = function () {
  if(typeof this !== 'function'){
    throw 'caller must be a function'
  }
  let othis = arguments[0] || window
  othis._fn = this
  let arg = [...arguments].slice(1)
  let res = othis._fn(...arg)
  Reflect.deleteProperty(othis, '_fn') //刪除_fn屬性
  return res
}
複製代碼

使用

let obj = {
  name: 'JoJo'
}
function foo(){
  console.log(this.name)
}
foo.mycall(obj) // JoJo
複製代碼

bind

bind用於改變函數this指向，並返回一個函數

注意點：

• 做爲構造函數調用的this指向
• 維護原型鏈

Function.prototype.mybind = function (oThis) {
  if(typeof this != 'function'){
    throw 'caller must be a function'
  }
  let fThis = this
  //Array.prototype.slice.call 將類數組轉爲數組
  let arg = Array.prototype.slice.call(arguments,1)
  let NOP = function(){}
  let fBound = function(){
    let arg_ = Array.prototype.slice.call(arguments)
    // new 綁定等級高於顯式綁定
    // 做爲構造函數調用時，保留指向不作修改
    // 使用 instanceof 判斷是否爲構造函數調用
    return fThis.apply(this instanceof fBound ? this : oThis, arg.concat(arg_))
  }
  // 維護原型
  if(this.prototype){
    NOP.prototype = this.prototype
    fBound.prototype = new NOP()
  }
  return fBound
}
複製代碼

使用

let obj = {
  msg: 'JoJo'
}
function foo(msg){
  console.log(msg + '' + this.msg)
}
let f = foo.mybind(obj)
f('hello') // hello JoJo
複製代碼

new

new使用構造函數建立實例對象，爲實例對象添加this屬性和方法

new的過程：

1. 建立新對象
2. 新對象__proto__指向構造函數原型
3. 新對象添加屬性方法（this指向）
4. 返回this指向的新對象

function new_(){
  let fn = Array.prototype.shift.call(arguments)
  if(typeof fn != 'function'){
    throw fn + ' is not a constructor'
  }
  let obj = {}
  obj.__proto__ = fn.prototype
  let res = fn.apply(obj, arguments)
  return typeof res === 'object' ? res : obj
}
複製代碼

在ES5中，咱們可使用 Object.create 來簡化這個過程：

function new_(){
  let fn = Array.prototype.shift.call(arguments)
  if(typeof fn != 'function'){
    throw fn + ' is not a constructor'
  }
  let obj = Object.create(fn.prototype)
  let res = fn.apply(obj, arguments)
  return typeof res === 'object' ? res : obj
}
複製代碼

instanceof

instanceof 判斷左邊的原型是否存在於右邊的原型鏈中。

實現思路：逐層往上查找原型，若是最終的原型爲null時，證實不存在原型鏈中，不然存在。

function instanceof_(left, right){
  left = left.__proto__
  while(left !== right.prototype){
    left = left.__proto__ // 查找原型，再次while判斷
    if(left === null){
      return false
    }
  }
  return true
}
複製代碼

Object.create

Object.create建立一個新對象，使用現有的對象來提供新建立的對象的__proto__，第二個可選參數爲屬性描述對象

function objectCreate_(proto, propertiesObject = {}){
  if(typeof proto !== 'object' && typeof proto !== 'function' && proto !== null){
    throw('Object prototype may only be an Object or null:'+proto)
  }
  let res = {}
  res.__proto__ = proto
  Object.defineProperties(res, propertiesObject)
  return res
}
複製代碼

深拷貝

深拷貝爲對象建立一個相同的副本，二者的引用地址不相同。當你但願使用一個對象，但又不想修改原對象時，深拷貝是一個很好的選擇。這裏實現一個基礎版本，只對對象和數組作深拷貝。

實現思路：遍歷對象，引用類型使用遞歸繼續拷貝，基本類型直接賦值

function deepClone(origin) {
  let toStr = Object.prototype.toString
  let isInvalid = toStr.call(origin) !== '[object Object]' && toStr.call(origin) !== '[object Array]'
  if (isInvalid) {
    return origin
  }
  let target = toStr.call(origin) === '[object Object]' ? {} : []
  for (const key in origin) {
    if (origin.hasOwnProperty(key)) {
      const item = origin[key];
      if (typeof item === 'object' && item !== null) {
        target[key] = deepClone(item)
      } else {
        target[key] = item
      }
    }
  }
  return target
}
複製代碼

發佈訂閱模式

發佈訂閱模式在實際開發中能夠實現模塊間的徹底解耦，模塊只須要關注事件的註冊和觸發。

發佈訂閱模式實現EventBus：

class EventBus{
  constructor(){
    this.task = {}
  }

  on(name, cb){
    if(!this.task[name]){
      this.task[name] = []
    }
    typeof cb === 'function' && this.task[name].push(cb)
  }

  emit(name, ...arg){
    let taskQueue = this.task[name]
    if(taskQueue && taskQueue.length > 0){
      taskQueue.forEach(cb=>{
        cb(...arg)
      })
    }
  }

  off(name, cb){
    let taskQueue = this.task[name]
    if(taskQueue && taskQueue.length > 0){
      if(typeof cb === 'function'){
        let index = taskQueue.indexOf(cb)
        index != -1 && taskQueue.splice(index, 1)
      }
      if(typeof cb === 'undefined'){
        this.task[name].length = 0
      }
    }
  }

  once(name, cb){
    let callback = (...arg) => {
      this.off(name, callback)
      cb(...arg)
    }
    typeof cb === 'function' && this.on(name, callback)
  }
}
複製代碼

使用

let bus = new EventBus()
bus.on('add', function(a,b){
  console.log(a+b)
})
bus.emit('add', 10, 20) //30
複製代碼