jsのcallキーワードとapplyキーワードの機能を詳しく解説

JavaScript の呼び出しとキーワードの適用の役割

apply は 2 つのパラメータを受け入れます。最初のパラメータは関数本体内の this オブジェクトへのポインタを指定し、2 番目のパラメータは添字付きのコレクションです。

call は apply の糖衣構文です。パラメーターの数が固定されている場合は、セットに添え字を付けずに 2 番目のパラメーターを渡すことができます。

var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

apply と call で渡される最初のパラメータが null の場合、関数本体の this は window を指します。

apply と call で渡される最初のパラメータが null の場合、関数本体の this は window を指します。

callとapplyの使い方

1. thisのポインティングを変更する

var obj1 = {
 name = '刘备'
}
  
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
  
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

したがって、場合によっては、これが不可解に変更された場合、callまたはapplyを使用してthisのポインティングを修正することができます。

document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函数的方式调用，this指代window,相当于window.id 即 undefined
}

通常の関数として呼び出されるので、上記の例ではこれがウィンドウになっています。 call を使用して修正を行う方法を見てみましょう。

document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//强制函数内的this为外层的this，
}

2. 他のオブジェクトの関数を呼び出す

例 1:

var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
alert(result);//输出3

例 2: コンストラクターを借用して継承のような効果を実現する

var A = function(name)
{
 this.name = name;
};
var B = function(){
 A.apply(this,arguments)
}
B.prototype.getName = function(){
 return this.name;
}
var b = new B('刘备');
alert(b.getName());