ネイティブ 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 を使用してパケットをキャプチャする方法

推薦する

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

MySQL 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

HTML ul および li タグを使用して画像を表示するサンプル コード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

SQL 文における複合主キーと結合主キーに関する予備的研究

1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...

ファイルのダウンロードを実現する javascript Blob オブジェクト

目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...

Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...

MacBook 向け Python 3.7 インストール チュートリアル

MacBookにpython3.7.0をインストールする詳細な手順は、参考までに記録されています。具...

MySQL 結合バッファの原理

目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...

Linux で大容量メモリ ページを持つ Oracle データベースを最適化する方法

序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

CentOS7 カーネル カーネル5.0 バージョンアップグレード

アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...