JavaScript(ReactJS) 1) console.log in 类和 2) 通过另一个函数调用的函数

Question

我有这两个关于JS的问题。我必须说我真的做了我的研究，但找不到任何关于它们的信息。
问题是：

为什么 console.log 和变量标识符（var、let、const）不能在 class 内部使用，在 [= 外部使用36=]?
例如（伪代码）：

class App extends Component {
    console.log(this) <--* ['Unexpected keyword or identifier']
    let a = 1         <--* ['Unexpected token']
    state = {         <--* [variable without identifier is alright]
        characters: [
            {
                name: 'Charlie',
                job: 'Janitor'
            }, etc...
            
    }

    removeCharacter = (index) => {
        console.log(this)  <--* [works here normally]

        const characters = this.state.characters

        etc...
            })
        })
    ...
}

为什么一个函数需要调用另一个函数？我的意思是，在什么情况下它变得必要？这来自类似：

const TableBody = (props) => {
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
 [this] *-->    <button onClick={() => props.removeCharacter(index)}>Delete</button>
            </tr>
        )
 [instead of something like] *--> <button onClick={props.removeCharacter(index)}>Delete</button>

我的意思是，props.removeCharacter(index) 本身就是一个调用，不是吗？

谢谢！

Answer 1

你可以做到

class TheClass {
  theProperty = 'theValue'

作为class field syntax的一部分，是

的语法糖

class TheClass {
  constructor() {
    this.theProperty = 'theValue'

它只是为实例分配属性，没有别的。

console.log(this) 不起作用，因为它在那里没有意义 - 它没有分配属性，它只是一个浮动表达式。

let a = 1 不起作用，因为您不能在那里声明新变量 - class 的 { 不会创建新块。使用 class 字段分配给实例的属性，并且不会创建新的独立标识符。

Why does a function needs another function to be called?

在这种情况下，它是必需的，因为您需要传递一个参数。如果 removeCharacter 不接受参数，你可以

<button onClick={props.removeCharacter}>

但它确实接受一个参数，该参数应该是索引。但是传递给点击处理程序的默认参数是事件 .

你做不到

onClick={props.removeCharacter(index)}

因为那会立即调用 removeCharacter。相当于

const result = props.removeCharacter(index);
// ...
<button onClick={result}

这不是所需的逻辑 - 您希望 removeCharacter 在单击按钮时调用，而不是在创建按钮时调用。

JavaScript(ReactJS) 1) console.log in 类和 2) 通过另一个函数调用的函数

JavaScript(ReactJS) 1) console.log in classes and 2) function called through another function

javascript

class

function

identifier

reactjs

JavaScript(ReactJS) 1) console.log in 类 和 2) 通过另一个函数调用的函数

JavaScript(ReactJS) 1) console.log in classes and 2) function called through another function

javascript

class

function

identifier

reactjs

JavaScript(ReactJS) 1) console.log in 类和 2) 通过另一个函数调用的函数