」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在 JavaScript 中實作 Ruby 的方法 Method

在 JavaScript 中實作 Ruby 的方法 Method

發佈於2024-08-21
瀏覽:563

Implementing Ruby

突然覺得Ruby的methods方法是不是很方便呢?編寫程式碼時,它會列出物件可用的所有方法和屬性,並允許您搜尋它們,這對於偵錯非常有用。

除此之外,它對於檢查 Rails 等框架特有的方法也很有效,有助於程式碼閱讀和理解函式庫。雖然參考官方文件或原始程式碼是一種很好的做法,但當您不需要深入研究或對方法名稱有模糊記憶時,methods 方法對於函式庫非常有幫助。

Ruby 的方法 Method

簡單介紹Ruby的methods方法,長這樣:

物件#方法

傳回 obj 的公共方法和受保護方法的名稱清單。這將包括 obj 祖先中可訪問的所有方法。如果選用參數為 false,則傳回 obj 的公共和受保護單例方法的數組,則該數組將不包含 obj 中包含的模組中的方法。

換句話說,它傳回一個包含可從接收者存取的屬性和方法的陣列物件。

該方法在Object類別中實現,Object類別是所有繼承自Object的類別的祖先,因此可以在任何繼承自Object的類別中使用。

範例程式碼

class Hoge
  attr_accessor :fuga

  def bar
    puts ''
  end
end

puts Hoge.new.methods     // => [:bar, :fuga=, :fuga, :hash, :singleton_class, :dup, ...]
puts Hoge.new.grep /fuga/ // => [:fuga=, :fuga]

如範例所示,它傳回一個Array對象,因此您也可以使用grep方法搜尋方法列表,非常方便。

於是我想了一下是否可以用JS來實現,並嘗試了一下。

執行

下面是實際程式碼。

類別名稱可以是任何名稱,但我現在將其命名為 PropertyFinder。

class PropertyFinder {
    constructor(receiver) {
      this.receiver = receiver
    }

    grep(regexp, options = {}) {
      let res = []
      if (typeof regexp === 'string') {
        return this.find((name) => name.includes(regexp))
      }
      if (regexp instanceof RegExp) {
        return this.find((name) => regexp.test(name))
      }
      return []
    }

    toString() {
      return this.find(() => true)
    }

    find(detect) {
      const list = Object.getOwnPropertyNames(this.receiver).filter(it => detect(it))
      if (!this.receiver.__proto__) {
        return list
      }
      const ancestors = new PropertyFinder(this.receiver.__proto__).find(detect)
      return [...list, ...ancestors]
    }
}

稍後我會解釋程式碼,但讓我們先從如何使用它開始。

定義類別後,您可以為 Object 類別的屬性新增方法,如下所示:

Object.prototype.methods = function () {
    return new PropertyFinder(this)
}

透過這樣做,您可以在繼承自 Object 的類別的實例上使用methods 方法。但是,請注意下面的警告說明,並自行承擔使用風險。

以下是一些執行範例:

class Hoge {
  fuga() {
    console.log('fuga')
  }
}

