#javascript #reactjs #binding
Вопрос:
Когда метод привязывается в конструкторе класса React, как он видит значение привязываемого свойства, если конструктор запускается первым, то, когда свойство handleClick привязывается к экземпляру компонента ниже, как он узнает, каким будет значение handleClick, поскольку оно не определено до тех пор, пока конструктор не будет запущен.
Поэтому мне интересно, запускается ли конструктор первым, известно ли ему вообще, что метод с именем handleClick определен, и если да, то как, потому что он определен после конструктора?
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
Комментарии:
1. Как и в обычном JS, он, вероятно, сканирует весь ваш код еще до того, как он начнет выполняться. Вы когда-нибудь слышали о подъеме в JavaScript? Допустим, вы определяете набор функций в нижней части файла, а затем хотите использовать их в верхней части файла, JS уже знает об этих функциях, потому что он отсканировал ваш код и поднял их, чтобы они уже были в области действия. Вызов этих функций в верхней части файла будет работать просто отлично. Я бы рискнул сказать, что конструктор вообще не запускается, пока класс не узнает обо всех других методах.
2. Я действительно думал, что это может быть вариантом, но просто подумал, знает ли кто-нибудь определенный ответ.
Ответ №1:
Это называется подъем https://stackabuse.com/hoisting-in-javascript. Вы можете найти кучу примеров в статье, которую я приложил.
Комментарии:
1. извините, что поправляю вас, но такой вещи, как подъем, не существует, подъем-это неправильное понимание того, как на самом деле работает механизм выполнения. начните с просмотра этого видео youtube.com/watch?v=HcW5-P2SNecamp;t=100s
2. В этой ссылке не упоминается о том, что методы класса были подняты.
Ответ №2:
что вы имеете в виду, говоря, что они будут неопределенными? когда вы определяете класс и реализуете его методы, класс «знает», какими атрибутами и свойствами он обладает.
есть что-то, вызывающее выполнение контекста, для этой цели давайте скажем, что это this , другими словами, это объект, запущенный в текущей области.
если у вас есть такой компонент, как этот.
class Button extend Component {
constructor (props) {
super(props);
}
handler () {
// ...
}
render () {
return (
<button onClick={this.handler} >Click</button>
)
}
}
это создает кнопку. Когда пользователь нажимает на кнопку , он выполняет метод handler , теперь позвольте мне спросить вас, что именно this кто выполняет handler .
пользователь? кнопка? в окно?
onClick-это прослушиватель событий, это реакция, запускаемая каждый раз, когда пользователь взаимодействует с окном. таким образом, тот, кто вызывает функцию onClick, был не кнопкой, а окном. метод обработчика кнопки-это не что иное, как оболочка исходной функции, поэтому текст находится под окном, поэтому, когда вы ссылаетесь на другие элементы кнопки класса, все не определено, потому что вы ищете эти вещи в объекте окна.
this.handler = this.handler.bind(this);
это только указывает , кто будет this , но не верьте мне, я просто смертный.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
что узнать больше смотрите здесь: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
Комментарии:
1. Спасибо, я понимаю контекст и почему мы связываемся. Мне просто интересно, является ли конструктор самым первым, что запускается, знает ли он о других методах в классе, чтобы связать их, и если да, то как? потому что я думал, что интерпретатор достигнет этих методов после запуска конструктора, поэтому он не будет знать о них.
2. короткий ответ да, он знает об этом. JavaScript — это язык компиляции как раз вовремя. перед выполнением кода механизм времени выполнения считывает код yow в текущей области, и в зависимости от того, как вы объявили свой класс, механизм времени выполнения может знать его методы или нет. эти книги могут рассказать вам гораздо больше github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md
3. Спасибо, я предполагаю, что он делает это из-за некоторой логики компилятора, а также перед запуском кода.
Ответ №3:
Именно из-за подъема, на самом деле это специальность конструктора в классе, вы можете развеять свои сомнения, поняв конструктор. посетите здесь для легкого объяснения — ‘https://ponyfoo.com/articles/binding-methods-to-class-instance-objects’
Комментарии:
1. Эта ссылка является своего рода общей для привязки, она не объясняет, почему вы можете привязывать методы, которые будут определены позже.