JavaScript 基礎シリーズ: 関数とメソッド

1. 関数とメソッドの違い

関数: 関数は、名前とパラメータを持つ JavaScript コードスニペットであり、一度定義すると複数回呼び出すことができます。
メソッド: 関数とオブジェクトを一緒に記述すると、関数は「メソッド」になります。たとえば、関数がオブジェクトのプロパティに割り当てられると、それを「メソッド」と呼びます。

2. 良い関数の書き方

JS では、変数の他に最もよく使用されるのはおそらく関数であり、これは JavaScript の最初の存在です。

2.1 正確な命名

2.1.1 関数の命名

関数名は明確で、意味が明確であり、関数の機能を簡単に要約したものである必要があります。コードを短くしたいからといって関数名を短くしてはいけません。パフォーマンスや効率は向上しません。逆に、関数名が明確でない場合は、他の人が理解できないことがよくあります。

できるだけ動詞を使用するようにしてください。たとえば、getXxxxx、setXxxxx などです。動詞を前に置くと、意味がより明確になります。

2.1.2 パラメータの命名

セマンティクスを重視したパラメータ命名により、呼び出し側は渡す内容とそれが対応するパラメータをより明確に把握できます。もちろん、callback や fn などの一般的な名前も使用できます。コメントを読まなくても、ここでのパラメーターが何のためにあるのか、何を渡すのかがわかることがよくあります。

2.2 関数注釈

/**
 * 時間書式設定ツール機能 * 
 * @param { (Date | number) } 日付 - 時刻 * @param { string } 単位 - 変換形式 */
export const timeFormat = (date: 日付 | 数値 | 文字列、単位: 文字列) => {
  日付の場合
    戻る ''
  }
  if (typeof date === 'string') は date を返します。
  if (typeof date === 'number') {
    date = 新しい Date(date);
  }
  年 = date.getFullYear();
  月を date.getMonth() で返します。
  定数 day = date.getDate();
  時間を返します。
  date.getMinutes(); 日付を取得します。
  定数秒 = date.getSeconds();
  if (unit === 'year') は `${year}` を返します。
  if (unit === 'month') は `${year}-${month}` を返します。
  if (unit === 'day') は `${year}-${month}-${day}` を返します。
  if (unit === 'hour') は `${year}-${month}-${day} ${hour}` を返します。
  if (unit === 'minute') は `${year}-${month}-${day} ${hour}:${minute}` を返します。
  if (unit === 'second') は `${year}-${month}-${day} ${hour}:${minute}:${second}` を返します。
}

2.2.1 パラメータ注釈

/**
 * 時間書式設定ツール機能 * 
 * @param { (Date | number) } 日付 - 時刻 * @param { string } 単位 - 変換形式 */

@param { type } パラメータ - パラメータの説明: type は、文字列、数値などのパラメータの型を示します。パラメータの型が複数ある場合は、{ (string|string[]) } としてマークして、このパラメータが文字列または文字列配列であることを示します。

オブジェクトのプロパティ: オブジェクトの各プロパティを説明する必要があります

/**
 * 従業員にプロジェクトを割り当てる機能 * 
 * @param {Object} employee - プロジェクト従業員 * @param {string} employee.name - プロジェクト従業員の名前 * @param {string} employee.department - プロジェクト従業員の部署 */
 Project.prototype.assign = function(従業員) {
   // ...
 };

オプションパラメータ:

/**
 * 時間書式設定ツール機能 * 
 * @param { (日付 | 数値 | 文字列) } 日付 - 時刻 * @param { 文字列 } [単位] - 変換形式 */
export const timeFormat = (date: 日付 | 数値 | 文字列、単位: 文字列) => {
  // ...
}

デフォルト値:

/**
 * 時間書式設定ツール機能 * 
 * @param { (Date | number) } 日付 - 時刻 * @param { string } [unit = 'second'] - 変換形式 */
export const timeFormat = (date: 日付 | 数値 | 文字列、単位 = '秒') => {
  // ...
}

2.3 関数パラメータ

2.3.1 デフォルトのパラメータ値

エクスポート const timeFormat = (date: 日付、単位 = '秒') => {
  // ...
}

2.3.2 オブジェクトパラメータ

