Javascript_javascript スキルで適用、呼び出し、バインドの使用状況ツアー モードをオンにします。

この記事を通じて、apply、call、bind についての理解を明確に深め、記憶を深めるためにそれらの素晴らしい使い方をいくつか挙げることができれば幸いです。

お申し込み、電話

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 メソッドを使用できます。

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

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

申請と呼び出しの違い

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

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

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

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

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

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

不明な場合は、apply を使用して、パラメーターを配列にプッシュして渡します。パラメーターの数が不明な場合は、関数内で引数の配列を介してすべてのパラメーターを調べることができます。

記憶を強化し深めるために、一般的な使用法をいくつか示します:

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 には max メソッドがあるため、call または apply でそのメソッドを使用できます。

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

functionisArray(obj){ 
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}

4. クラス (疑似) 配列は配列メソッド

を使用します

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

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

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

apply と call の使用法を深く理解している

以下は応募と電話についてより深く理解するための【面接の質問を拝借】です。

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

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

上記のメソッドは最も基本的なニーズを解決できますが、渡されるパラメータの数が不確実な場合、上記のメソッドは無効です。このとき、渡されるパラメータの数に注意してください。ここでは不確実なので、メソッドは次のとおりです:

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

次の要件は、次のような「(app)」プレフィックスを各ログ メッセージに追加することです。

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

この時点で、これをよりエレガントに行うにはどうすればよいでしょうか?このように:

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

バインド

適用と呼び出しについて話した後、バインドについて話しましょう。 bind() メソッドは apply および call に非常に似ており、関数本体内の this のポインタを変更することもできます。

MDN の説明は次のとおりです。bind() メソッドは、バインディング関数と呼ばれる新しい関数を作成します。このバインディング関数が呼び出されるとき、バインディング関数は、bind() メソッドに渡されたときに最初に渡された値に基づきます。パラメータはこれで、bind() メソッドに渡される 2 番目以降のパラメータと、実行時にバインドされた関数自体のパラメータが、元の関数を呼び出すための元の関数のパラメータとして使用されます。

一般的なシングルトン モードでは、通常、コンテキストを変更した後も引き続き参照できるように、_this、that、self などを使用してこれを保存する方法を見てみましょう。 このように:

var foo = {
  bar : 1,
  eventBind: function(){
    var _this = this;
    $('.someClass').on('click',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(){
    $('.someClass').on('click',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 则是立即调用 。

好了，本文关于开启Javascript中apply、call、bind的用法之旅模式的相关教程，到此给大家介绍完了，希望大家喜欢。