2017-09-14 60 views
0

我想使用一个对象作为函数参数。当我定义对象之外温控功能,然后将其作为参数传递,它工作正常:javaScript - 传递对象作为函数参数

var obj = { 
    a: 0 
} 

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

foo() //0 

但是,当我直接传递一个对象,它doesen't工作:

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

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

+1

*此*仅为上下文!不要使用它来访问变量。 –

+0

函数的语法错误。检查如何使用函数的基本教程。 – lilezek

+0

您正在混合函数调用和函数定义。参数在函数调用中传递,它们没有在函数定义的参数列表中获取它们的值。 – Teemu

回答

1

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

// 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}){ 
    console.log(a) 
} 

但是通常当你有多个参数,它是有用的。

但是,当我直接传递一个对象,这是行不通的:

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()不带参数,并为您应该使用类似解构后的参数默认值:

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

但不要忘记,它没有得到广泛的浏览器支持,因此你将不得不使用编译器将您的ES6代码转换为浏览器支持的代码。

最受欢迎的转播是BabelTypescript

+0

虽然这是正确的,但我不明白这对OP有何帮助。 –

+0

@FelixKling我添加了详细信息 –

+2

我仍然认为OP对函数调用的工作原理有一个根本的误解(仔细阅读问题)。谈论解构在这种情况下是没有用的,尽管他们接受了答案。我质疑他们是否明白这是关于什么的。 –

3

原因这个与变量传递没有任何待办事项。不要在这里使用它。简单地做:

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

 
    bar({});//0 
 
    bar();//0 
 
    bar({a:10});//10

+0

而在FF。乔纳斯,你应该测试它。 – Andy

+0

@andy是的,我应该。但即时通讯AFK我的一天90%,所以即时通讯不总是能够这样做。 –

1

首先,看来要结合如何申报与如何调用函数,使用此代码传递参数的函数参数:

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

接下来,访问参数时,只需使用参数名称,而不是thisthis用于引用调用上下文对象,而不是函数参数。调用上下文对象本质上是负责导致函数首先被调用的对象。它也可以指向一个明确设置的对象来替换本来就是上下文对象的本地对象。而且,在正确的情况下,它可以指向全局(window)对象或是undefinedthis通常会让很多JavaScript开发人员感到困惑。这里的a link欲了解更多关于this的信息。

所以,你的代码应该是:

// 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

2

没有任何答案实际上试图解决这个问题,所以我想我可能会去。

你问:“我想用一个对象作为函数参数。”然而,你的第一个例子并没有显示你这样做。你是而不是作为函数参数传递一个对象。你做的是根据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),我想你会从阅读中受益。

相关问题