JS 関数呼び出し、適用、バインドメソッド1. call() メソッド
/* 通常モード */ obj = { 合計(a, b) { console.log(これ) a + bを返す } } // sum 関数の apply メソッドと bind メソッドを実行します。出力される内容は以下のようになります。obj.sum.call() // ウィンドウを印刷 obj.sum.call(undefined, 1, 2) // 印刷ウィンドウ obj.sum.call(null, 1, 2) // 印刷ウィンドウ /* 厳密モード */ 「厳密な使用」 // sum関数のapplyメソッドとbindメソッドを実行し、以下のように出力します。obj.sum.call() // undefinedを出力します。 obj.sum.call(undefined, 1, 2) // undefined と表示される obj.sum.call(null, 1, 2) // null を出力します 1. call() メソッドのシミュレーション実装要点:
call()、apply()、bind() メソッドのシミュレーション実装では、最初のパラメータが渡されないか、undefined または null が渡された場合、ここでは JS 通常モードと厳密モードで統一された処理が行われ、つまり、対象関数内の this は window オブジェクトを指します。 コードは次のとおりです。 Function.prototype.myCall = function (コンテキスト、...引数) { コンテキスト === 未定義 || コンテキスト === null の場合 { コンテキスト = ウィンドウ } // 次の行はコアコードです context.fn = this const 結果 = context.fn(...args) コンテキストを削除する.fn 結果を返す } obj1 = { 基本数: 1, 合計(a, b) { console.log(これ) this.basicNum + a + b を返す } } obj2 = { 基本数: 9 } コンソールログ(obj1.sum.call(obj2, 2, 3)) // 14 コンソールログ(obj1.sum.myCall(obj2, 2, 3)) // 14 2. apply() メソッド
1. apply() メソッドのシミュレーション実装要点:
コードは次のとおりです。 Function.prototype.myApply = 関数 (コンテキスト、引数) { コンテキスト === 未定義 || コンテキスト === null の場合 { コンテキスト = ウィンドウ } // 次の行はコアコードです context.fn = this const 結果 = context.fn(...args) コンテキストを削除する.fn 結果を返す } コンソール.log(obj1.sum.apply(obj2, [2, 3])) // 14 コンソール.log(obj1.sum.myApply(obj2, [2, 3])) // 14 3. bind() メソッド
1. bind() メソッドのシミュレーション実装要点:
コードは次のとおりです。 Function.prototype.myBind = function (context, ...initArgs) { コンテキスト === 未定義 || コンテキスト === null の場合 { コンテキスト = ウィンドウ } // この値をキャッシュする const _this = this 関数を返す (...引数) { // 次の行はコアコードです context.fn = _this const 結果 = context.fn(...initArgs, ...args) コンテキストを削除する.fn 結果を返す } } コンソール.log(obj1.sum.bind(obj2, 2)(3)) // 14 コンソール.log(obj1.sum.myBind(obj2, 2)(3)) // 14 IV. 結論3 つの方法の類似点と相違点:
上記は、JS 関数の呼び出し、適用、バインドの超詳細なメソッドの詳細です。JS 関数の呼び出し、適用、バインドメソッドの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: よく使われるLinuxコマンド「ll」が無効、またはコマンドが見つからないという問題を解決します
目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...
目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...
Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...
目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...
H タグ、特に h1 タグの使用は常に議論の的となっている問題であり、私たちが研究する価値のある問題...
この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...
1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...
目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...
目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...
目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...
目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...
ディスクを自動的に検出する構成キーの値注: このキー値は Linux プラットフォームでのみサポート...
目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...
序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...