機能

Fns の紹介:

言語の基本的な構成要素。
最も重要な概念。
Fn - 何度でも使用できるコード。
{呼び出し、実行、呼び出し} Fn はすべて同じ意味です。
Fn - データを引数として受け取り、計算後の結果としてデータを返すことができます。
Fn 呼び出しは、実行後に返された結果に置き換えられます。
FNS は DRY 原則の実装に最適です
引数が渡され、パラメータは fn.

に渡される値を受け取るプレースホルダです。

Fn 宣言と式:

Fn 宣言は fn キーワードで始まります。
Fn 式は匿名の fn であり、変数内に格納されます。次に、fn を格納する変数が fn として機能します。
匿名の fn defn は式であり、その式は値を生成します。 Fn は単なる値です。
Fn は文字列型、数値型ではありません。これは値であるため、変数に格納できます。
Fn 宣言は、コード内で定義される前、つまりホイスされる前でも呼び出すことができます。これは Fn 式では機能しません。
Fn 式では、ユーザーは最初に fns を定義し、後でそれらを使用する必要があります。すべては変数内に保存されます。
どちらも JS 内で適切な役割を果たしているため、適切に習得する必要があります。
Fn 式 = 本質的には変数に格納された fn 値

Arrow Fn は ES6 に付属していました

ワンライナーの場合は暗黙的なリターン、複数行の場合は明示的なリターンが必要です。
Arrow FNS は独自の「this」キーワードを取得しません
学習は直線的なプロセスではなく、知識は段階的に徐々に蓄積されます。一度に物事についてすべてを学ぶことはできません。

## Default parameters
const bookings = [];

const createBooking = function(flightNum, numPassengers=1, price= 100 * numPassengers){
  // It will work for parameters defined before in the list like numPassengers is defined before its used in expression of next argument else it won't work.
  // Arguments cannot be skipped also with this method. If you want to skip an argument, then manually pass undefined value for it which is equivalent to skipping an argument
  /* Setting default values pre-ES6 days.
  numPassengers = numPassengers || 1;
  price = price || 199;*/

// Using enhanced object literal, where if same property name & value is there, just write them once as shown below.
  const booking = {
    flightNum,
    numPassengers,
    price,
  };

  console.log(booking);
  bookings.push(booking);
}

createBooking('AI123');
/*
{
  flightNum: 'AI123',
  numPassengers: 1,
  price: 100
}
*/ 

createBooking('IN523',7);
/*
{
  flightNum: 'IN523',
  numPassengers: 7,
  price: 700
}
*/ 

createBooking('SJ523',5);
/*
{
  flightNum: 'SJ523',
  numPassengers: 5,
  price: 500
} 
*/ 

createBooking('AA523',undefined, 100000);
/*
{
  flightNum: 'AA523',
  numPassengers: 1,
  price: 100000
}
*/ 

ある fn を別の fn 内から呼び出す:

DRY 原則をサポートする非常に一般的なテクニック。
保守性をサポート
return はすぐに fn
を終了します return = fn から値を出力し、実行を終了します
fn を記述する 3 つの方法がありますが、すべて同じように機能します。つまり、入力、計算、出力
パラメータ = i/p 値を受け取るためのプレースホルダー。fn のローカル変数と同様です。

引数の受け渡しの仕組み、つまり値型と参照型

プリミティブは値によって fn に渡されます。元の値はそのまま残ります。
オブジェクトは参照によって fn に渡されます。元の値が変更されます。
JSには参照渡しの値がありません。

同じオブジェクトに対する異なる FNS の相互作用は、場合によって問題を引き起こす可能性があります

Fns は JS のファーストクラスであるため、HO fns を書くことができます。

Fns は、オブジェクトの単なる別の「タイプ」である値として扱われます。
オブジェクトは値であるため、fns も値です。したがって、変数に保存したり、オブジェクトのプロパティなどとして添付したりすることもできます。
また、fns を他の fns に渡すこともできます。元。イベントリスナーハンドラー
FNSから戻りました。
Fns はオブジェクトであり、オブジェクトには JS 内に独自のメソッドとプロパティがあります。したがって、 fn はメソッドだけでなく、それらに対して呼び出すことができるプロパティを持つことができます。例: 呼び出し、適用、バインドなど

