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

이번에는 JavaScript에서의 암시적 호출에 대한 자세한 설명을 가져왔습니다. JavaScript암시적 호출 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

서문

암묵적 호출이라고 표현하는 것이 정확한지는 모르겠습니다. 그 행동은 항상 뒤에 숨겨져 있고, 가끔씩 모습을 드러내는 데에는 별 효과가 없는 것 같습니다. 그러나 그것을 이해하는 것은 여전히 ​​​​유용합니다. 당신이 그것을 사용하지 않을 것이라고 장담합니다.

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

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

datatype Conversion을 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를 실행하여 반환된 다음 toString을 실행하고 마지막으로 '2' == '2'와 동일하며 Number 및 String 메서드에서 Number가 valueOf를 먼저 호출한 다음입니다. toString을 호출합니다. String 메서드에서는 그 반대입니다. 위의 두 가지 예 외에도

데이터 유형의 변환은 숫자 연산과 같은 다양한 다른 연산에도 존재합니다. 참조 유형이 포함된 경우 객체가 있는 한 valueOf 또는 toString 메서드가 호출됩니다. 관련된 경우 이 두 메서드를 상속하므로 데이터 유형 변환 동작에 영향을 미치기 위해 이 두 메서드를 다시 재정의할 수 있습니다.

DOM2 이벤트의handleEvent

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

맞게 읽으셨습니다. addEventListener의 두 번째 매개변수도 가능합니다. 함수이면서 객체가 될 수 있으며, 이벤트가 트리거된 후 객체의 handlerEvent 메소드가 실행됩니다. 메소드가 실행되면 이는 eventObj를 가리킵니다.

전달하려는 데이터를 eventObj에 바인딩할 수 있습니다. object

JSON 개체 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"}

JSON의 stringify 메서드를 전달하는 경우 입력한 개체에 toJSON 메서드가 있는 경우 이 메서드로 실행된 개체는 toJSON이 실행된 후 반환되는 개체로 변환됩니다. 다음 코드

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

가 위 명령문을 기반으로 하는 경우 오류가 우리가 예상한 것임이 분명합니다. 그러나 이를 직접 반환하면 오류가 전혀 보고되지 않습니다. toJSON에서 반환된 객체와 원본 객체 간의 내부 비교입니다. 동일하면 원본 객체를 직접 사용합니다.

promise 객체의 then

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

Promise.resolve 메소드가 객체에 전달될 때 then 메소드가 즉시 실행됩니다. 이는 해당 메소드를 새로운 Promise에 넣는 것과 같습니다. Promise.resolve에는 이 동작이 있을 뿐만 아니라 Promise.all에도 이 동작이 있습니다

 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 속성 접근자 get 및 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

아무리 나이를 설정해도 내 나이는 18세 이하임을 알 수 있습니다. 속성 액세스를 수행할 때 위의 작성과 더불어 해당 객체 속성의 get set 함수가 실제로 호출됩니다. 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
  }

이제 input 값과 obj.age 속성 값 범위의 innerHTML 값이 묶여 있습니다

Iterator 인터페이스 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
  }

읽고 보니 마스터하셨을 거라 믿습니다. 이 기사의 사례 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS가 노드에 새 요소 추가

JS에서 Nodelist Dom 목록을 반복하는 4가지 방법

JS 텍스트 간헐적 루프 스크롤 효과를 얻는 방법

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