Explication détaillée des appels implicites en javascript

Cette fois, je vous apporte une explication détaillée des appels implicites en JavaScript. Quelles sont les précautions lors de l'utilisation de JavaScript Voici des cas pratiques, jetons un coup d'oeil.

Avant-propos

Je ne sais pas s'il est exact d'utiliser des appels implicites pour le décrire. Son comportement est toujours caché dans les coulisses, et il montre son visage de temps en temps. ne semble pas avoir beaucoup d'effet, mais il est toujours utile de le comprendre. Garanti d'être utile 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

DataConversion de type toSting 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. à titre de comparaison. Un exemple équivaut à 3 == '2' et 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 les méthodes Number et String. Number appellera d'abord valueOf, puis appellera toString. L'inverse est vrai dans la méthode String.

En plus des deux exemples ci-dessus, la conversion du type 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é. , tant que l'objet est un objet, il héritera de ces deux méthodes. Nous pouvons remplacer 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 avez bien lu. En plus d'une fonction, le deuxième paramètre de addEventListener peut également être un objet une fois l'événement déclenché, la méthode handleEvent de l'objet sera exécutée. exécuté, cela pointe vers eventObj Vous pouvez transmettre l'objet que vous voulez

Liaison de données sur l'objet eventObj

Objet JSON vers 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 une méthode toJSON, alors cette méthode L'objet exécuté sera converti en l'objet renvoyé après l'exécution de toJSON. Une chose à noter est que si le code suivant est

<.>

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

selon 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 deviner audacieusement et comparer l'objet renvoyé par toJSON. avec l'objet d'origine. S'ils sont égaux, utilisez directement l'objet d'origine

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

puis

de l'objet de promesse

Lorsque la méthode Promise.resolve passe. 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
  })

.

 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
   })

accesseur d'attribut d'objet get et set

Vous pouvez voir que quel que soit l'âge défini, mon âge est de 18 ans ou moins. Lors de l'accès à l'attribut, la fonction get set correspondante de l'attribut d'objet est en fait appelée. En plus de 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

Entrez maintenant la valeur value et obj. La valeur d'attribut de age et la valeur innerHTML de span sont toutes liées ensemble

 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 d'itérateur Symbol.iterator

Je crois que vous l'avez maîtrisé après avoir lu le Cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

 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
  }

Lecture recommandée :

JS Ajouter un élément à un nouveau nœud

4 façons de boucler la liste Dom de liste de nœuds avec JS

Comment obtenir l'effet de défilement intermittent du texte JS

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!