高次 Fn : 別の fn を引数として受け取り、新しい fn またはその両方を返す Fn。 fns は JS のファーストクラスであるためのみ可能です
コールバック fn で渡される Fn。HOF によって呼び出されます。

別の fn を返す fn、つまりクロージャ内。

ファーストクラス FNS と HOF は異なる概念です。

コールバック FNS アドバンス:
抽象化を作成しましょう。より大きな問題に目を向けやすくなります。
コードをより小さなチャンクにモジュール化して再利用します。

// Example for CB & HOF:
// CB1
const oneWord = function(str){
  return str.replace(/ /g,'').toLowerCase();
};

// CB2
const upperFirstWord = function(str){
    const [first, ...others] = str.split(' ');
    return [first.toUpperCase(), ...others].join(' ');
};

// HOF
const transformer = function(str, fn){
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};
transformer('JS is best', upperFirstWord);
transformer('JS is best', oneWord);

// JS uses callbacks all the time.
const hi5 = function(){
  console.log("Hi");
};
document.body.addEventListener('click', hi5);

// forEach will be exectued for each value in the array.
['Alpha','Beta','Gamma','Delta','Eeta'].forEach(hi5);

Fn が別の Fn を返します。

// A fn returning another fn.
const greet = function(greeting){
  return function(name){
    console.log(`${greeting} ${name}`);
  }
}

const userGreet = greet('Hey');
userGreet("Alice");
userGreet("Lola");

// Another way to call
greet('Hello')("Lynda");

// Closures are widely used in Fnal programming paradigm.

// Same work using Arrow Fns. Below is one arrow fn returning another arrow fn.
const greetArr = greeting => name => console.log(`${greeting} ${name}`);

greetArr('Hola')('Roger');

「特定のトピックを徹底的に理解して初めて進歩します。」

call()、apply()、bind():

値を明示的に設定することで「this」キーワードを設定するために使用されます。
call - 'this' キーワードの値の後に引数のリストを受け取ります。
apply - 'this' キーワードの値の後に引数の配列を受け取ります。その配列から要素を取得し、それを関数に渡します。

bind(): このメソッドは、指定されたオブジェクトにバインドされた this キーワードを使用して新しい関数を作成します。新しい関数は、関数の呼び出し方法に関係なく、.bind() によって設定された this コンテキストを保持します。

call() および apply(): これらのメソッドは、指定された this 値と引数を使用して関数を呼び出します。それらの違いは、.call() は引数をリストとして受け取るのに対し、.apply() は引数を配列として受け取ることです。

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name){
    console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    this.bookings.push({flight: `${this.iataCode} ${flightNum}`, name});
  },
};

lufthansa.book(4324,'James Bond');
lufthansa.book(5342,'Julie Bond');
lufthansa;


const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

// Now for the second flight eurowings, we want to use book method, but we shouldn't repeat the code written inside lufthansa object.

// "this" depends on how fn is actually called.
// In a regular fn call, this keyword points to undefined.
// book stores the copy of book method defuned inside the lufthansa object.
const book = lufthansa.book;

// Doesn't work
// book(23, 'Sara Williams');

// first argument is whatever we want 'this' object to point to.
// We invoked the .call() which inturn invoked the book method with 'this' set to eurowings 
// after the first argument, all following arguments are for fn.
book.call(eurowings, 23, 'Sara Williams');
eurowings;

book.call(lufthansa, 735, 'Peter Parker');
lufthansa;

const swiss = {
  airline: 'Swiss Airlines',
  iataCode: 'LX',
  bookings: []
}

// call()
book.call(swiss, 252, 'Joney James');

// apply()
const flightData = [652, 'Mona Lisa'];
book.apply(swiss, flightData);

// Below call() syntax is equivalent to above .apply() syntax. It spreads out the arguments from the array.
book.call(swiss, ...flightData);

以上が機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。