JSでの関数のapplyとcallの詳細説明

apply と call の違い

ECMAScript 仕様では、すべての関数に対して call メソッドと apply メソッドが定義されており、それらは広く使用されており、それらの機能はパラメーターを渡す形式が異なるだけです。

apply( )

apply メソッドは 2 つのパラメーターを渡します。1 つは関数コンテキストとしてのオブジェクトで、もう 1 つは関数パラメーターで構成される配列です。

var obj = {
    name : 'linxin'}function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);}func.apply(obj, ['A', 'B']);    // A linxin B

obj が関数コンテキストとして使用されるオブジェクトであり、関数 func 内の this がオブジェクト obj を指していることがわかります。パラメータ A と B は、それぞれ func パラメータのリスト要素に対応して、配列に配置され、func 関数に渡されます。

call( )

call メソッドの最初のパラメータも関数コンテキストのオブジェクトですが、後で渡されるのは単一の配列ではなくパラメータ リストです。

var obj = {
    name: 'linxin'}function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);}func.call(obj, 'C', 'D');       // C linxin D

apply を比較すると、C と D が配列に配置されるのではなく、個別のパラメーターとして func 関数に渡されることがわかります。

実際、いつどの方法を使用するかを心配する必要はありません。パラメータがすでに配列に存在する場合は、当然 apply を使用します。パラメータが分散していて相互に相関がない場合は、call を使用します。

applyとcallの使い方

1.これを

var obj = {
    name: 'linxin'}function func() {
    console.log(this.name);}func.call(obj);       // linxin

を指すように変更します。これで、関数コンテキストとしてObjが渡されるので、callメソッドの最初のパラメータがオブジェクトであることがわかります。 time、関数内の this は obj オブジェクトを指します。ここでの func 関数は実際には

function func() {
    console.log(obj.name);}

2 と同等です。 他のオブジェクトからメソッドを借用する

まず例を見てください

var Person1  = function () {
    this.name = 'linxin';}var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);}var person = new Person2();person.getname();       // linxin

上記から、person2 によってインスタンス化されたオブジェクト person が getname メソッドを通じて person1 の名前を取得していることがわかります。 。 PERSON2 では、PERSON1.call(this) の機能は this オブジェクトの代わりに PERSON1 オブジェクトを使用することであるため、PERSON2 は PERSON1 のすべてのプロパティとメソッドを持ち、これは PERSON2 が PERSON1 のプロパティとメソッドを継承するのと同等です。

3. 関数の呼び出し

apply メソッドと call メソッドは関数をすぐに実行するため、関数の呼び出しにも使用できます。

function func() {
    console.log('linxin');}func.call();            // linxin

callとbindの違い

EcmaScript5ではbindというメソッドが拡張されており、以前のバージョンのIEとは互換性がありません。これは call と非常に似ており、最初のパラメーターは関数コンテキストとしてのオブジェクトを受け取り、パラメーターの 2 番目の部分は複数のパラメーターを受け取ることができます。
両者の違いは以下の2点です。

1.bind は関数を返します

var obj = {
    name: 'linxin'}function func() {
    console.log(this.name);}var func1 = func.bind(obj);func1();                        // linxin

bind メソッドはすぐには実行されませんが、コンテキストを変更する関数を返します。ただし、元の関数 func の this は変更されておらず、依然としてグローバル オブジェクト ウィンドウを指しています。

2.parameters

function func(a, b, c) {
    console.log(a, b, c);}var func1 = func.bind(null,'linxin');func('A', 'B', 'C');            // A B Cfunc1('A', 'B', 'C');           // linxin A Bfunc1('B', 'C');                // linxin B Cfunc.call(null, 'linxin');      // linxin undefined undefined

callの使用では、2番目以降のパラメータをfuncメソッドの実パラメータとして渡しますが、func1メソッドの実パラメータはバインド内のパラメータに基づいて配置されます。

在低版本浏览器没有 bind 方法，我们也可以自己实现一个。

if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函数
            context = [].shift.call(arguments), // 保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
        return function () {                    // 返回一个新函数
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }}

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