Как Javascript знает, когда выполнять функцию, передаваемую по ссылке неявно?Приведи пример - PullRequest
Новая
       44

Как Javascript знает, когда выполнять функцию, передаваемую по ссылке неявно?Приведи пример

0 голосов
/ 02 марта 2019

В моем примере приложения React я передаю функцию «манипулировать именем пользователя» по ссылке в качестве прослушивателя событий другому более мелкому компоненту.

App.js: 

import React, { Component } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import UserOutput from './components/UserOutput';

class App extends Component {
  state = {
    username: "Max",
    age: 30
  }    

  manipulateUsername = (event) => {
    this.setState({
      username: event.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <UserOutput name="Jenny" age="32"></UserOutput>        
        <UserOutput name={this.state.username} age={this.state.age}></UserOutput>        
        <UserInput setNameFunction={this.manipulateUsername} name={this.state.username}></UserInput>

      </div>
    );
  }
}

export default App;

В моем пользовательском входе.js, прослушиватель события onChange получает ссылку на функцию «манипулировать именем пользователя» из основного компонента приложения. 

import React from 'react';
import './UserInput.css';


const userInput = (props) => {
    return (
        <div className="UserInput" >
            <input type="text" value={props.name} onChange={props.setNameFunction}></input>
        </div>
    )
}

export default userInput;

Теперь это может звучать глупо, но как работает функция onChange ()на самом деле «знать», что он получил функцию, переданную в качестве ссылки, и как он автоматически выполняет эту функцию?Поскольку я не вызывал функцию в этом коде, как в скобках: 

onChange={props.setNameFunction()}

, вместо этого я просто оставил функцию как есть ..?onChange={props.setNameFunction}

Во-вторых, я хотел бы знать, как javascript удается неявно «передавать» значения другим функциям, например, в функции app.js «manageulateUser», он всегда получает событиепараметр (также, если я пропущу этот параметр, я думаю).Как это работает за кулисами?Потому что в функции onChange я вызываю свою функцию, но никогда не передаю в нее этот параметр события, так как же он работает?

Ответы [ 3 ]

0 голосов
/ 02 марта 2019

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

onChange={typeof props.setNameFunction === "function"? props.setNameFunction : () => {}}

Во-вторых, реакция обеспечивает функцию onChange, которая является функцией, она проверяет тип реквизита.ты прошелЕсли вы передадите значение, отличное от функции, это выдаст ошибку.

0 голосов
/ 09 марта 2019

Поскольку javascript - это функциональный язык программирования, возможна передача функции в качестве параметра другой функции.

Реагирует на перенос реальных событий в оболочку JavaScript, это также заставляет реагировать абстрактно на использование.Эта лучшая абстракция в реагировании помогает разработчику создавать кроссплатформенные приложения (например, React Native для Android, приложения IOS и Electron для создания настольных приложений).

Если вы сделаете так, как показано ниже, код 

<input type="text" value={props.name} onChange={props.setNameFunction()}></input>

функция будет выполнена во время рендеринга, а не при событии ввода onChange.

Но если вы хотите использоватьevent объект во время обработки события onChange, попробуйте это 

<input type="text" value={props.name} onChange={(event) => props.setNameFunction(event)}></input>

Надеюсь, это поможет вам.Спасибо.

0 голосов
/ 02 марта 2019

По умолчанию, в JavaScript Назначение и передача аргументов функции Object выполняется передачей по ссылке, а функции - Object в JavaScript.Только примитив получает новое место в памяти, когда ему назначают или передают функцию.

...