Detaillierte Erklärung impliziter Aufrufe in Javascript

Dieses Mal erkläre ich implizite Aufrufe in JavaScript Was sind die Vorsichtsmaßnahmen bei der Verwendung von JavaScript impliziten Aufrufen?

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 bei Ihrer Verwendung zu verstehen.

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.
Nachfolgend werde ich einige implizite Aufrufe auflisten, die ich kürzlich gesehen habe. Die Beispiele sind genau das Richtige für das Hinzufügen von

DatenTypkonvertierungtoSting 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'

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

Bei der Operation des Gleichheitsoperators ruft das Objekt zuerst valueOf auf. Wenn der zurückgegebene Wert ein Objekt ist, ruft es toSting auf, außer null, und verwendet dann den zurückgegebenen Wert Zum Vergleich. Ein Beispiel entspricht 3 == '2' und gibt false aus. Das zweite Beispiel gibt ein Objekt zurück, da valueOf ausgeführt wird, und dann wird toString ausgeführt Gibt in den Number- und String-Methoden „true“ aus. Number ruft zuerst „valueOf“ und dann „toString“ auf. Das Gegenteil ist in der String-Methode der Fall.

Zusätzlich zu den beiden oben genannten Beispielen gibt es die Konvertierung des Datentyps auch in verschiedenen anderen Operationen, z. B. bei numerischen Operationen. Wenn Referenztypen beteiligt sind, wird die Methode valueOf oder toString verwendet Solange das Objekt ein Objekt ist, können wir diese beiden Methoden überschreiben, um das Verhalten der Datentypkonvertierung

handleEvent im DOM2-Ereignis

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

Sie haben richtig gelesen. Zusätzlich zu einer Funktion kann der zweite Parameter von addEventListener auch ein Objekt sein. Nach dem Auslösen des Ereignisses wird die Methode handleEvent ausgeführt ausgeführt, dies zeigt auf eventObj. Sie können das gewünschte Objekt

Datenbindung für das eventObj-Objekt

JSON-Objekt an 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"}

übergeben Wenn das von der JSON-Stringify-Methode übergebene Objekt über eine toJSON-Methode verfügt, wird das ausgeführte Objekt nach der Ausführung von toJSON in das zurückgegebene Objekt konvertiert. Beachten Sie Folgendes: Wenn der folgende Code lautet:

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

Gemäß der obigen Aussage ist es offensichtlich, dass der Fehler unseren Erwartungen entspricht, aber wenn dies direkt zurückgegeben wird, wird überhaupt kein Fehler gemeldet. Sie können genauso gut eine mutige Vermutung anstellen und das von toJSON zurückgegebene Objekt vergleichen mit dem Originalobjekt. Wenn sie gleich sind, verwenden Sie direkt das Then

des Originalobjekts

Wenn die Promise.resolve-Methode übergeben wird Wenn es eine then-Methode für das Objekt gibt, wird diese sofort ausgeführt, was dem Einfügen der Methode in ein neues Promise entspricht. Zusätzlich zu Promise.resolve weist auch Promise 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-Accessor abrufen und festlegen

 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 vom eingestellten Alter 18 Jahre oder jünger ist. Beim Ausführen des Attributzugriffs wird tatsächlich die entsprechende Get-Set-Funktion des Objektattributs aufgerufen. Zusätzlich zur obigen Schreibmethode gibt es auch die folgende Schreibmethode

Geben Sie nun den Wert value und obj ein. Der Attributwert von Alter und der innerHTML-Wert von Span sind alle miteinander verbunden Fall in diesem Artikel Methode, weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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

Empfohlene Lektüre:

 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
  }

JS Element und neuen Knoten hinzufügen

4 Möglichkeiten, die Nodelist-Dom-Liste mit JS zu schleifen

 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
  }

So erzielen Sie den intermittierenden Scrolleffekt von JS-Text

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung impliziter Aufrufe in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!