从嵌套方法命中方法

Question

如何从打字稿中的单独嵌入式函数内部命中函数？

我想要完成的......伪;

 declare let document: any;
    export class Coching {

      customSelect(wrapper) {
        wrapper.querySelectorAll('.form-ctrl').forEach((elm) => {
          if (elm.tagName === 'SELECT') {
            const allOptions = elm.getElementsByTagName('option');
            const allreadyCustomDropDown =
              elm.parentNode.querySelector('.customDropdown');
            if (allreadyCustomDropDown != null) {
              allreadyCustomDropDown.remove();
            }
            if (allOptions.length > 0) {
              const listWrapper = document.createElement('ul');
              listWrapper.classList.add('customDropdown');
              for (let i = 0; i < allOptions.length; i++) {
                const list = document.createElement('li');
                list.innerHTML = allOptions[i].innerHTML;
                listWrapper.appendChild(list);
              }
              elm.parentNode.appendChild(listWrapper);
              elm.parentNode.classList.add('customSelectWrapper');
              listWrapper.querySelectorAll('li').forEach((liList) => {
                liList.addEventListener('click', () => {
                  liList.parentNode.parentNode.querySelector('.form-ctrl').value = liList.innerHTML;
                  liList.parentNode.parentNode.classList.add('has-value');
                  liList.parentNode.classList.remove('visibleDropdown');
                  liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1;
                })
              })
            }
            // listWrapper.addEventListener
          }
        });

        wrapper.querySelectorAll('select.form-ctrl').forEach((elm) => {
          elm.addEventListener('click', function () {
            document.querySelectorAll('.customDropdown').forEach((elm1) => {
              elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown');
            });
            elm.style.opacity = 0;
            elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown');
          });
        });

        document.addEventListener('click', (e) => {
          if (!e.target.parentNode.classList.contains('customDropdown') && !e.target.parentNode.classList.contains('customSelectWrapper')) {
            document.querySelectorAll('.customDropdown').forEach((elm) => {
              elm.classList.remove('visibleDropdown');
              elm.parentNode.querySelector('.form-ctrl').style.opacity = 1;
            });
          }
        });
      }
    }

似乎export class blah { functionOne(result) { // do stuff with the result of functionTwoChildMethod... }; const geocoder = new google.maps.Geocoder(); geocoder.geocode (paramObj, function (res, stat) { functionTwoChildMethod = () => { this.functionOne(result); }; }; }; 没有达到类的范围到父级来触发functionOne或其他东西。那我错过了什么？感谢任何方向，这让我感到困扰的时间比我分享的时间长得多：）

Answer 1

  

所以我错过了什么

错误的this。

修复

使用箭头功能

export class blah {

    functionOne(result) {
       // do stuff with the result of functionTwoChildMethod...
    };

    const geocoder = new google.maps.Geocoder();

    geocoder.geocode (paramObj, (res, stat) => { // Use arrow here

       functionTwoChildMethod = () => {
         this.functionOne(result);
       };

    };
};

更多

https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Answer 2

我知道

this会很疯狂，但请尝试that;）

export class blah {

    functionOne(result) {
       // do stuff with the result of functionTwoChildMethod...
    };

    const geocoder = new google.maps.Geocoder();
    var that = this;
    geocoder.geocode (paramObj, function (res, stat) {

       functionTwoChildMethod = () => {
         that.functionOne(result);
       };

    };
};

你使用的

this是在一个没有你需要的功能的范围内，但是通过将它分配到that，你可以使用你需要的功能;） 这完全是关于可变范围的