web-dev-qa-db-ja.com

javaScript-関数の引数としてオブジェクトを渡します

オブジェクトを関数の引数として使いたい。 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

オブジェクトは法的な議論のようです。どうすれば修正できますか？

javascriptfunctionobject
3
t411tocreate

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 です。

6
v-andrew

原因thisは、渡された変数とは何の関係もありません。ここでは使用しないでください。単に行う：

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

     bar({});//0
     bar();//0
     bar({a:10});//10
3
Jonas Wilms

まず、関数パラメーターを宣言する方法と関数を呼び出して、次のコードでパラメーターを渡す方法を組み合わせているようです。

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

次に、引数にアクセスするときは、thisではなくパラメータ名を使用してください。 thisは、関数パラメーターではなく、呼び出しコンテキストオブジェクトを参照するために使用されます。呼び出しコンテキストオブジェクトは、基本的に、関数を最初に呼び出させる役割を果たしたオブジェクトです。また、コンテキストオブジェクトであったネイティブオブジェクトを置き換えるように明示的に設定されたオブジェクトを指すこともできます。また、適切な状況では、グローバル（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
2
Scott Marcus

答えのどれも実際にここで問題に対処しようとしなかったので、私は行くかもしれないと思いました。

「オブジェクトを関数の引数として使用したい」と質問します。それでも、最初の例では、これを行っていることを示していません。あなたはnotオブジェクトを関数の引数として渡しています。あなたがしているのはwindowの下で変数を宣言し（これがブラウザコードであると仮定して）、その変数の値をコンソールに記録することです。 なぜならthisはcontextであり、thisは関数が呼び出される方法、この場合、コンテキストはwindowであるため、コードは機能します。

2番目のコード例は、最初の例で発生しているエラーを悪化させます。 argumentsは、関数に対してローカルにスコープされます。その前にthisは必要ありません。また、 arguments は配列のような構造であるため、オブジェクトのようにアクセスすることはできません。次のようにアクセスします：_arguments[0].a_オブジェクトを次のように関数に渡すと仮定します：bar({a: 1})。

JavaScriptのコンテキストとスコープは、頭を動かすのが非常に難しい概念になる可能性があります。私はかなりベテランのJS開発者ですが、それでも時々私を捕まえることがあるので、がっかりしないでください。 この記事はコンテキスト（および関数スコープ）の説明に非常に優れています そして私はあなたがそれを読むことから利益を得ると思います。

2
Andy