Explication détaillée de l'appel en javascript

Cette fois, je vous apporte une explication détaillée de l'appel en javascript Quelles sont les précautions lors de l'utilisation de l'appel en javascript. jetez un oeil une fois.

Tout d'abord, vous devez d'abord comprendre que la fonction elle-même aura ses propres attributs, tels que :

longueur : le nombre de paramètres formels ;
name : Nom de la fonction ;
prototype : le prototype de la classe, les méthodes définies sur le prototype sont toutes des méthodes publiques de l'instance actuelle de cette classe
proto : traite la fonction comme un objet ordinaire, pointant vers le prototype de la classe Function
La fonction est la connaissance la plus complexe et la plus importante de tout le JavaScript. Pour une fonction, il y aura plusieurs rôles :

function Fn() {
    var num = 500;    this.x = 100;
}
Fn.prototype.getX = function () {
    console.log(this.x);
}
Fn.aaa = 1000;var f = new Fn;
f.num // undefinedf.aaa // undefined12345678910111213
var res = Fn(); // res是undefined Fn中的this是window

Rôle 1 : Fonction ordinaire. Fn, c'est lui-même une fonction ordinaire qui formera une portée privée une fois exécutée, puis effectuera l'affectation formelle des paramètres, la pré-analyse, l'exécution du code et la destruction de la mémoire une fois l'exécution terminée

Rôle 2 : Classe, qui a sa propre instance, f C'est une instance de Fn en tant que classe. Il existe également un attribut appelé prototype qui est son propre prototype. Ses instances peuvent pointer vers son propre prototype

Rôle trois : les objets ordinaires. , Fn et var obj = {} Obj in sont identiques, c'est un objet ordinaire (toutes les fonctions sont des instances de Function). En tant qu'objet, il peut avoir ses propres propriétés privées et Function.prototype peut également être trouvé. via le proto ;

ci-dessus pour les fonctions. Il y a trois rôles. La plupart des étudiants n'ont peut-être aucun doute sur le rôle un et le rôle deux, mais ils peuvent avoir un petit doute sur le rôle trois. Ensuite, faites un dessin pour comprendre :

Fonctionne comme des objets ordinaires .png

appel en profondeur

utilisation de base de l'appel

var ary = [12, 23, 34]; 
ary.slice();

Le processus d'exécution des deux lignes ci-dessus le code simple est : ary Cette instance passe par la chaîne de prototypes Le mécanisme de recherche trouve la méthode slice sur Array.prototype et exécute la méthode slice trouvée Lors de l'exécution de la méthode slice, le tableau ary est intercepté.

Remarque : il existe un processus de recherche sur le prototype avant l'exécution de la méthode slice (si elle n'est pas trouvée dans l'instance actuelle, elle sera recherchée selon la chaîne de prototypes).

Après avoir su qu'il y aura un processus de recherche pour appeler une méthode sur un objet, regardons :

var obj = {name:’iceman’}; 
function fn() { 
console.log(this); 
console.log(this.name); 
} 
fn(); // this –> window 
// obj.fn(); // Uncaught TypeError: obj.fn is not a function 
fn.call(obj);

Le rôle de la méthode d'appel : cherchons d'abord la méthode d'appel, et enfin dans la fonction via la chaîne de prototypes, recherchez la méthode d'appel dans le prototype, puis exécutez la méthode d'appel, remplacez-la dans la méthode fn par la première valeur du paramètre obj, et enfin exécutez la fonction fn.

2.2.Principe de la méthode d'appel

Simulez la méthode d'appel intégrée dans Function, écrivez une méthode myCall et explorez le principe d'exécution de la méthode d'appel

function sum(){
    console.log(this);
}function fn(){
    console.log(this);
}var obj = {name:'iceman'};Function.prototype.myCall = function (context) {
    // myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名
    // 1、让fn中的this关键字变为context的值->obj
    // 让this这个函数中的"this关键字"变为context
    // eval(this.toString().replace("this","obj"));
    // 2、让fn方法在执行
    // this();};1234567891011121314151617

fn. myCall(obj); // L'original this dans la méthode myCall est fn

sum.myCall(obj); // L'original this dans la méthode myCall est sum
When fn.myCall(obj); ); cette ligne de code est exécutée Lorsque, selon les règles de recherche pour cela, il y a "." devant la méthode myCall, alors ceci dans myCall est fn. Pour exécuter la méthode myCall, dans la première étape, this dans le corps de la méthode sera remplacé par l'objet entrant, et l'original this sera exécuté Remarque : l'original this est exécuté (je l'ai compris depuis longtemps quand j'étais. apprendre cela). Dans cet article Dans cet exemple, fn est exécuté.

Êtes-vous un peu confus après avoir lu le paragraphe ci-dessus ? Haha, c'est bon Regardons l'exemple suivant pour comprendre.

Exemple classique de méthode d'appel

function fn1() {
    console.log(1);
}function fn2() {
    console.log(2);
}123456

Sortie 1

fn1.call(fn2); // 1

Tout d'abord, fn1 trouve la méthode d'appel sur Function.prototype via le mécanisme de recherche de chaîne de prototypes et laisse la méthode d'appel Exécution, à ce moment-là, dans la méthode d'appel, c'est le fn1 à utiliser. Lors de l'exécution du code de la méthode d'appel, laissez d'abord "ce mot-clé" dans fn1 se transformer en fn2, puis laissez la méthode fn1 s'exécuter.

Remarque : lors de l'exécution de la méthode d'appel, ceci dans fn1 deviendra effectivement fn2, mais la sortie du contenu dans le corps de la méthode de fn1 n'implique aucun contenu lié à cela, donc toujours la sortie 1.

Sortie 2

fn1.call.call(fn2); // 2

Tout d'abord, fn1 trouve la méthode d'appel sur Function.prototype via la chaîne de prototypes, puis laisse la méthode d'appel trouver l'appel sur le prototype de fonction via le prototype. (Parce que la valeur de call elle-même est également une fonction, Function.prototype peut également être utilisée.) Lorsque l'appel est trouvé pour la deuxième fois, laissez la méthode être exécutée. Ceci dans la méthode est fn1.call. Tout d'abord, laissez ceci. dans cette méthode, devenez fn2, puis laissez fn1.call s'exécuter.

Cet exemple est un peu alambiqué, mais comprenons-le étape par étape. Au tout début, le this dans le dernier appel de la ligne de code fn1.call.call(fn2) est fn1.call D'après la compréhension précédente, on peut savoir que le principe de fn1.call est en gros :

Écrivez le code ci-dessus sous une autre forme :

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};1234567

On sait que les deux formes d'écriture ont le même effet. Ensuite, vous pouvez écrire fn1.call.call(fn2) comme test1.call(fn2) à ce moment-là, et ceci dans l'appel est test1 :

Function.prototype.call = test1;function test1 (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};12345678

Remarque : ceci dans l'appel à ce moment est test1.

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是test1};1234567

Remplacez ensuite ceci dans call par fn2, alors la méthode test1 devient :

Function.prototype.call = function (context) {
    // 省略其他代码
    fn2(); 
};12345

所以最后是fn2执行，所以最后输出2。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

spring boot的定时任务应该如何使用

javaScript使用call和apply

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!