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プログラムの設計に役に立ちます.