Compréhension approfondie de la différence entre les méthodes apply() et call() dans les compétences javascript_javascript

Si vous n'avez jamais été exposé à des langages dynamiques, cela vous semblera magique et étrange de comprendre JavaScript avec la façon de penser des langages compilés, car des choses qui sont consciemment impossibles se produisent souvent, et semblent même déraisonnables si vous apprenez quand. Si vous rencontrez ce sentiment dans le processus de JavaScript, un langage libre et en constante évolution, alors à partir de maintenant, déposez vos "préjugés", car c'est définitivement un nouveau continent pour vous, laissez JavaScript se fondre lentement dans le passé. une conscience de programmation solidifiée et injecter une nouvelle vitalité !

D'accord, revenons au sujet. Tout d'abord, comprenons la fonctionnalité de changement dynamique de contexte d'exécution de JavaScrtipt. Cette fonctionnalité se reflète principalement dans l'utilisation des méthodes d'application et d'appel.

La différence entre postuler et appeler n'est qu'une phrase,

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

call et apply sont deux méthodes de Function.prototype, qui sont implémentées en interne par le moteur JavaScript. Parce qu'elles appartiennent à Function.prototype, chaque instance d'objet Function, c'est-à-dire que chaque méthode a des attributs d'appel et d'application, car ce sont des attributs de Function.prototype. méthode , alors leur utilisation est bien sûr ciblée sur les méthodes. Ces deux méthodes sont faciles à confondre, car elles ont la même fonction, mais elles sont utilisées de différentes manières

Mêmes points : Les deux méthodes ont exactement le même effet

Différence : Les paramètres passés par la méthode sont différents

Alors quelle est la fonction de la méthode et quels sont les paramètres passés par la méthode ?

Analysons ce qui précède foo.call(this, arg1, arg2, arg3).

foo est une méthode, c'est l'objet contextuel lorsque la méthode est exécutée, arg1, arg2, arg3 sont les paramètres passés à la méthode foo Les objets dits contextuels lorsque la méthode est exécutée ici, si vous avez les bases de la programmation orientée objet, c'est très facile à comprendre, c'est ça.

En JavaScript, le code a toujours un objet contextuel, et le code traite cet objet. L'objet contextuel est représenté par la variable this, et cette variable pointe toujours vers l'objet où se trouve le code actuel.

Afin de mieux comprendre de quoi il s’agit, donnons un exemple.

/创建一个A类
function A(){
//类实例化时将运行以下代码
//此时的执行上下文对象就是this,就是当前实例对象
this.message = “message of a”;
this.getMessage = function(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>return this.message;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个A类实例对象
var a = new A();
//调用类实例getMessage方法获得message值
alert(a.getMessage());
//创建一个B类
function B(){
this.message = ”message of b”;
this.setMessage = function(msg){
<SPAN style="WHITE-SPACE: pre">	</SPAN>this.message = msg;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个B类实例对象
var a = new B();

On peut voir que les classes A et B ont toutes deux un attribut de message (un membre en termes orientés objet) A a une méthode getMessage pour obtenir le message, et B a une méthode setMessage pour définir le pouvoir. d'appel est indiqué ci-dessous.

//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call(a, “a的消息”);
//下面将显示”a的消息”
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!

C'est la puissance de l'appel JavaScript du langage dynamique !

C'est simplement "fait à partir de rien". La méthode de l'objet peut être assignée arbitrairement, mais l'objet lui-même n'a jamais eu une telle méthode. Notez qu'il s'agit d'une affectation en termes simples, la méthode est prêtée à un autre. objet pour terminer la tâche. En principe, l'objet de contexte change lorsque la méthode est exécutée.

Donc b.setMessage.call(a, "a's message"); équivaut à utiliser a comme objet de contexte d'exécution pour appeler la méthode setMessage de l'objet b, et ce processus n'a rien à voir avec b, et le l'effet est équivalent à a.setMessage("le message de a");

Parce que postuler et appeler ont le même effet, on peut le dire

La fonction de call and apply est d'emprunter les méthodes d'appel d'autres personnes, tout comme appeler la vôtre.

D'accord, après avoir compris les similitudes entre call et apply - après leurs fonctions, examinons leurs différences. Après avoir lu les exemples ci-dessus, je pense que vous le savez probablement.

De b.setMessage.call(a, "a's message") est équivalent à a.setMessage("a's message"), on peut voir que "a's message" est passé en paramètre dans l'appel,

Alors, comment cela s'exprime-t-il dans apply ? Ce n'est pas clair à expliquer directement. Apply doit être combiné avec le scénario d'application pour que ce soit clair en un coup d'œil :

function print(a, b, c, d){
alert(a + b + c + d);
}
function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
print.call(this, a, b, c, d);
//用apply方式借用print, 参数作为一个数组传递,
//这里直接用JavaScript方法内本身有的arguments数组
print.apply(this, arguments);
//或者封装成数组
print.apply(this, [a, b, c, d]);
}
//下面将显示”背光脚本”
example(”背” , “光” , “脚”, “本”);

Dans ce scénario, dans l'exemple de méthode, a, b, c, d sont utilisés comme paramètres passés par la méthode. Les méthodes utilisent respectivement apply et call pour emprunter la méthode print à appeler,

La dernière phrase est parce que la méthode exemple est appelée directement, donc l'objet contextuel dans cette méthode est l'objet fenêtre.

Ainsi, à l'exception du premier paramètre des méthodes call et apply, qui est l'objet de contexte lors de l'exécution, les autres paramètres de la méthode call seront transmis à la méthode empruntée en tant que paramètres à leur tour, alors que apply n'a que deux paramètres , le deuxième paramètre Passé sous forme de tableau On peut donc dire que

La différence entre les méthodes call et apply est qu'à partir du deuxième paramètre, les paramètres de la méthode call seront transmis à la méthode empruntée en tant que paramètres, tandis que apply place directement ces paramètres dans un tableau puis les transmet, et enfin le liste des paramètres de la méthode empruntée C'est pareil.

Scénarios d'application :

Lorsque les paramètres sont clairs, vous pouvez utiliser call. Lorsque les paramètres ne sont pas clairs, vous pouvez utiliser apply pour combiner les arguments

//例
print.call(window, “背” , “光” , “脚”, “本”);
//foo参数可能为多个
function foo(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>print.apply(window, arguments);
}

L'article ci-dessus fournit une compréhension approfondie de la différence entre les méthodes apply() et call() en JavaScript. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère. vous prendrez en charge Script Home.