LitElement и .bind (это) - PullRequest
Новая
       15

LitElement и .bind (это)

0 голосов
/ 20 октября 2019

Я нахожу немного запутанным, иногда вам нужно привязать контекст к вызову функции, а иногда нет. Когда именно вы можете избежать этого, а когда нет?

В чем разница между этими линиями? 

<a @click="${this.handler.bind(this)}">link</a>

<a @click="${this.handler()}">link</a>

<a @click="${this.handler}">link</a>

<a @click="${()=>this.handler()}">link</a>

Также иногда в constructor() вам нужно 

this.handler = this.handler.bind(this)

чтобы вызов функции работал, иногда нет. В чем различия между всеми этими случаями?

1 Ответ

0 голосов
/ 21 октября 2019

В первых 4 строках я предполагаю, что вы обычно заключаете их между ${ и }. С этим упоминанием эти 3 строки: 

<a @click="${this.handler.bind(this)}">link</a>
<a @click="${this.handler}">link</a>
<a @click="${()=>this.handler()}">link</a>

будут очень похожи по эффекту. Когда вы присоединяете обработчик события, вам нужно передать ссылку на функцию / метод для вызова, в то время как вторая строка: 

<a @click="${this.handler()}">link</a>

, скорее всего, будет просто неправильной. Это потому, что вы будете звонить this.handler(), как только закончится рендеринг. Единственный способ, которым это может иметь какой-то смысл, - это если бы метод handler вернул функцию.

Возвращаясь к первым 3 строкам: они действительно будут иметь очень похожий эффект, так как во всех из них выпередача ссылок на локальный метод рендеринга, но:

  • первый не требует привязки, так как метод все равно будет вызываться в контексте this (но я думаю, это тоже не повредит)
  • третий добавляет определение анонимной функции в качестве обработчика событий, которая при вызове вызовет this.handler

Так что второй в основном самый простой и легкий дляпрочитайте.

Когда в некоторых случаях возникает необходимость вызова связывания, это необходимо, когда ваш метод вызывается из другого контекста. Допустим, вы передаете его в качестве параметра обратного вызова методу, работающему в другом классе. Когда вы будете вызывать метод, он будет иметь по умолчанию контекст этого другого объекта. Поэтому вам нужно будет использовать .bind (this), чтобы убедиться, что когда метод вызывается в контексте вашего элемента.

Ваш метод работает, но он запускается из другого this. Поэтому, может быть, поэтому иногда вы не замечаете необходимость .bind(this). Если метод просто показывает сообщение, вызывает другую внешнюю службу или что-то еще, что не является частью определения вашего объекта (в котором не используется this.something), он будет работать без использования bind.

UPDATE : на самом деле, я думаю, что обработчик событий всегда будет запускаться в контексте элемента, который породил это событие. Я предполагаю, что lit просто делает это .bind(this), когда мы используем этот синтаксис @click=, поскольку это имело бы большой смысл.

...