アクセス可能な言語でAPI proを反映する

みなさんこんにちは！ 最近、一部の若いフロントエンド入札者がどのようにReflectがJavaScriptであるかを他の若いフロントエンド入札者に説明しようとしたことを聞きました。 その結果、誰かがこれはプロキシと同じことだと言いました。 状況は私に冗談を思い出させました：



2つのマイナーがあります。

「これについて何か理解できますか？」

-さて、説明できます。

「それは理解できますが、これについて何か理解できますか？」



そのため、JSでReflectを使用すると、誰かにとって同じ状況が判明しました。 それは何かを言っているようですが、どのような目的のためにそれは明確ではありません。 最後に、例を挙げて簡単な言語でもう一度説明する価値があると思いました。



最初に、プログラミングに反映されるものを定義しましょう。

Reflection / Reflect APIは、クラス、インターフェース、関数、メソッド、およびモジュールをリバースエンジニアリングする機能を提供するAPIです。



ここから、このAPIを使用する理由が少し明確になります。 Reflection APIはさまざまなプログラミング言語に存在し、時にはPLによって課される制限を回避するために使用されます。 また、さまざまな補助ユーティリティの開発や、さまざまなパターン（インジェクションなど）などの実装にも使用されます。



たとえば、Reflection APIはJavaにあります。 Javaプログラムの実行中に、クラス、インターフェース、メソッド、フィールド、コンストラクター、および注釈に関する情報を表示するために使用されます。 たとえば、JavaでReflectionを使用する場合、OOPパターン-Public Morozovを使用できます。



PHPにはReflection APIもあり、リバースエンジニアリングだけでなく、さまざまな自己文書化システムで使用されるコメントのdocブロックを受信することもできます。



JavaScriptのReflectは、JavaScript操作をインターセプトするメソッドを提供する組み込みオブジェクトです。 実際、これは名前空間です（Mathなど）。 Reflectには、Proxyのメソッドとまったく同じように呼び出される一連の関数が含まれています。



これらのメソッドの一部は、ObjectまたはFunctionクラスの対応するメソッドと同じです。 JavaScriptは成長し、大きく複雑なJPに変わります。 他の言語からのさまざまなものが言語に入ります。 現在、Reflect APIは他の言語ほどには機能していません。 ただし、まだ標準の一部ではないが既に使用されている拡張提案があります。 たとえば、リフレクションメタデータ。



JSのReflect名前空間は、コードのリファクタリングの結果であると言えます。 すでにReflect APIの機能を使用しましたが、これらの機能はすべて基本クラスObjectに埋め込まれています。

メタデータの反映/メタデータの反映

このAPIは、実行時にオブジェクトに関する情報を取得するように設計されています。 これは提案であり、まだ標準ではありません。 現在、Polyphilが積極的に使用されています。 現在、Angularで積極的に使用されています。 このAPIを使用して、Injectとデコレーター（アノテーター）が実装されます。



実際、Angularのために、TypeScriptは拡張デコレータ構文で拡張されています。 デコレータの興味深い機能の1つは、装飾されたプロパティまたはパラメータのタイプに関する情報を取得できることです。 これが機能するには、reflect-metadataライブラリを接続する必要があります。これは、標準のReflectオブジェクトを拡張し、TS構成でemitDecoratorMetadataオプションを有効にします。 その後、少なくとも1つのデコレータを持つプロパティの場合、キー「design：type」を指定してReflect.getMetadataを呼び出すことができます。

ReflectとProxyの違いは何ですか？

Reflectは、オブジェクトを操作するための便利なメソッドのセットで、その半分はオブジェクトから既存のものに書き換えられます。 これは、Objectが基本クラスであるため、セマンティクスを改善し、順序を復元するために行われましたが、同時に、含まれてはならないメソッドが多数含まれています。 また、空のプロトタイプを使用してオブジェクトを作成すると、リフレクションメソッドは表示されなくなります（以下に例を示して、これが何を意味するかを示します）。



プロキシは、アクセスをインターセプトするハンドラーがインストールされた新しいオブジェクトを常に作成するクラスです。 オブジェクトを使用してアクションをキャッチし、変更することができます。 Reflectは、さまざまなロジックの実装によく使用されます。 以下に例を示して、これを明確に見ることができます。

ユースケース

それでは、Reflect APIの使用方法を見てみましょう。 いくつかの例は長い間知られていますが、これらの目的のためだけにObjectクラスのメソッドを使用することに慣れています。 しかし、論理的には、Reflectパッケージ（パッケージ-Javaの用語）からそれらを使用する方が正しいでしょう。

自動生成されたオブジェクトフィールド

オブジェクトにアクセスすると、オブジェクトのフィールドが自動的に作成されるオブジェクトを作成できます。

