前端手寫代碼原理實現

来源:https://www.cnblogs.com/chanwahfung/archive/2020/02/15/12312253.html
-Advertisement-
Play Games

前言 現在的前端門檻越來越高,不再是只會寫寫頁面那麼簡單。模塊化、自動化、跨端開發等逐漸成為要求,但是這些都需要建立在我們牢固的基礎之上。不管框架和模式怎麼變,把基礎原理打牢才能快速適應市場的變化。下麵介紹一些常用的源碼實現: call實現 bind實現 new實現 instanceof實現 Obj ...


前言

現在的前端門檻越來越高,不再是只會寫寫頁面那麼簡單。模塊化、自動化、跨端開發等逐漸成為要求,但是這些都需要建立在我們牢固的基礎之上。不管框架和模式怎麼變,把基礎原理打牢才能快速適應市場的變化。下麵介紹一些常用的源碼實現:

  • 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
}

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 taskQueen = this.task[name]
    if(taskQueen && taskQueen.length > 0){
      taskQueen.forEach(cb=>{
        cb(...arg)
      })
    }
  }

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

  once(name, cb){
    function callback(...arg){
      this.off(name, cb)
      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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 阿基米德說“給我一個支點,我能翹起整個地球”,在HTML頁面中,給你一個坐標,可以把任何一個元素定位目標點,這就是定位!CSS有三種基本的定位機制:相對定位、絕對定位、固定定位,決定定位的position屬性的值有static預設標準流,當然這個就不用多說了;fixed固定定位,releative相... ...
  • 今天練習使用DOM創建html元素,想通過getElementsByTagName("body")獲得body對象,然後建立和新創建的元素的關係,如下圖: 其實,getElementsByTagName("body")得到的是一個偽數組,需要按照數組的訪問方式進行方式,但是不能調用數組的方法,若需調 ...
  • 正則表達式都是操作字元串的 作用:對數據進行查找、替換、有效性驗證 創建正則表達式的兩種方式: // 字面量方式 /js/ // 構造函數方式 regular expression new RegExp() 普通字元:字母 數字 漢字 _ 空格 ; , @ (沒有特殊含義的符號) 兩種匹配的方式: ...
  • 這兩天複習了下HTML和CSS的一些基本內容並實現了兩個小的案例,在此整理一下。 主要內容 1. web概念概述 2. HTML 3. CSS web概念概述 JavaWeb: 使用Java語言開發基於互聯網的項目 軟體架構: 1. C/S: Client/Server 客戶端/伺服器端 在用戶本地 ...
  • 瀏覽器訪問網站過程 1. 用戶在瀏覽器地址欄中輸入網址 2. 瀏覽器解析網址構建HTTP請求 HTTP請求報文包括:請求行、請求頭和請求體 3. 瀏覽器發起DNS解析請求,將功能變數名稱轉化為IP地址 網址映射到伺服器IP地址,指定了訪問的伺服器 4. 瀏覽器發送請求報文給到伺服器 5. 伺服器接收並解析報 ...
  • 佈局是什麼?根據功能劃分小塊,再根據設計稿還原,書寫靜態頁面,然後再在塊裡面填充內容,完善功能,js施加交互效果。div作為一個容器,獨占一行,代碼書寫習慣從上至下屬於標準流,而浮動float的css樣式則打破div(標準流)獨占一行的傳統!具體代碼展示如下: ...
  • 盒模型規定了元素框處理元素內容width與height值、內邊距padding、邊框border 和 外邊距margin 的數值大小。邊框內的空白是內邊距padding,邊框外的空白是外邊距margin,如下所示,這個盒模型元素框的寬度值=內容區域的寬度+2(內邊距+外邊距+邊框),也就是該示例中的... ...
  • 能找到一份前端開發工作,首先你起碼得是一個合格的初級前端工程師。那麼,什麼是初級前端工程師?初級前端工程師都會做些什麼?這個問題需要分為以下幾個方面來說: ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...