ホームページ > ウェブフロントエンド > jsチュートリアル > Ruby のメソッドを実装する JavaScript でのメソッド

Ruby のメソッドを実装する JavaScript でのメソッド

WBOY
リリース: 2024-07-31 06:30:13
オリジナル
1043 人が閲覧しました

Implementing Ruby

突然ですが、Rubyのメソッドメソッドって便利じゃないですか?コードを記述するときに、オブジェクトで使用できるすべてのメソッドとプロパティがリストされ、それらを検索できるため、デバッグに非常に役立ちます。

それに加えて、Rails のようなフレームワークに固有のメソッドをチェックするのにも効果的で、コードの読み取りとライブラリの理解に役立ちます。公式ドキュメントやソース コードを参照することをお勧めしますが、メソッド メソッドは、深く調べる必要がないライブラリやメソッド名の記憶が曖昧な場合に非常に役立ちます。

Rubyのメソッド メソッド

Ruby のメソッドメソッドを簡単に紹介すると、次のようになります。

オブジェクト#メソッド

obj の public メソッドと protected メソッドの名前のリストを返します。これには、obj の先祖でアクセスできるすべてのメソッドが含まれます。オプションのパラメーターが false の場合、obj のパブリックおよび保護されたシングルトン メソッドの配列が返されます。配列には、obj に含まれるモジュールのメソッドは含まれません。

言い換えると、受信側からアクセスできるプロパティとメソッドの配列オブジェクトを返します。

このメソッドは、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.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 の説明は以上です。

まとめ

コードの説明と私が試したことは以上です。

これは実験的または遊び心のある演習でしたが、いくつかの知識とテクニックが含まれていたため、ご自身のアプリケーションに役立つ、またはインスピレーションを感じていただければ幸いです。

以上がRuby のメソッドを実装する JavaScript でのメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート