2017-09-14 57 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),我想你會從閱讀中受益。

相關問題