자바스크립트의 암시적 호출에 대한 자세한 설명

암시적 호출은 단순히 일부 메서드를 자동으로 호출하는 것을 의미하며 이러한 메서드는 후크처럼 외부에서 수정되어 설정된 동작을 변경할 수 있습니다.

아래에는 최근에 본 몇 가지 암시적 호출이 나열되어 있습니다.

Sting 및 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

을 추가하는 것을 환영합니다. 항등 연산자의 연산에서 객체는 먼저 호출합니다. valueOf 반환된 값이 객체인 경우 null을 제외하고 toSting이 호출되고 반환된 값이 비교에 사용됩니다. 첫 번째 예는 3 == '2'와 동일하며 false를 반환합니다. valueOf.object를 실행한 다음 toString을 실행하면 마지막으로 '2' == '2'와 동일하며 Number 및 String 메서드에서 Number는 먼저 valueOf를 호출한 다음 toString을 호출합니다. String 메서드는 그 반대입니다.
위의 두 가지 예 외에도 수치 연산과 같은 다양한 다른 연산에도 데이터 유형 변환이 존재합니다. 참조 유형이 포함되면 객체가 객체인 한 valueOf 또는 toString 메서드가 호출됩니다. 이 두 메소드를 상속하면 데이터 유형 변환 동작에 영향을 미치기 위해 이 두 메소드를 다시 재정의할 수 있습니다. 이벤트가 트리거된 후에 실행될 개체의 handlerEvent 메서드는 메서드가 실행될 때 eventObj를 가리키며 전달하려는 데이터를 eventObj 개체

JSON 개체에 JSON

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

에 바인딩할 수 있습니다. JSON의 stringify 메소드에 의해 전달된 객체에는 toJSON 메소드가 있으며, 메소드에 의해 실행된 객체는 toJSON이 실행된 후 반환된 객체로 변환됩니다. 위의 명령문을 보면 오류가 예상했던 것이 분명하지만 이를 직접 반환하면 전혀 오류가 보고되지 않습니다. toJSON에서 반환된 개체와 원본 개체 간의 내부 비교에 대해 대담한 추측을 하는 것이 좋습니다. 동일할 경우 Promise 객체의 원본 객체

then

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

를 직접 사용합니다. Promise.resolve 메소드가 객체에 전달될 때 then 메소드가 있으면 즉시 then 메소드를 실행하는 것과 같습니다. Promise.resolve에 이 동작이 있는 것 외에도 Promise.all에도 이 동작이 있습니다

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

객체 속성 접근자 get 및 set

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

나이에 상관없이 볼 수 있는 설정은 무엇인가요? 18세 이하입니다. 속성 액세스를 수행할 때 객체 속성의 해당 get set 함수가 실제로 호출됩니다. 위의 쓰기 방법 외에도 다음과 같은 쓰기 방법도 있습니다

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

이제 입력 값과 obj.age의 속성 값과span의 innerHTML 값은 모두 함께 묶여 있습니다

Iterator 인터페이스 Symbol.iterator

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

확산 연산자가 호출되거나 for...of 루프를 사용하여 객체의 경우 객체는 Array, String, Map, Set, TypedArray와 같은 Traverser 인터페이스라고 하며 인수 및 NodeList와 같은 일부 배열과 유사한 객체는 기본적으로 탐색자 인터페이스를 갖지만 일반 객체는 원하는 경우 이 인터페이스를 배포하지 않습니다. 스프레드 연산자 또는 for ...of 루프를 사용할 수 있는 객체는 이 메서드를 객체에 추가하거나 인터페이스를 사용하여 원래 객체의 메서드를 다시 작성하여 동작을 변경할 수 있습니다.

관련 권장 사항:

php, 하위 클래스가 암시적으로 상위 클래스의 메서드를 호출하는 방법

위 내용은 자바스크립트의 암시적 호출에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!