Comment utiliser les appels implicites en javascript ?

Cet article vous donne une introduction détaillée aux points de connaissances liés aux appels implicites en JavaScript. Ceux qui sont intéressés peuvent apprendre ensemble.

Avant-propos

Je ne sais pas s'il est exact de le décrire comme un appel implicite. Son comportement est toujours caché dans les coulisses, et il montre son visage de temps en temps. Cela ne semble pas avoir beaucoup d'effet, mais il est toujours utile de le comprendre. Garanti d'être d'une grande utilité sous votre utilisation.

L'appel dit implicite consiste simplement à appeler automatiquement certaines méthodes, et ces méthodes peuvent être modifiées en externe comme des hooks, modifiant ainsi le comportement établi.
Ci-dessous, je vais énumérer quelques appels implicites que j'ai vus récemment. Les exemples sont justes. Bienvenue pour ajouter

conversion de type de données vers Sting et valueOf

var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return 3
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' false
  console.log(String(obj));//依次输出 'toString' '2'

.

var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return {} //修改为对象
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' 'toString' true
  console.log(Number(obj));//依次输出 'valueOf' 'toString' 2

Dans le fonctionnement de l'opérateur d'égalité, l'objet appellera d'abord valueOf. Si la valeur renvoyée est un objet, il appellera toSting, sauf null, puis utilisera la valeur renvoyée pour comparaison. équivalent à 3 == '2' renvoie false. Le deuxième exemple renvoie un objet car valueOf est exécuté, puis toString est exécuté Enfin, il équivaut à '2' == '2' et renvoie true dans Number et. Méthodes String, Number appellera d'abord valueOf Après avoir appelé toString, l'inverse est vrai dans la méthode String.

En plus des deux exemples ci-dessus, la conversion de types de données existe également dans diverses autres opérations, telles que les opérations numériques. Lorsque des types référence sont impliqués, la méthode valueOf ou toString sera appelée, et tant qu'elle l'est. un objet, il sera hérité. Nous pouvons re-redéfinir ces deux méthodes pour affecter le comportement de la conversion du type de données

handleEvent dans l'événement DOM2

var eventObj = {
   a: 1,
   handleEvent: function (e) {
    console.log(this, e);//返回 eventObj 和 事件对象
    alert(this.a)
   }
  }
  document.addEventListener('click', eventObj)

Vous. Je ne l'ai pas vu Faux, le deuxième paramètre de addEventListener peut être un objet en plus d'une fonction. Une fois l'événement déclenché, la méthode handleEvent de l'objet sera exécutée. Lorsque la méthode est exécutée, cela pointe vers eventObj You. peut lier les données que vous souhaitez transmettre à l'objet eventObj

Objet JSON àJSON

var Obj = {
   a: 10,
   toJSON: function () {
    return {
     a: 1,
     b: function () {
     },
     c: NaN,
     d: -Infinity,
     e: Infinity,
     f: /\d/,
     g: new Error(),
     h: new Date(),
     i: undefined,
     
    }
   }
  }
  console.log(JSON.stringify(Obj));
  //{"a":1,"c":null,"d":null,"e":null,"f":{},"g":{},"h":"2018-02-09T19:29:13.828Z"}

Si l'objet transmis par la méthode stringify de JSON a un toJSON, alors l'objet exécuté par cette méthode sera converti en objet renvoyé après l'exécution de toJSON, une chose à noter est que si le code suivant

var Obj1 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj1);//true
    return this
   }
  }
  console.log(JSON.stringify(Obj1));//{"a":10}

 var Obj2 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj2);//true
    return {
     a: this
    }
   }
  }
  console.log(JSON.stringify(Obj2));//报错 Maximum call stack size exceeded

est signalé selon la méthode. Dans la déclaration ci-dessus, il est évident que l'erreur est celle à laquelle nous nous attendions, mais lorsque vous la renvoyez directement, aucune erreur n'est signalée, vous pourriez aussi bien faire une supposition audacieuse. En interne, l'objet renvoyé par toJSON est comparé à l'objet d'origine If. ils sont égaux, le then

