Question

我想使用一个对象作为函数参数。当我在fucntion之外定义一个对象然后将其作为参数传递时，它可以正常工作：

var obj = {
  a: 0
}

function foo(obj){
  console.log(this.obj.a); 
}

foo() //0

但是当我直接传递一个对象时，它无法工作：

function bar({a: 0}){
  console.log(this.arguments.a)
}
// Uncaught SyntaxError: Unexpected number

对象doesent似乎是一个合法的论点。我该如何解决？

Answer 1

原因此与传递的变量没有任何关系。不要在这里使用它。只需：

     function bar({a = 0} = {}){
       console.log(a)
     }

     bar({});//0
     bar();//0
     bar({a:10});//10

Answer 2

ES6支持参数解构。您可以使用：

function bar({a}){
    console.log(a)
}

但是，通常在有多个参数时很有用：

// you pass option to a function old way
function oldOps(option){
    var protocol = option.protocol;
    var method = option.method;
    var port = option.port;
    console.log(port);
}
// new and more readable way
function newOps({protocol, method, port}){
    console.log(port)
}

只有旧的IE不支持它。

但是当我直接传递一个对象时，它不起作用：

function bar({a: 0}){
  console.log(this.arguments.a)
}

您不能以这种方式传递参数或初始化默认参数。此外，在您的情况下，this将引用父对象，因此this.arguments.a没有意义。

使用参数解构，您可以使用默认参数，因此您的代码将会显示：

function bar({a = 0}){
    console.log(a)
}
bar({}) // 0

但是，任何没有参数调用它的努力都会导致错误，因为JS会尝试解析undefined的属性

您可以使用其他默认参数分配来解决问题。当你真的想要在没有参数的情况下调用bar()并且具有destructured参数的默认值时，你应该使用类似的东西：

function bar({a = 0} = {a:0}){/*...*/}

请不要忘记它没有被浏览器广泛支持，因此您必须使用transpiler来转换浏览器支持的ES6代码。

最受欢迎的转发器是Babel和Typescript。

Answer 3

这些答案都没有真正试图解决这个问题，所以我想我可能会去。

你问：“我想使用一个对象作为函数参数。”然而你的第一个例子并没有告诉你这样做。您不作为函数参数传入对象。所做的是在window下声明一个变量（假设这是浏览器代码），然后将该变量的值记录到控制台。因为 this是上下文而this是通过函数的方式定义的，在此实例中是上下文是window，因此您的代码可以使用。

您的第二个代码示例会混淆您在第一个示例中所犯的错误。 arguments在本地作用于该函数。它前面不需要this。而且你不能像它是一个对象一样访问它，因为arguments是一个类似于数组的结构。您可以像这样访问它：arguments[0].a假设您将对象传递到函数中，如下所示：bar({a: 1})。

JavaScript上下文和范围可能是一个非常难以理解的概念。我是一个经验丰富的JS开发人员，它偶尔会让我失望，所以不要灰心。 This article is very good at explaining context (and function scope)我认为你会从阅读中受益。

Answer 4

首先，您似乎正在组合如何声明函数参数以及如何调用函数并使用以下代码传递参数：

function bar({a: 0}){
  console.log(this.arguments.a)
}

接下来，访问参数时，只需使用参数名称，而不是this。 this用于引用调用上下文对象，而不是函数参数。调用上下文对象本质上是负责使函数首先被调用的对象。它还可以指向一个显式设置为替换本地对象的对象。并且，在适当的情况下，它可以指向全局（window）对象或undefined。 this通常会让很多JavaScript开发人员感到困惑。这是关于this的更多信息的 a link 。

所以你的代码应该是：

// Declare the function and set up a named parameter
function bar(someObj){
  console.log(someObj)
}

// Call the function and pass an object literal:
bar({a: 0});

现在，您实际上可以为函数提供默认值，这将是如何执行此操作：

// Establish an object with an `a` property with a value of "Hello"
// as the default value of the function's argument
function bar(obj = {a: "Hello"}){
  console.log(obj);
}

bar();  // Default value of parameter will be used
bar({a:"Goodbye"}); // Passed value will be used

javaScript - 将对象作为函数参数传递

4 个答案: