Javascriptでのapply、call、bindの使い方をわかりやすく説明します。-jsチュートリアル-php.cn

オンラインには多くの記事がありますが、そのほとんどがコピーアンドペーストであり、理解するのが難しいです。この記事を通じて、apply、call、bind についての理解を明確にし、それらの素晴らしい使い方をいくつか挙げることができれば幸いです。記憶を深めるために。

Javascriptでのapply、call、bindの使い方をわかりやすく説明します。

apply、call

JavaScriptではcallとapplyはどちらも関数実行時のコンテキストを変更するために存在します、つまり関数本体内のthisのポインタを変更することになります。

JavaScriptの大きな特徴は、関数に「定義時コンテキスト」と「実行時コンテキスト」という概念があり、「コンテキストを変更できる」ことです。

栗から始めましょう:

function fruits() {}
  
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
  
var apple = new fruits;
apple.say();    //My color is red

ログイン後にコピー

しかし、オブジェクト Banana= {color : " yellow"} があり、それに対する Say メソッドを再定義したくない場合は、呼び出しを通じて Apple の Say メソッドを使用できます。または apply:

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

ログイン後にコピー

したがって、オブジェクトが特定のメソッドを持たない場合 (この栗のバナナにはsay メソッドがありません)、他のオブジェクトにはある場合 (リンゴの場合)、call と apply はこれを動的に変更するように見えることがわかります。この栗にはsayメソッドがあります)、callまたはapplyメソッドを使用して他のオブジェクトを操作できます。

applyとcallの違い

applyとcallは関数は全く同じですが、パラメータの受け取り方が異なります。たとえば、次のように定義された関数があります:

var func = function(arg1, arg2) {
     
};

ログイン後にコピー

は次のように呼び出すことができます:

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

ログイン後にコピー

これは指定したいコンテキストであり、任意の JavaScript オブジェクト (JavaScript 内のすべてのものはオブジェクトです) にすることができます。パラメータは順番に渡され、apply はパラメータを配列に入れます。

JavaScriptでは関数のパラメータの数が固定されていないため、条件が当てはまる場合はパラメータの数が明確にわかっているときにcallを使用してください。

よくわからないときはapplyを使って配列にパラメータをpushして渡します。パラメーターの数が不明な場合は、関数内で引数の配列を介してすべてのパラメーターを調べることができます。

記憶を統合し深めるために、一般的な使い方をいくつか挙げておきます:

1. 配列の間に

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

ログイン後にコピー

を追加する2. 配列内の最大値と最小値を取得する

var  numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

ログイン後にコピー

number自体は持っていませんmax メソッドですが、Math はそのメソッドを call または apply で使用できます。

3. 配列であるかどうかを確認する（toString()メソッドがオーバーライドされていない場合）

functionisArray(obj){
    returnObject.prototype.toString.call(obj) === &#39;[object Array]&#39; ;
}

ログイン後にコピー

4. クラス（擬似）配列は配列メソッドを使用する

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

ログイン後にコピー

擬似というメソッドがあるJavascript オブジェクト構造の配列。さらに特別なのは、引数オブジェクトと、getElementsByTagName、document.childNodes などの呼び出しです。それらが返す NodeList オブジェクトは疑似配列です。 Array配下のpush、pop等のメソッドは適用できません。

しかし、Array.prototype.slice.call を使って length プロパティを持つ実際の配列オブジェクトに変換することで、domNodes が Array の下にあるすべてのメソッドを適用できるようになります。

applyとcallの使い方を深く理解する

applyとcallをより深く理解するために、インタビューの質問を借りてみましょう。

console.log メソッドをプロキシできるように log メソッドを定義します。一般的な解決策は次のとおりです:

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

ログイン後にコピー

上記の方法で最も基本的なニーズを解決できますが、渡されるパラメーターの数が不確かな場合は、上記の方法を使用します。現時点では、このメソッドは無効になります。apply または call の使用を検討できます。渡されるパラメーターの数は不定であるため、apply を使用するのが最適です。

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

ログイン後にコピー

次の要件。

log("hello world");    //(app)hello world

ログイン後にコピー

のように、各ログメッセージに「(app)」プレフィックスを追加することです。これをよりエレガントに行うには、この時点で、引数パラメータを疑似配列とみなして変換する必要があります。 Array.prototype.slice.call Array を介して標準に変換し、次のように配列メソッド unshift を使用します。

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift(&#39;(app)&#39;);
  
  console.log.apply(console, args);
};

ログイン後にコピー

bind

　　说完了 apply 和 call ，再来说说bind。bind() 方法与 apply 和 call 很相似，也是可以改变函数体内 this 的指向。

　　MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

　　直接来看看具体如何使用，在常见的单体模式中，通常我们会使用 _this , that , self 等保存 this ，这样我们可以在改变了上下文之后继续引用到它。像这样：

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $(&#39;.someClass&#39;).on(&#39;click&#39;,function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

ログイン後にコピー

由于 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题：

var foo = {
    bar : 1,
    eventBind: function(){
        $(&#39;.someClass&#39;).on(&#39;click&#39;,function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

ログイン後にコピー

在上述代码里，bind() 创建了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。再来一个简单的栗子：

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3

ログイン後にコピー

这里我们创建了一个新的函数 func，当使用 bind() 创建一个绑定函数之后，它被执行的时候，它的 this 会被设置成 foo ，而不是像我们调用 bar() 时的全局作用域。

有个有趣的问题，如果连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
  
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

ログイン後にコピー

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

apply、call、bind比较

　　那么 apply、call、bind 三者相比较，之间又有什么异同呢？何时使用 apply、call，何时使用 bind 呢。简单的一个栗子：

var obj = {
    x: 81,
};
  
var foo = {
    getX: function() {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

ログイン後にコピー

三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。

　也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

　再总结一下：

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；

apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后续参数传参；

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。