console.log(new Object().methods().toString()) // => ['constructor', 'constructor', '__defineGetter__', '__defineSetter__', 'hasOwnProperty' ...]
console.log([].methods().toString())           // => ['length', 'length', 'constructor', 'at', 'concat', ...]
console.log(new Hoge().methods().grep(/fuga/)  // => ['fuga']

安全介紹

*此程式碼不建議在生產環境中使用*

透過猴子修補向更高層級的類別添加屬性是一種反模式,可能會導致 JS 規範的未來變化出現問題。請謹慎使用並自行承擔風險。

參考:猴子補丁的缺點

程式碼說明

現在,讓我們繼續解釋程式碼。

PropertyFinder 中最重要的方法是 find 方法。此方法遍歷給定物件的原型鏈,搜尋可存取的屬性,並將它們作為清單傳回。

toString和grep方法只是使用find,因此不需要進一步解釋。

原型鏈

原型鏈可能有些人不熟悉,但它是Object類別屬性的繼承。

繼承與原型鏈| MDN

細節在MDN文件中有介紹,但是JavaScript的繼承機制是由原型鏈支援的。

雖然不總是顯而易見,但當引用某些屬性時,該過程涉及:

  1. 檢查接收者本身是否具有該屬性。
  2. 檢查父類別實例是否具有該屬性。
  3. 檢查父類別實例的父類別中是否存在該屬性。

此過程沿著鏈向上繼續,直到找到匹配項,然後將其返回。

find 方法的作用

鑑於上述情況,PropertyFinder 中的 find 方法實現了這種機制,讓您可以透過遞歸探索 __proto__ 來取得屬性清單。

這是透過遞歸探索 __proto__ 來取得清單來實現此目的的實現:

    find(detect) {
      const list = Object.getOwnPropertyNames(this.receiver).filter(it => detect(it))
      if (!this.receiver.__proto__) {
        return list
      }
      const ancestors = new PropertyFinder(this.receiver.__proto__).find(detect)
      return [...list, ...ancestors]
    }

PropertyFinder 的說明到此結束。

包起來

這總結了程式碼的解釋以及我所嘗試的內容。

這更多的是一個實驗性或有趣的練習,但由於它涉及一些知識和技術,我希望您發現它對您自己的應用程序有用或啟發。

版本聲明 本文轉載於:https://dev.to/version1/implementing-rubys-methods-method-in-javascript-p1e?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Encore.ts — 比 ElysiaJS 和 Hono 更快
    Encore.ts — 比 ElysiaJS 和 Hono 更快
    几个月前,我们发布了 Encore.ts — TypeScript 的开源后端框架。 由于已经有很多框架,我们想分享我们做出的一些不常见的设计决策以及它们如何带来卓越的性能数据。 性能基准 我们之前发布的基准测试显示 Encore.ts 比 Express 快 9 倍,比 Fasti...
    程式設計 發佈於2024-11-05
  • 為什麼使用 + 對字串文字進行字串連接失敗?
    為什麼使用 + 對字串文字進行字串連接失敗?
    連接字串文字與字串在 C 中,運算子可用於連接字串和字串文字。但是,此功能存在限制,可能會導致混亂。 在問題中,作者嘗試連接字串文字「Hello」、「,world」和「!」以兩種不同的方式。第一個例子:const string hello = "Hello"; const str...
    程式設計 發佈於2024-11-05
  • React 重新渲染:最佳效能的最佳實踐
    React 重新渲染:最佳效能的最佳實踐
    React高效率的渲染機制是其受歡迎的關鍵原因之一。然而,隨著應用程式複雜性的增加,管理元件重新渲染對於最佳化效能變得至關重要。讓我們探索優化 React 渲染行為並避免不必要的重新渲染的最佳實踐。 1. 使用 React.memo() 作為函數式元件 React.memo() 是...
    程式設計 發佈於2024-11-05
  • 如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    Creating a Conditional Column: If-Elif-Else in Pandas給定的問題要求將新列新增至DataFrame 中基於一系列條件標準。挑戰在於在實現這些條件的同時保持程式碼效率和可讀性。 使用函數應用程式的解決方案一種方法涉及創建一個將每一行映射到所需結果的函...
    程式設計 發佈於2024-11-05
  • 介紹邱!
    介紹邱!
    我很高興地宣布發布 Qiu – 一個嚴肅的 SQL 查詢運行器,旨在讓原始 SQL 再次變得有趣。老實說,ORM 有其用武之地,但當您只想編寫簡單的 SQL 時,它們可能會有點不知所措。我一直很喜歡寫原始 SQL 查詢,但我意識到我需要練習——大量的練習。這就是Qiu發揮作用的地方。 有了 Qiu...
    程式設計 發佈於2024-11-05
  • 為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    CSS 中的 margin-top 百分比計算CSS 中的 margin-top 百分比計算當對元素應用 margin-top 百分比時,必須了解計算方式執行。與普遍的看法相反,邊距頂部百分比是根據包含塊的寬度而不是其高度來確定的。 W3C 規範解釋:W3C 規範解釋:根據W3C 規範,“百分比是根...
    程式設計 發佈於2024-11-05
  • 如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    解決CSS 轉換期間的Webkit 文本渲染不一致在CSS 轉換期間,特別是縮放元素時,Webkit 中可能會出現文本渲染不一致的情況瀏覽器。這個問題源自於瀏覽器嘗試優化渲染效能。 一種解決方案是透過添加以下屬性來強制對過渡元素的父元素進行硬體加速:-webkit-transform: transl...
    程式設計 發佈於2024-11-05
  • 使用 Reactables 簡化 RxJS
    使用 Reactables 簡化 RxJS
    介紹 RxJS 是一個功能強大的庫,但眾所周知,它的學習曲線很陡峭。 這個函式庫龐大的 API 介面,再加上向反應式程式設計的典範轉移,可能會讓新手不知所措。 我創建了 Reactables API 來簡化 RxJS 的使用並簡化開發人員對反應式程式設計的介紹。 ...
    程式設計 發佈於2024-11-05
  • 如何在 Pandas 中找到多列的最大值?
    如何在 Pandas 中找到多列的最大值?
    找出 Pandas 中多列的最大值要確定 pandas DataFrame 中多列的最大值,可以採用多種方法。以下是實現此目的的方法:對指定列使用max() 函數此方法涉及明確選擇所需的列並應用max() 函數: df[["A", "B"]] df[[&quo...
    程式設計 發佈於2024-11-05
  • CI/CD 入門:自動化第一個管道的初學者指南(使用 Jenkins)
    CI/CD 入門:自動化第一個管道的初學者指南(使用 Jenkins)
    目錄 介紹 什麼是 CI/CD? 持續整合(CI) 持續交付(CD) 持續部署 CI/CD 的好處 更快的上市時間 提高程式碼品質 高效率協作 提高自動化程度和一致性 如何建立您的第一個 CI/CD 管道 第 1 步:設定版本控制 (GitHub) 步驟 2: 選擇 CI/CD ...
    程式設計 發佈於2024-11-05
  • TypeScript 如何讓 JavaScript 在大型專案中更加可靠。
    TypeScript 如何讓 JavaScript 在大型專案中更加可靠。
    介绍 JavaScript 广泛应用于 Web 开发,现在也被应用于不同行业的大型项目中。然而,随着这些项目的增长,管理 JavaScript 代码变得更加困难。数据类型不匹配、运行时意外错误以及代码不清晰等问题可能会导致查找和修复错误变得困难。 这就是TypeScript介入的地...
    程式設計 發佈於2024-11-05
  • 如何使用PHP的password_verify函數安全地驗證使用者密碼?
    如何使用PHP的password_verify函數安全地驗證使用者密碼?
    使用 PHP 解密加密密碼許多應用程式使用密碼雜湊等加密演算法安全地儲存使用者密碼。然而,在驗證登入嘗試時,將輸入密碼與加密的儲存版本進行比較非常重要。 加密問題password_hash 使用 Bcrypt,一元加密演算法方式雜湊演算法,表示加密的密碼無法逆轉或解密。這是一項安全功能,可確保即使資...
    程式設計 發佈於2024-11-05
  • 學習 Vue 部分 建立天氣應用程式
    學習 Vue 部分 建立天氣應用程式
    深入研究 Vue.js 就像在 DIY 工具包中發現了一個新的最喜歡的工具——直觀、靈活,而且功能強大得驚人。我接觸 Vue 的第一個副業專案是一個天氣應用程序,它教會了我很多關於框架功能以及一般 Web 開發的知識。這是我到目前為止所學到的。 1. Vue 入門:簡單與強大 Vu...
    程式設計 發佈於2024-11-05
  • NFT 預覽卡組件
    NFT 預覽卡組件
    ?剛剛完成了我的最新專案:使用 HTML 和 CSS 的「NFT 預覽卡元件」! ?查看並探索 GitHub 上的程式碼。歡迎反饋! ? GitHub:[https://github.com/khanimran17/NFT-preview-card-component] ?現場示範:[https:...
    程式設計 發佈於2024-11-05
  • Android 應用程式如何連接到 Microsoft SQL Server 2008?
    Android 應用程式如何連接到 Microsoft SQL Server 2008?
    將Android 應用程式連接到Microsoft SQL Server 2008Android 應用程式可以無縫連接到中央資料庫伺服器,包括Microsoft SQL Server 2008。這種連接允許開發人員從其行動應用程式存取和管理儲存在遠端伺服器上的資料。 連接方法雖然提供的範例程式碼專注...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3