JavaScript関数apply()とcall()用法と異同分析

本論文の実例は、JavaScript関数apply（）とcall（）の用法と異同を分析している。皆さんに参考にしてあげます。具体的には以下の通りです。
JavaScriptの関数は対象ですので、属性と方法があります。各関数には2つの属性が含まれています。lengthとprototypeは、各関数には2つの非継承的な方法が含まれています。apply()とcall()。
まず、フロントエンドの面接でよく聞くapply()とcall()の違いを紹介します。
この2つの方法の役割は、関数呼び出し時に関数の実行文脈、すなわち関数内のthisを変更することであり、apply()方法は2つのパラメータを受信し、1つは機能の作用領域であり、もう1つはargmentsオブジェクトであってもよく、パラメータ配列であってもよい。call()方法はapply()方法と同じ役割を果たしています。その違いは、受信パラメータの方式が違っているだけで、最初のパラメータは不変で、変化は残りのパラメータが直接関数に伝達されます。つまり、関数に伝達されるパラメータは一つ一つ列挙しなければなりません。
JavaScriptのパラメータは内部では1つの配列で表しています。この意味では、applyはcallの使用率より高いです。具体的にどれぐらいのパラメータが関数に入ってくるかは気にしなくてもいいです。関数がいくつかのパラメータを受信していることを明確に知っていて、かつ、形参加の対応関係を一目で表したいなら、コールを使うことができます。
callまたはapplyを使用すると、最初のパラメータがnullであれば、関数内のthisはデフォルトの宿主オブジェクトを指します。ブラウザではwindowですが、厳密なモードでは関数内のthisはまだnullです。場合によっては、callまたはapplyを使用する目的は、this指向を指定することではなく、他のオブジェクトを借りる方法などの別の用途がある場合、nullに入って、ある特定のオブジェクトの代わりに、Math.max.apply(null, [1,5,2,4,3]]);次の例を挙げます。

function sum(num1, num2) {
  return num1 + num2;
}
function applyFunc1(num1, num2) {
  return sum.apply(this, arguments);
}
function applyFunc2(num1, num2) {
  return sum.apply(this, [num1, num2]);
}
function callFunc(num1, num2) {
  return sum.call(this, num1, num2);
}
alert(applyFunc1(10, 20));//  ：30
alert(applyFunc2(10, 20));//  ：30
alert(callFunc(10, 20));//  ：30

JSの関数はオブジェクトで、関数名はFunctionオブジェクトへの参照です。

function add(a,b) {
  alert(a+b);
}
function sub(a,b) {
  alert(a-b);
}
add.call(sub,3,1); //  ：30

apply()とcall()の役割が伝達パラメータにあると思うなら、それは間違いです。本当に強いところは関数を拡張して実行することができる作用領域にあります。
callとappyの用途：
（1）thisの向きを変える。
callとappyの最も一般的な用途は関数内部のthis指向を変えることです。上記の例に示すように。
（2）他のオブジェクトを借りる方法。
1）借用法の第一のシーンは他のオブジェクトの構造関数を借用することである。

var Student = function(name) {
  this.name = name;
};
var Teacher = function(name) {
  Student.apply(this,arguments);
};
Teacher.prototype.getName = function() {
  return this.name;
};
var teacher = new Teacher("Alice");
console.log(teacher.getName()); //   ：Alice

2）借用方法の第二のシーンは他のオブジェクトを借りる方法である。showColor.call(obj)を実行すると、関数の実行環境がオブジェクトに入ります。

window.color = "white";
var obj = {color: "black"};
function showColor() {
  alert(this.color);
}
showColor();//  ："white"
showColor.call(this);//  ："white"
showColor.call(window);//  ："white"
showColor.call(obj);//  ："black"

showColor()の関数をオブジェクトobjに置く必要はなく、また、Objによって呼び出します。

window.color = "white";
var obj = {color : "black"};
function showColor() {
  alert(this.color);
}
showColor();//  ："white"
obj.showColor = showColor;
obj.showColor();//  ："black"

もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScript常用関数技術のまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。