de l'objet d'origine est utilisé directement comme promesse. Lorsque la méthode de résolution passe dans l'objet, s'il existe une méthode then, la méthode then sera exécutée. immédiatement, ce qui équivaut à mettre la méthode dans une nouvelle Promise. En plus de Promise.resolve ayant ce comportement, Promise.all a également ce comportement

var obj = {
   then: function (resolve, reject) {
    setTimeout(function () {
     resolve(1000);
    }, 1000)
   }
  }
  Promise.resolve(obj).then(function (data) {
   console.log(data);// 延迟1秒左右输出 1000
  })

L'accesseur d'attribut d'objet get et set<. 🎜>

 var timePromise = function (time) {
    return new Promise(function (resolve) {
     setTimeout(function () {
      resolve(time);
     }, time)
    })
   }
   var timePromise1 = timePromise(1000);
   var timePromise2 = timePromise(2000);
   var timePromise3 = timePromise(3000);
   Array.prototype.then = function (resolve) {
     setTimeout(function () {
      resolve(4000);
     }, 4000)
    }
   Promise.all([timePromise1, timePromise2, timePromise3]).then(function (time) {
    console.log(time);// 等待4秒左右输出 4000
   })

Vous pouvez voir que quel que soit l'âge défini, mon âge est de 18 ans ou moins lors de l'accès aux attributs. Lors de l'appel réel de la fonction get set correspondant à l'attribut de l'objet, en plus. à la méthode d'écriture ci-dessus, il existe également la méthode d'écriture suivante

var obj = {
    _age: 100,
    get age() {
     return this._age < 18 ? this._age : 18;
    },
    set age(value) {
     this._age = value;
     console.log(`年龄设置为${value}岁`);
    }
   }
   obj.age = 1000; //年龄设置为1000岁
   obj.age = 200; //年龄设置为200岁
   console.log(obj.age);// 18
   obj.age = 2; ////年龄设置为2岁
   console.log(obj.age); // 2

Maintenant, la valeur de l'entrée et la valeur de l'attribut de obj.age et la valeur innerHTML de span sont liées à Together

 var input = document.createElement('input');
  var span = document.createElement('span');
  document.body.appendChild(input);
  document.body.appendChild(span);
  var obj = {
   _age:''
  }
  var obj = Object.defineProperty(obj, 'age', {
   get: function () {
    return this._age;
   },
   set: function (value) {
    this._age = value;
    input.value = value;
    span.innerHTML = value;
   }
  });
  input.onkeyup = function (e) {
   if (e.keyCode === 37 || e.keyCode === 39) {
    return;
   }
   obj.age = this.value
  }

Interface itérateur Symbol.iterator

Vous pouvez voir que chaque fois que l'opérateur spread est appelé, ou que la boucle for...of est utilisée pour parcourir l'objet, il sera être appelé L'interface traverseur des objets, tels que Array, String, Map, Set, TypedArray et certains objets de type tableau tels que arguments et NodeList ont nativement une interface traverseur, mais les objets ordinaires ne déploient pas cette interface si vous voulez l'objet. pour pouvoir utiliser l'opérateur spread Ou la boucle for...of peut ajouter cette méthode à l'objet, ou vous pouvez réécrire la méthode sur l'objet d'origine avec l'interface, modifiant ainsi son comportement

Ce qui précède c'est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à l'avenir. Tout le monde est utile.

 var arr = [ 1, 2 , 3];
  arr[Symbol.iterator] = function () {
   const self = this;
   let index = 0;
   return {
    next () {
     if(index < self.length) {
      return {
       value: self[index] ** self[index++],
       done: false
      }
     } else {
      return {
       value: undefined,
       done: true
      }
     }
    }
   }
  }
  console.log([...arr, 4]);//返回 [1, 4, 27, 4]
  for(let value of arr) {
   console.log(value); //依次返回 1 4 27
  }

Articles associés :

Quelles sont les vulnérabilités de sécurité liées à l'utilisation de l'attaque temporelle dans les applications de nœuds ?

Implémentation d'un sens unique dans vue Objet de livraison de composants Reliure, comment faire ?

Comment utiliser TypeScript dans les composants Vue (tutoriel détaillé)

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!