在Javascript中不将变量作为参数传递是否正常？

我在Javascript中遇到了这样的代码，当我来自C++/Python背景时，我感到非常困惑：

const list = [
  {
    title: 'React',
    url: 'https://facebook.github.io/react/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  ...
];

class App extends Component {

  constructor(props) {
    super(props);

# leanpub-start-insert
    this.state = {
      list: list,
    };
# leanpub-end-insert
  }

  ...

}

看起来您可以只使用函数外部的变量。我理解JS就是这样工作的，但我不确定人们是否经常这么做，只是使用外部变量，而不是作为参数传递。这是一种标准和正常的做法吗

以下内容看起来很难将变量作为参数传递给函数：

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

const list = [
  {
    title: 'React',
    url: 'http://facebook.github.io/react',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4, 
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5, 
    objectID: 1,
  }
]

const isSearched = searchTerm => item =>
  item.title.toLowerCase().includes(searchTerm.toLowerCase());

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: list,
      searchTerm: '',
    }
    this.onDismiss = this.onDismiss.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);

  }
  onDismiss(id) {
    const isNotID = item => item.objectID !== id;
    const updatedList = this.state.list.filter(isNotID);
    this.setState({ list: updatedList });

  }

  onSearchChange(event) {
    this.setState({ searchTerm: event.target.value });
  }

  render() {
    return (
      <div className="App">
        <form>
          <input
            type="text"
            onChange={this.onSearchChange}
          />
        </form>
        {this.state.list.filter(isSearched(this.state.searchTerm)).map(item =>
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
              <span>
                <button onClick={() => this.onDismiss(item.objectID)} type="button">
                  Dismiss
                </button>
              </span>
            </div>
        )}
      </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
常数列表=[
{
标题：“反应”，
网址：'http://facebook.github.io/react',
作者：《乔丹·沃克》，
num_评论：3，
要点：4，
对象ID:0，
},
{
标题：“Redux”，
网址：'https://github.com/reactjs/redux',
作者：“丹·阿布拉莫夫，安德鲁·克拉克”，
num_评论：2，
要点:五,，
目标1,，
}
]
const isSearched=searchTerm=>item=>
item.title.toLowerCase（）包括（searchTerm.toLowerCase（））；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
列表：列表，
搜索词：“”，
}
this.onDismiss=this.onDismiss.bind（this）；
this.onSearchChange=this.onSearchChange.bind（this）；
}
昂迪斯米斯（id）{
const isNotID=item=>item.objectID！==id；
const updatedList=this.state.list.filter（isNotID）；
this.setState（{list:updatedList}）；
}
onSearchChange（事件）{
this.setState（{searchTerm:event.target.value}）；
}
render（）{
返回(
{this.state.list.filter（isSearched（this.state.searchTerm））.map（item=>
{item.author}
{item.num_comments}
{item.points}
this.onDismiss（item.objectID）}type=“button”>
解雇
)}
)
}
}
导出默认应用程序；

这是一种标准和正常的做法吗

通常没有，但也有例外。（例如，在变量中具有应用程序的整个状态）

类和函数意味着可以重用

如果您的函数（或类）依赖于全局变量，那么很难重用和测试

底线是：尽可能避免

这是一种标准和正常的做法吗

通常没有，但也有例外。（例如，在变量中具有应用程序的整个状态）

类和函数意味着可以重用

如果您的函数（或类）依赖于全局变量，那么很难重用和测试

---

底线是：尽可能避免它。

在React中，在您的示例中这样的状态下有一个伪数据集列表是很正常的。您通常会使用

import

语法从不同的文件导入它。但为了更好地测试组件，最好避免导入外部库，而是将其作为参数传递

在React中，像您的示例中那样，在状态中有一个伪数据集列表是很正常的。您通常会使用

import

语法从不同的文件导入它。但为了更好地测试组件，最好避免导入外部库，而是将其作为参数传递

这是可能的，但应谨慎使用。正如您所想象的，如果每个人都使用全局变量，那么很容易导致名称冲突。此外，全局变量永远不会被垃圾收集，因此也可能会导致内存乱丢

---

通常，如果您使用JavaScript编写框架，您将发布一个全局变量，该变量充当框架的“名称空间”：

Rx

、

d3

、

$

、

把手

，等等。这些变量通常与框架本身的名称相同，因此不太可能发生冲突。然后在该对象中定义所有其他内容，例如

Handlerbars.compile（）

等等。

这是可能的，但应谨慎使用。正如您所想象的，如果每个人都使用全局变量，那么很容易导致名称冲突。此外，全局变量永远不会被垃圾收集，因此也可能会导致内存乱丢

---

通常，如果您使用JavaScript编写框架，您将发布一个全局变量，该变量充当框架的“名称空间”：

Rx

、

d3

、

$

、

把手

，等等。这些变量通常与框架本身的名称相同，因此不太可能发生冲突。然后在该对象中定义所有其他内容，例如

Handlerbars.compile（）

等等。

我建议不要这样做。相反，你应该遵循

oop

的方式（Typescript将非常支持你），我建议不要这样做。相反，你应该遵循

oop

的方式（Typescript将非常支持你）（我没有投反对票，但这并不是一个答案）-这更像是一个评论。请添加一些原因和解释这更好：）我不认为OPs的问题完全是关于全球的。当然，这个例子使用了一个全局变量，但是他们用了这个问题的措辞，这听起来更像是一个关于在函数中使用闭包中的变量有多普遍的问题，我认为这在js中是一个非常普遍的做法。@d3L当你说尽可能避免它时，您的意思是说，在某些情况下，这是不可能的，还是始终可以将变量作为参数传递到函数中。在与用户进行大量交互的代码中，例如，倾听用户类型并返回相应的结果（搜索），似乎很难将变量作为参数传递给函数。@user136266总是可以传递它，而不是使用全局变量。依赖