javaScript - 將對象作為函數參數傳遞

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

一個對象似乎是一個合法的論點。 我如何解決它？

Answer 1

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沒有意義，因為在大多數情況下它將引用window對象。

通過參數解構，您可以使用默認參數，因此您的代碼將如下所示：

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

盡管如此，任何不帶參數調用它的努力都會導致錯誤，因為 JS 將嘗試解析undefined屬性

您可以使用另一個默認參數分配來解決該問題。 當你真的想不帶參數調用bar()並且有解構參數的默認值時，你應該使用類似的東西：

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

只是不要忘記它並沒有被瀏覽器廣泛支持，因此您必須使用轉譯器將您的 ES6 代碼轉換為瀏覽器支持的代碼。

最流行的轉譯器是Babel和Typescript 。

Answer 2

因為這與傳遞的變量無關。 不要在這里使用它。 簡單地做：

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

Answer 3

首先，您似乎將如何聲明函數參數與如何調用函數並使用以下代碼傳遞參數相結合：

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

接下來，在訪問參數時，只需使用參數名稱，而不是this 。 this用於引用調用上下文對象，而不是函數參數。 調用上下文對象本質上是負責首先調用函數的對象。 它還可以指向一個被顯式設置為替換本來是上下文對象的本機對象的對象。 而且，在適當的情況下，它可以指向 Global ( window ) 對象或undefined 。 this通常會讓許多 JavaScript 開發人員感到困惑。 這里有一個鏈接，指向更多關於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

Answer 4

沒有一個答案實際上試圖解決這里的問題，所以我想我可以試一試。

你問：“我想使用一個對象作為函數參數。” 然而，您的第一個示例並未顯示您這樣做。 您沒有將對象作為函數參數傳入。 您正在做的是在window下聲明一個變量（假設這是瀏覽器代碼），然后將該變量的值記錄到控制台。 因為this是上下文， this是由調用函數的方式定義的，在這種情況下，上下文是window ，因此您的代碼可以工作。

您的第二個代碼示例復合了您在第一個示例中犯的錯誤。 arguments在函數的本地范圍內。 在它面前不需要this 。 你不能像訪問它一樣訪問它，因為arguments是一個類似數組的結構。 您可以像這樣訪問它： arguments[0].a假設您將對象傳遞給您的函數，如下所示： bar({a: 1}) 。

JavaScript 上下文和范圍可能是一個很難理解的概念。 我是一個非常有經驗的 JS 開發人員，它仍然偶爾會吸引我，所以不要灰心。 這篇文章非常擅長解釋上下文（和函數范圍） ，我認為你會從閱讀中受益。