非同期関数printer_proxy_print(
  html_str: 文字列、
  ファイルパス: 文字列、
  デバイス: 文字列 | 未定義、
  方向: 番号、
  プリンターモード: 文字列、
  幅: 数値、
  高さ: 数値、
  スケール: 数値、
  から: 番号、
  〜まで: 番号、
  left_offset: 数値、
  top_offset: 数値、
  pdf_tools: 文字列 | 未定義、
  begin_page = 1、
  終了ページ = 1、
  繰り返し回数 = 1、
  印刷タイプ: 文字列
）{
    // ...
}

次のように、パラメータにデフォルト値を指定して、最初のいくつかの必要なパラメータだけを渡すこともできます。

非同期関数printer_proxy_print(
  html_str: 文字列、
  ファイルパス: 文字列、
  デバイス = 'pc'、
  方向 = 'xxx'、
  プリンターモード = 'xxx'、
  幅 = 123、
  高さ = 123、
  スケール = 123、
  から = 123、
  〜 = 123、
  左オフセット = 123、
  トップオフセット = 123、
  pdf_tools = 123,
  begin_page = 1、
  終了ページ = 1、
  繰り返し回数 = 1、
  プリントタイプ = 'base64'
）{
    // ...
}

プリンタプロキシプリントを待機します(html_str、ファイルパス)。

上記の方法は実行可能と思われます。実際には、途中の特定のパラメータが異なる場合、このパラメータの前のすべてのパラメータを再度渡す必要があります。これは明らかに実現不可能です。したがって、パラメータが多数ある場合は、オブジェクト分解によってそれらを渡す必要があります。

非同期関数printer_proxy_print({
  html_str、
  ファイルパス、
  デバイス = 'pc'、
  方向 = 'xxx'、
  プリンターモード = 'xxx'、
  幅 = 123、
  高さ = 123、
  スケール = 123、
  から = 123、
  〜 = 123、
  左オフセット = 123、
  トップオフセット = 123、
  pdf_tools = 123,
  begin_page = 1、
  終了ページ = 1、
  繰り返し回数 = 1、
  プリントタイプ = 'base64'
}) {
    // ...
}

プリンタープロキシプリントを待機します({html_str、ファイルパス});

構造化分解の利点は、順序を気にせず、必要な数のパラメータを渡すことができることです。ただし、非常に多くのパラメータを持つ関数では、問題が発生することがよくあります (特定の問題には特定の分析が必要です)。それは、以下で述べるパラメータの数の問題です。

2.3.3 パラメータの数

関数のパラメータが少ないほど良いです。パラメータの数は最大 3 を超えないようにしてください。パラメータが増えると、関係性や論理的な交差が増えることがよくあります。テストを実施する場合、すべての条件を網羅することが困難な場合が多く、問題が発生する可能性が高くなります。

パラメータが多数ある場合、関数も多数あることを意味し、単一関数の原則に違反することがあります。

2.3.4 パラメータ型防御

TS 開発前は、ユーザーが何を渡すかがわからず、型エラーが発生することがよくあります。または、以前の timeFormat 関数のように、互換性を実現したい場合があります。ユーザーが呼び出すときに、時間オブジェクトまたはタイムスタンプをフォーマットしたい場合があります。この場合、防御的なプロセスを実行する必要があります。

  日付の場合
    戻る ''
  }
  if (typeof date === 'string') は date を返します。
  if (typeof date === 'number') {
    date = 新しい Date(date);
  }

ただし、TS を使用する場合でも、ほとんどの場合はパラメータタイプの問題を回避できますが、インターフェイスによって返されたデータを直接受け入れる場合もあるため、これは絶対的なものではないことに注意してください。

ユーザー入力を決して信用してはいけないとよく言われます。同様に、インターフェースから返されるデータも信用しません。バックエンドが間違いを起こさないことを保証することはできません。合意されたパラメータは配列型です。空なのになぜ null を返すのですか?

もちろん、こうした状況では試行錯誤が必要になることもありますし、可能性を考えればできることもあるので、怠けずにタイプ判断を書き留めておきましょう。

2.4 関数の戻り

2.4.1 べき等関数

べき等性とは、簡単に言えば、入力と出力が固定されているということです。入力パラメータによって出力パラメータが決まります。何度呼び出されても、入力が同じであれば、結果は同じになるはずです。

  関数 sum(a: 数値, b: 数値) {
    a + b を返します。
  }

べき等関数は保守可能であり、単体テストが比較的簡単です。

2.4.2 純粋関数

純粋関数は、べき等性があることに加えて、副作用がないことが必要です。

  定数犬 = {
    名前: 「子犬」
    年齢: 2,
    重量: 30,
  }

  もし (!dog.color) {
    console.log('色がありません');
  }

  関数addColor(dog) {
    dog.color = '白';
  }

  犬に色を追加します。
  console.log(dog); // {名前: "子犬"、年齢: 2、体重: 30、色: "白"}

ご覧のとおり、addColor 関数は dog オブジェクトのプロパティを変更するため、副作用が発生します。

  関数addColor(dog) {
    copyDog = Object.assign({}, dog);
    copyDog.color = '白';
    copyDog を返します。
  }

この方法では、dog オブジェクトのプロパティは変更されず、addColor 関数は純粋な関数になります。

2.4.3 nullを返す

Null は処理が比較的面倒で、判断が必要となり、追加のコードが必要になります。null オブジェクト、空の配列を返すか、例外をスローする必要があります。

関数とメソッドの違い

1) 関数は名前で呼び出されるコードです。処理のために何らかのデータ (パラメータ) を渡し、その後何らかのデータ (戻り値) を返すことも、戻り値がないこともあります。

2) メソッドは、オブジェクトを通じて呼び出される JavaScript 関数です。言い換えれば、メソッドも関数であり、ただ特別なものであるというだけです。オブジェクトに関連付けられます。関数 fn とオブジェクト obj があると仮定すると、メソッドを定義できます。

obj.method = fn;
メソッド

3) 関数のデータが明示的に渡される

4) メソッド内のデータは暗黙的に渡され、メソッドはオブジェクトに関連付けられます。

要約する

これで、JavaScript の基礎シリーズ: 関数とメソッドに関するこの記事は終了です。JavaScript の関数とメソッドの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: