В этом контексте, что именно делает $ ('id'). On ('click', this.method.bind (this))? - PullRequest
Новая
       8

В этом контексте, что именно делает $ ('id'). On ('click', this.method.bind (this))?

0 голосов
/ 30 мая 2018

Вот приложение, на которое я ссылаюсь:

Я пытаюсь фундаментально понять метод связывания в Javascript.

Мое понимание, когда я играю св консоли то, что bind возвращает копию функции, причем «this» связано с тем, что вы передаете в bind. 

function logThis(){
  console.log(this)
}
logThis.bind({today: 'Tuesday'})
//Will return a copy of the logThis function, with 'this' set to the 
{today:'Tuesday'} object. The code does not run right away though.

var explicitlyLogThis = logThis.bind({today: 'Tuesday'});
explicitlyLogThis(); //This will run the code and display the {today: 'Tuesday'} object to the console.

Это мое понимание до сих пор.Я понимаю, что на самом деле для запуска этой новой функции, которая явно привязана к «this» с помощью метода bind, вам нужно установить ее в переменную, а затем запустить ее.

Я вижу противоречие, когда смотрю на приложение по приведенной выше ссылке.Если вы посмотрите на метод bindEvents в строке 56, у нас есть .on ('keyup', this.create.bind (this)).Я понимаю, что мы должны установить 'this' в App, когда мы запускаем метод create, потому что jQuery по умолчанию устанавливает 'this' для самого объекта jQuery.Так что эта строка на самом деле такая же, как: $ ('# new-todo'). On ('keyup', App.create.bind (App)).

Не в этом мое замешательство.У меня такой вопрос:

Как именно эти копии функций с установленным для приложения «this» на самом деле вызывают?Приложение не устанавливает их в переменную, а затем вызывает эту переменную так, как я это делал, когда работал в консоли.

Он просто вызывает связанные функции напрямую, как только событие происходит с одним из элементов jQuery.Но я подумал, что если написать это так, то просто верну копию функции, а не саму функцию, если я основываю свои предположения на том, что я понял в коде, который я написал выше.Я подумал, что для немедленного вызова функции вам нужно будет использовать call или apply.

Я также понимаю, что приложение запускает метод bindEvents при запуске (см. Строку 46).Поэтому я понимаю, что когда вы запускаете приложение, копии различных функций создаются с правильным «this», связанным с функциями.Но ... когда / как они на самом деле вызываются без назначения их переменным?Как получить доступ к этим копиям?

Я думаю, что у меня есть ошибочное понимание метода привязки, поэтому я хотел бы немного помочь.Спасибо!

1 Ответ

0 голосов
/ 30 мая 2018

Звучит так, как будто вы понимаете bind достаточно хорошо.Возможно, есть некоторая путаница с передачей анонимных функций.Как вы знаете, вызов bind возвращает новую функцию, которая может быть сохранена как переменная или передана в качестве аргумента функции.

В приведенном ниже примере btn1 принимает связанную функцию, как вы видели.Это также может быть написано более длинным способом с btn2.Они идентичныbtn3 не получает связанную функцию, когда щелчок по контексту является элементом кнопки, this теряет всю видимость MagicalApp функций. 

<button id="example1">button one bound</button>
<button id="example2">button one bound</button>
<button id="example3">button two unbound</button>
<script>
  class MagicalApp {
    add() {
      console.log('this could do addition');
    }
  }

  const app = new MagicalApp();

  function contextOfEvent(event) {
    console.log('contextSensitive', this.add)
  }

  const btn1 = document.querySelector("#example1");
  btn1.addEventListener('click', contextOfEvent.bind(app));

  const btn2 = document.querySelector("#example2");
  const btn2ClickHandler = contextOfEvent.bind(app)
  btn2.addEventListener('click', btn2ClickHandler);

  const btn3 = document.querySelector("#example3");
  btn3.addEventListener('click', contextOfEvent);
</script>
...