Впервые опубликовано по адресу: https://mingjiezhang.github.io/.
В JavaScript этот объект связан с средой выполнения функций выполнения (то есть в контексте).
Начните с демонстрации в React
Когда Facebook недавно обновлен React, класс в ES6 был добавлен в метод создания компонентов. Facebook также рекомендует, чтобы создание компонентов использовало определение класса компонентов, определяя класс, унаследованный от React.component. Официальная демонстрация:
Класс, такие как Button Extends React.component {constructor () {super (); this.state = {liked: false}; this.handleclick = this.handleclick.bind (this);} handleclick () {this.setState ({liked :! this.state.liked}); «понравился»: 'Haven/' TВ приведенной выше демонстрации много использования. В классе, как Button Extens React.component, мы объявляем класс, потому что это специально определяется его контекстом, поэтому мы не можем знать использование этого в определении класса. Это эквивалентно новому классу, определенному выше, сначала вызывая функцию Constructor (), этот контекст этого. Штат является объектом экземпляра; Точно так же этот контекст этого. State.licked в функции render () также является объектом. Проблема в том, что onclick = {this.handleclick}, нет проблем с получением ссылки на эту функцию, и контекст здесь является объектом.
В настоящее время проблема заключается в том, что в React.createClass Handleclick () автоматически свяжется с экземпляром, который будет запускаться, когда запускается событие OnClick. В настоящее время контекст этой функции является экземпляром. Однако в написании класса ES6 Facebook отменил автоматическую привязку. После инстанции «Подобно» контекст handleclick () является экземпляром поддержки Div (экземпляр поддержки), и контекст handleclick () изначально обязан быть экземпляром, как Button. У нас есть несколько решений этой проблемы.
Используйте функцию bind (), чтобы изменить контекст этого
Вы можете использовать функцию Constructor () в объявлении класса
this.handleclick = this.handleclick.bind (это);
Этот метод представляет собой связывание bind () и используется несколько раз. В этом методе, после объявления экземпляра, мы можем использовать функцию handleclick () в любом месте в экземпляре, и контекст этой функции handleclick () - это объект экземпляра, который является путтоном.
Кроме того, мы также можем связать этот контекст с объектом экземпляра «НАЗАД», где используется функция. Код выглядит следующим образом
<div onclick = {this.handleclick.bind (this)}> вы {text} this. Нажмите, чтобы переключиться. </Div>Этот метод требует, чтобы мы каждый раз связывались с объектом компонента, используя функцию bind ().
Функция стрелы ES6
Функция стрелки => была добавлена в ES6. В дополнение к удобству, функция стрелки имеет другую функцию, которая должна привязать эту функцию с контекстом, в котором она определена. Эта функция также может помочь нам решить эту проблему. Используйте следующий код:
<div onclick = {() => this.handleclick ()}> вы {text} this. Нажмите, чтобы переключиться. </Div>Таким образом, контекст этого. Handleclick () будет связан с объектом экземпляра «Способный». Лично я считаю, что использование функций со стрелками делает JavaScript ближе к объектно-ориентированному стилю программирования.
Это резюме
Суть этого в том, что это не имеет ничего общего с масштабами, но только с контекстом выполнения.
Выше приведено метод создания этого компонента в ES6 в React, который редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!