ネイティブ js で呼び出し、適用、バインドを実装する方法

ネイティブ js で呼び出し、適用、バインドを実装する方法

1. 呼び出しを実装する

ステップ:

  1. 関数をオブジェクトのプロパティとして設定します。
  2. これを関数に割り当て、指定されたパラメータを渡して関数を実行します。
  3. 実行後にこの関数を削除します。
  4. パラメータが渡されない場合、デフォルトでは window を指します。
Function.prototype.mycall = function (コンテキスト、...引数) {
    //関数かどうかを判断します。関数でない場合はエラーが報告されます if (typeof this !== "function") {
        新しいエラーをスローします("関数ではありません");
    }
    コンテキスト = コンテキスト || ウィンドウ;
    コンテキスト.fn = これ;
    const res = context.fn(...args);
    context.fn を削除します。
    res を返します。
}

テストコード:

var name = "Li Hui", 年齢 = 25;
var obj = {
    名前:「周果」
    オブジェクト年齢: this.age,
    myFun: 関数 (fm, to) {
        console.log(`名前: ${this.name}、年齢: ${this.age}、送信元: ${fm}、送信先: ${to}`)
    }
};
var 人 = {
    名前:「弟」
    年齢: 12歳
};

Function.prototype.mycall = function (コンテキスト、...引数) {
    //関数かどうかを判断します。関数でない場合はエラーが報告されます if (typeof this !== "function") {
        新しいエラーをスローします("関数ではありません");
    }
    コンテキスト = コンテキスト || ウィンドウ;
    コンテキスト.fn = これ;
    const res = context.fn(...args);
    context.fn を削除します。
    res を返します。
}

obj.myFun.mycall(person, "Chengdu", "Renshou"); //名前: 弟、年齢: 12、出身: Chengdu、宛先: Renshou

2. 適用を実装する

Function.prototype.myApply = function (コンテキスト、...引数) {
    //関数かどうかを判断します。関数でない場合はエラーが報告されます if (typeof this !== "function") {
        新しいエラーをスローします("関数ではありません");
    }
    コンテキスト = コンテキスト || ウィンドウ;
    コンテキスト.fn = これ;
    引数 = 引数 && 引数[0] || [];
    const 結果 = context.fn(...args);
    context.fn を削除します。
    結果を返します。
}

テストコード:

obj.myFun.myApply(person, ["Chengdu", "Renshou"]); //名前: 弟、年齢: 12、出身: 成都、宛先: Renshou

3. バインドを実装する

bind() メソッドは主に関数をオブジェクトにバインドします。bind() は関数を作成し、関数本体の this オブジェクトの値は bind() に渡される最初のパラメータの値にバインドされます。

方法1: applyを使用する

Function.prototype.myBind = 関数 () {
    let self = this; // 元の関数を保存します let context = [].shift.call(arguments); // バインドする必要がある this コンテキストを保存します let args = [...arguments]; // 渡された残りのパラメーターを配列に変換します return function () { // 新しい関数を返します self.apply(context,[].concat.call(args,[...arguments]));
    }
}

ES6 ではそれが簡素化されます:

Function.prototype.myBind = function (コンテキスト、...args1) {
        return (...args2) => { //矢印関数を返します。これは、このメソッドを呼び出す関数オブジェクトにバインドされています。context = context || window;
            return this.apply(context, args1.concat(args2));//パラメータをマージする}
    }

方法2: callとapplyを使用しない

上記のコードを js の手書き適用コードと組み合わせます。

Function.prototype.myBind = function (コンテキスト、...args1) {
    return (...args2) => { //矢印関数を返します。これは、このメソッドを呼び出す関数オブジェクトにバインドされています。context = context || window;
        コンテキスト.fn = これ;
        定数args = args1.concat(args2);
        const res = context.fn(...args);
        context.fn を削除します。
        res を返します。
    }
}

テストコード:

obj.myFun.myBind(person, "Chengdu", "Renshou")(); //名前: 弟、年齢: 12、出身: Chengdu、宛先: Renshou

上記は、ネイティブ js が call、apply、bind を実装する方法の詳細です。call、apply、bind の js 実装の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JS を使用して、apply、call、bind メソッドを簡単に実装するためのサンプル コード
  • JavaScript における call、apply、bind の実装原則の詳細な説明
  • 50 行の JavaScript コードを使用して、呼び出し、適用、バインドのシンプルなバージョンを実装する方法
  • Javascript で call、bind、apply を実装するためのコードの詳細な説明

<<:  Windows で MySQL のルート パスワードをリセットする方法

>>:  Linux システムで tcpdump を使用してパケットをキャプチャする方法

推薦する

Docker Toolboxを完全にアンインストールする方法

Docker Toolbox は、Windows 10 Professional より前のバージョン...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...

Dockerfileを使用して独自のイメージを作成する方法

1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

nginx「504 ゲートウェイタイムアウト」エラーを解決する

ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...

Virtualbox で Ubuntu 16.04 の起動時に共有ディレクトリを自動的にマウントする最良の方法

仮想マシンを使用する人は通常、操作と使用を容易にするために仮想マシン用の共有ディレクトリを設定します...

jQuery でダイナミックなパーティクル効果を実現

この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...

JavaScript 組み込みの日付と時刻の書式設定のサンプル コード

1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

目次ネプローダーをインストールするプラグインのインポート始める配置折りたたみディスプレイノードをクリ...

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...

CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)

不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...