const emptyObj = () => new Proxy({}, { get: (target, key, receiver) => ( Reflect.has(target, key) || Reflect.set(target, key, emptyObj()), Reflect.get(target, key, receiver) ) } ) ; const path = emptyObj(); path.to.virtual.node.in.empty.object = 123; console.log(path.to.virtual.node.in.empty.object); // 123
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてがクールですが、そのようなオブジェクトをJSONでシリアル化できないため、エラーが発生します。 マジックシリアル化メソッドを追加する-toJSON

 console.clear(); const emptyObj = () => new Proxy({}, { get: (target, key, receiver) => ( key == 'toJSON' ? () => target : ( Reflect.has(target, key) || Reflect.set(target, key, emptyObj()), Reflect.get(target, key, receiver) ) ) } ) ; const path = emptyObj(); path.to.virtual.node.in.empty.object = 123; console.log(JSON.stringify(path)); // {"to":{"virtual":{"node":{"in":{"empty":{"object":123}}}}}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動的コンストラクター呼び出し

私たちが持っています：

 var obj = new F(...args)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、コンストラクタを動的に呼び出してオブジェクトを作成できるようにしたいと考えています。 これにはReflect.constructがあります。

 var obj = Reflect.construct(F, args)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

工場での使用に必要な場合があります（OOP同性愛者は理解します）。 例：

 // Old method function Greeting(name) { this.name = name } Greeting.prototype.greet = function() { return `Hello ${this.name}` } function greetingFactory(name) { var instance = Object.create(Greeting.prototype); Greeting.call(instance, name); return instance; } var obj = greetingFactory('Tuturu'); obj.greet();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2017年にはどのように書かれていますか：

 class Greeting { constructor(name) { this.name = name } greet() { return `Hello ${this.name}` } } const greetingFactory = name => Reflect.construct(Greeting, [name]); const obj = greetingFactory('Tuturu'); obj.greet();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQueryの動作を繰り返す

次の行は、jQueryを2行で作成する方法を示しています。

 const $ = document.querySelector.bind(document); Element.prototype.on = Element.prototype.addEventListener;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

依存関係のない何かをすばやく構築する必要がある場合に便利であり、長いネイティブ構成を書くのが面倒です。 ただし、この実装にはマイナスがあります。nullを操作すると例外がスローされます。

 console.log( $('some').innerHTML ); error TypeError: Cannot read property 'innerHTML' of null
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ProxyとReflectを使用して、この例を書き換えることができます。

 const $ = selector => new Proxy( document.querySelector(selector)||Element, { get: (target, key) => Reflect.get(target, key) } ) ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、nullプロパティにアクセスしようとすると、未定義になります。

 console.log( $('some').innerHTML ); // undefined
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

では、なぜReflectを使用するのですか？

Reflect APIはエラー処理に便利です。 たとえば、誰もが命令を知っています：

Object.defineProperty（obj、名前、desc）



失敗した場合、例外がスローされます。 ただし、Reflectはすべてに対して例外をスローするわけではありませんが、ブール値の結果を返すことができます。

 try { Object.defineProperty(obj, name, desc); // property defined successfully } catch (e) { // possible failure (and might accidentally catch the wrong exception) } /* --- OR --- */ if (Reflect.defineProperty(obj, name, desc)) { // success } else { // failure }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、エラーをtry-catchではなく条件で処理できます。 エラー処理でReflect APIを使用する例：

 try { var foo = Object.freeze({bar: 1}); delete foo.bar; } catch (e) {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして今、あなたはこのように書くことができます：

 var foo = Object.freeze({bar: 1}); if (Reflect.deleteProperty(foo, 'bar')) { console.log('ok'); } else { console.log('error'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、Reflectも例外をスローする場合があると言わなければなりません。

一部のエントリは短くなっています

さらに苦労せずに：

 Function.prototype.apply.call(func, obj, args) /* --- OR --- */ Reflect.apply.call(func, obj, args)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行動の違い

言葉のない例：

 Object.getPrototypeOf(1); // undefined Reflect.getPrototypeOf(1); // TypeError
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが明らかなようです。 私たちはそれが優れていると結論付けます。 Reflect APIはより論理的です。

空のプロトタイプを持つオブジェクトを操作する

与えられた：

 const myObject = Object.create(null); myObject.foo = 123; myObject.hasOwnProperty === undefined; // true //    : Object.prototype.hasOwnProperty.call( myObject, 'foo' ); // true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、hasOwnPropertyなどのリフレクションメソッドはありません。 したがって、基本クラスのプロトタイプを参照する古い方法を使用するか、Reflect APIを参照します。

 Reflect.ownKeys(myObject).includes('foo') // true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結論

Reflect APIはリファクタリングの結果です。 この名前空間には、以前に基本クラスObject、Function ...に接続されていたリフレクション関数が含まれ、動作とエラー処理が変更されました。 将来、この名前空間は他のリフレクティブツールで拡張されます。 また、プロキシを使用する場合、Reflect APIは不可欠な部分と考えることができます（上記の例からわかるように）。