Wie verwende ich implizite Aufrufe in Javascript?

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Wissenspunkte im Zusammenhang mit impliziten Aufrufen in JavaScript. Wer daran interessiert ist, kann gemeinsam lernen.

Vorwort

Ich weiß nicht, ob es richtig ist, implizite Aufrufe zu verwenden, um es zu beschreiben. Sein Verhalten ist immer hinter den Kulissen verborgen und es zeigt von Zeit zu Zeit sein Gesicht Scheint keine große Wirkung zu haben, aber es ist dennoch nützlich, es zu verstehen. Es ist garantiert von großem Nutzen für Sie.

Der sogenannte implizite Aufruf besteht einfach darin, einige Methoden automatisch aufzurufen. Diese Methoden können extern wie Hooks geändert werden, wodurch das etablierte Verhalten geändert wird.
Im Folgenden werde ich einige implizite Aufrufe auflisten, die ich kürzlich gesehen habe. Willkommen zum Hinzufügen von

Datentypkonvertierung in Sting und 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'

rree

Bei der Operation des Gleichheitsoperators ruft das Objekt zuerst valueOf auf, außer null, und verwendet dann den zurückgegebenen Wert zum Vergleich „2“ gibt „false“ aus. Das zweite Beispiel gibt ein Objekt zurück, da „valueOf“ ausgeführt wird. Schließlich entspricht es „2“ == „2“ und gibt „true“ aus Rufen Sie zuerst valueOf und dann toString String auf. Die Methode ist das Gegenteil.

Zusätzlich zu den beiden oben genannten Beispielen gibt es die Datentypkonvertierung auch in verschiedenen anderen Operationen, z. B. bei numerischen Operationen. Wenn Referenztypen beteiligt sind, wird die Methode valueOf oder toString aufgerufen, sofern dies der Fall ist Ein Objekt wird vererbt. Wir können diese beiden Methoden erneut überschreiben, um das Verhalten der Datentypkonvertierung

handleEvent im DOM2-Ereignis

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

Sie haben das gelesen Richtig, der zweite Parameter von addEventListener kann zusätzlich zu einer Funktion ein Objekt sein. Nach dem Auslösen des Ereignisses wird die Methode handleEvent ausgeführt, die auf eventObj verweist an das eventObj-Objekt übergeben möchten

JSON-Objekt toJSON

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

Wenn das von der Stringify-Methode von JSON übergebene Objekt eine toJSON-Methode hat, wird das Objekt ausgeführt Diese Methode wird in das Objekt umgewandelt, das nach der Ausführung von toJSON zurückgegeben wird. Beachten Sie Folgendes: Wenn der folgende Code

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

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

gemäß der obigen Aussage gemeldet wird, ist es offensichtlich, dass der Fehler vorliegt Was wir erwartet haben, aber wenn dies direkt zurückgegeben wird, wird überhaupt kein Fehler gemeldet. Sie können auch eine mutige Schätzung über die von toJSON zurückgegebenen internen Objekte anstellen und die Originalobjekte vergleichen. Wenn sie gleich sind, verwenden Sie das Originalobjekt

then

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

des Promise-Objekts direkt Wenn die Promise.resolve-Methode das Objekt übergibt, wenn es eine then-Methode gibt, wird die then-Methode sofort ausgeführt Äquivalent zum Einfügen der Methode in ein neues Promise. Zusätzlich zu diesem Verhalten weist Promise.all auch dieses Verhalten auf

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

Objektattribut-Accessoren erhalten und setzen

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

Sie können sehen, dass mein Alter unabhängig von der Einstellung 18 Jahre oder jünger ist. Beim Ausführen des Attributzugriffs wird zusätzlich zur oben genannten Schreibmethode die entsprechende Get-Set-Funktion aufgerufen ist auch wie folgt

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

Jetzt sind der Wert von input und der innerHTML-Wert von span of obj.age Attributwert miteinander verbunden

Iterator-Schnittstelle Symbol.iterator

 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
  }

Sie können sehen, dass jedes Mal, wenn der Spread-Operator aufgerufen wird oder die for...of-Schleife zum Durchlaufen eines Objekts verwendet wird, die Traverser-Schnittstelle des Objekts aufgerufen wird, z. B. Array, String, Map, Set, TypedArray und Andere Array-ähnliche Objekte wie Argumente und NodeList verfügen nativ über eine Traverser-Schnittstelle, aber normale Objekte stellen diese Schnittstelle nicht bereit. Wenn Sie möchten, dass das Objekt den Spread-Operator oder die for...of-Schleife verwenden kann, können Sie es hinzufügen Diese Methode können Sie dem Objekt hinzufügen, oder Sie können sie zum Originalobjekt hinzufügen, um deren Verhalten zu ändern.

Das Obige habe ich für alle zusammengestellt die Zukunft.

Verwandte Artikel:

Was sind die Sicherheitslücken bei der Verwendung von Timing-Angriffen in Knotenanwendungen?

Einseitige Implementierung in Vue-Komponentenlieferungsobjektbindung, wie geht das?

So verwenden Sie TypeScript in Vue-Komponenten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonWie verwende ich implizite Aufrufe in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!