Detailed explanation of implicit calls in javascript

The so-called implicit call simply means automatically calling some methods, and these methods can be modified externally like hooks, thereby changing the established behavior.

Below I will list some implicit calls I have seen recently. The examples are just to the point. Welcome to add

Data type conversion toSting and 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

In the operation of the equality operator, the object will first call valueOf. If the returned value is an object, it will call toSting, except null, and then use the returned value for comparison. The first example is equivalent to 3 == '2' Output false. The second example returns an object because valueOf is executed, and then toString is executed. Finally, it is equivalent to '2' == '2' and outputs true
In the Number and String methods, Number will call valueOf first, and then call toString, the opposite is true in the String method.
In addition to the two examples above, data type conversion also exists in various other operations, such as numerical operations. When reference types are involved, the valueOf or toString method will be called. As long as the object is an object, it will inherit these two method, we can re-override these two methods to affect the behavior of data type conversion

handleEvent in DOM2 event

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

You read that right, the second parameter of addEventListener is not only a function but also It can be an object. After the event is triggered, the handleEvent method of the object will be executed. When the method is executed, this points to eventObj. You can bind the data you want to pass in to the eventObj object.

JSON object toJSON

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

If the object passed in by JSON's stringify method has a toJSON method, then the object executed by this method will be converted to the object returned after toJSON execution. One thing to note is that, as in the following code

 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

If According to the above statement, it is obvious that the error is what we expected, but when returning this directly, no error is reported at all. You might as well make a bold guess about the internal comparison between the object returned by toJSON and the original object. If they are equal, the original object is used directly

Then of the promise object

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

When the Promise.resolve method passes in the object, if there is a then method, the then method will be executed immediately, which is equivalent to putting the method into a new Promise, except that Promise.resolve has In addition to this behavior, Promise.all also has this behavior

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

Object attribute accessor get and set

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

You can see that no matter how much the age is set, my age is 18 years old or In the following, when performing attribute access, the corresponding get set function of the object attribute is actually called. In addition to the above writing method, there is also the following writing method

  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
    }

Now the value value of input and the attribute value span of obj.age The innerHTML values ​​are all bound together

Iterator interface Symbol.iterator

 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
    }

You can see that whenever the spread operator is called, or the for...of loop is used to traverse the object, the object will be called Traverser interfaces, such as Array, String, Map, Set, TypedArray and some array-like objects such as arguments and NodeList natively have a traverser interface, but ordinary objects do not deploy this interface. If you want the object to be able to use the spread operator or for ...of loop can add this method to the object, or it can rewrite the method on the original object with the interface, thereby changing its behavior.

Related recommendations:

php, how does a subclass implicitly call the method of the parent class

The above is the detailed content of Detailed explanation of implicit calls in javascript. For more information, please follow other related articles on the PHP Chinese website!