Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptの関数チェーンとは何ですか?


機能の連鎖

機能の連鎖 ドット表記を使用して関数を1行にグループ化することに他なりません。 。このタイプのチェーンは、コードを非常に簡潔にし、パフォーマンスも向上させます。ここでは、関数チェーンについて学習します。 通常のオブジェクトを使用します。

a)機能連鎖なし

次の例では、オブジェクト'obj'が作成され、そのオブジェクトにパブリックプロパティが作成されます。 「i」という名前は、キーワード「this」を使用して作成されます 最初に値0が割り当てられます。後でadd()、subtract()、print()と呼ばれるユーザー定義関数が同じオブジェクト'obj'内に作成されます。これで、オブジェクト「obj」はクラスのように機能します(そのプロパティは他のオブジェクトと共有できます)。

これで、キーワード「new」を使用して「x」(ユーザー定義)というもう1つのオブジェクトが作成され、オブジェクト「obj」のプロパティを使用してアクセスできるようになります。 add()、subtract()、print()などの「obj」内で宣言された関数は返されないため、関数チェーン 不可能であり、未定義 は出力として表示されますが、個別に(チェーンされていない)これらの関数は出力を3(ユーザー提供の「5-2」)として実行します。

<html>
<body>
<script>
   var obj = function(){
      this.i = 0;
      this.add = function(i){
         this.i += i;
       };
       this.subtract = function(i){
          this.i -= i;
       };
       this.print = function(){
          document.write(this.i);
          document.write("</br>");
          document.write(x.add(3));  // returns undefined
       }
   }
   var x = new obj();
   x.add(5);
   x.subtract(2);
   x.print(); // 5-2 = 3 so prints 3.
   x.add(5).subtract(2).print();  //  function chaining is not possible so undefined
</script>
</body>
</html>

出力

3
undefined

b)機能連鎖あり

次の例では、上記のシナリオ例を考慮して、ユーザー定義の「return this」ステートメントを使用して、add()やsubtract()などの関数が返され、出力として3を表示することで、関数チェーンが可能になります。

<html>
<body>
<script>
   var obj = function(){
      this.i = 0;
      this.add = function(i){
         this.i += i;
         return this;
      };
      this.subtract = function(i){
         this.i -= i;
         return this;
      };
      this.print = function(){
         document.write(this.i);
      }
   }
var x = new obj();
x.add(5).subtract(2).print();
</script>
</body>
</html>

出力

3

  1. JavaScriptの関数式とは何ですか?

    関数式を使用すると、後で変数名を使用して呼び出すことができる変数に関数を格納できます。また、通常の関数宣言のように吊り上げられていないため、定義する前に呼び出すことはできません。 以下は、JavaScriptで関数式を実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid

  2. JavaScriptのクロージャとは何ですか?

    JavaScriptのクロージャを使用すると、外部関数が実行されて返された後でも、内部関数から外部関数スコープにアクセスできます。これは、内部関数が常に外部関数変数にアクセスできることを意味します。 以下はJavaScriptのクロージャのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device