ホームページ ウェブフロントエンド jsチュートリアル JavaScriptのパラメータ受け渡しにおける値と参照を理解するためのコード例

JavaScriptのパラメータ受け渡しにおける値と参照を理解するためのコード例

Mar 06, 2017 pm 02:24 PM

値と参照はさまざまなプログラミング言語で共通のトピックであり、js も例外ではありません。

サンプルの実際の実行プロセスを分析し、js パラメーターの受け渡しにおける値と参照についての私の理解を共有します。

公式 Web サイトのデータ型の 2 つの分類を参照してください。この記事では、これら 2 つの分類を基本型 (ブール、ヌル、未定義、文字列、数値、シンボル) とオブジェクト型と呼びます。

まず、例を使用してパラメータの受け渡しの適用を示します。

var obj = {};
obj.inner = 10;

var num = 10;
var str = 'Hello';
var boo = true;
var oth = null;
var und = undefined;
var sym = Symbol('foo');

function passingobject(myobj){
    myobj.inner  = 1 + myobj.inner ; 
}

function passingvalue(myvalue){
  switch(typeof myvalue){
    case 'number':
        myvalue = myvalue + 1;
        break;
      case 'string':
        myvalue = 'I am a new string now!';
        break;
      case 'boolean':
        myvalue= false;
        break;
      default:
        myvalue = 'Null, Undefined, or Symbol';
     }
  }

  console.log("before num = " + num);  // before num = 10
  passingvalue(num);
  console.log("after num = " + num);  // after num = 10
  console.log("before str = " + str); // before str = Hello
  passingvalue(str);
  console.log("after str = " + str);  // after str = Hello
  console.log("before boo = " + boo); // before boo = true
  passingvalue(boo);
  console.log("after boo = " + boo);  // after boo = false
  console.log("before oth = " + oth); // before oth = null
  passingvalue(oth);
  console.log("after oth = " + oth);  // after oth = null
  console.log("before und = " + und); // before und = undefined
  passingvalue(und);
  console.log("after und = " + und);  // after und = undefined
  console.log(sym); // Symbol(foo)
  passingvalue(sym);
  console.log(sym); // Symbol(foo)
  console.log("before obj.inner = " + obj.inner); // before obj.inner = 10
  passingobject(obj); // after obj.inner = 11
  console.log("after obj.inner = " + obj.inner);
ログイン後にコピー

例 1 の結果から次の 2 つの結論が導き出せるようです。

1. 渡されるデータ型は基本型 (数値、 string boolean、null、unknown 、symbol)、パラメーターの受け渡しプロセス中に、関数内で渡された値に対する操作は、元の値に影響を与えません。

2. 渡されるデータ型はオブジェクトです。パラメータの受け渡しプロセス中に、関数内で渡された値を操作すると、元の値が変更されます。

しかし、他に特別な事情があるのでしょうか?

stackoverflow で非常に熱く議論されている使用法がありますが、これは結論 2 に反します。例2。

引用元の例: http://www.php.cn/

 1 function changeStuff(a, b, c)
 2 {
 3   a = a * 10;
 4   b.item = "changed";
 5   c = {item: "changed"};
 6 }
 7 
 8 var num = 10;
 9 var obj1 = {item: "unchanged"};
10 var obj2 = {item: "unchanged"};
11 
12 console.log(obj1.item); // unchanged
13 console.log(obj2.item); // unchanged
14 changeStuff(num, obj1, obj2);
15 console.log(obj1.item); // changed
16 console.log(obj2.item); // unchanged
ログイン後にコピー

例 2 では、obj2.item は関数changeStuff によって変更されません。 b と c の値も、changeStuff の内部で変更されます。なぜ obj1 は変更されるのに (L15)、obj2 は変更されないのでしょうか。

この現象を図のようにjsの実行コンテキストを使って説明します。

js の実行中に、エディターは実行コンテキストを動的に生成します。例 2 では、最初にグローバル実行コンテキストと changeStuff 実行コンテキストが生成されます。

changeStuff(num, obj1, obj2) が実行されると、a、b、c はパラメーター num、obj1、obj2 を指し、a と num は 10 を指し、b と obj1 は同じ値を指し、c と obj2 は指します。同じ値にします。

ステップ1を実行するとき、aを割り当てられる前の値の10倍に再割り当てします。これ以降、aはnumとは関係がありません。

ステップ 2 を実行するとき、b が指す値の item 属性を再割り当てします。この割り当てでは item の値が変更されるだけですが、obj1 と b は同じ値を指し続けます。

ステップ3を実行すると、cはobj2とは何の関係もなくなり、cがitemという属性を持っていたとしても、obj2のitem属性と独自の値を持ちます。 obj2.itemに影響します。

つまり、js関数のパラメータの受け渡し処理中に、関数内でパラメータが再代入された場合、この代入処理は元の変数の値には影響しません。

これは、基本型パラメーター変数 (結論 1) が影響を受けないという現象もよく説明しています。基本型パラメーター変数のすべての変更は新しい代入であり、元の変数には影響しません。

概要

js関数の受け渡しでは、基本型(数値、文字列、ブール値、null、未定義、シンボル)の変数がパラメータとして渡される場合、関数内のパラメータに対する操作は変数の値を変更しません。 。

オブジェクト型変数がパラメータとして渡される場合、関数内でのパラメータの操作は、パラメータが関数内で(任意のタイプの値)再割り当てされない限り、変数の値に影響します。

ありがとうございます!

ご質問がございましたら、お気軽にご連絡ください!

上記は、JavaScript パラメータの受け渡しにおける値と参照を理解するためのコード例の内容です。関連コンテンツ PHP 中国語 Web サイト (www.php.cn) にご注意ください。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Golang 関数パラメータ受け渡しのパフォーマンスを最適化するためのベスト プラクティス Golang 関数パラメータ受け渡しのパフォーマンスを最適化するためのベスト プラクティス Apr 13, 2024 am 11:15 AM

Go 関数のパラメーター受け渡しのパフォーマンスを最適化するためのベスト プラクティスには、値の型を使用して小さい値の型をコピーすることを避けること、ポインターを使用して大きな値の型 (構造体) を渡すこと、インターフェイスを使用して多態性の型を渡すこと、などが含まれます。実際には、大きな JSON 文字列を渡すときにデータ パラメーター ポインターを渡すと、逆シリアル化のパフォーマンスが大幅に向上します。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

C++ 関数パラメータの詳細説明: 並列プログラミングにおけるパラメータ受け渡しのパフォーマンスの最適化 C++ 関数パラメータの詳細説明: 並列プログラミングにおけるパラメータ受け渡しのパフォーマンスの最適化 Apr 27, 2024 pm 02:09 PM

マルチスレッド環境では、関数パラメータの受け渡し方法が異なり、パフォーマンスの違いは顕著です。値による受け渡し: パラメータ値のコピーは安全ですが、大きなオブジェクトは高価です。参照渡し: 参照渡しは効率的ですが、関数の変更は呼び出し元に影響します。定数参照による受け渡し: 定数参照による受け渡しは安全ですが、パラメーターに対する関数の操作が制限されます。ポインタによる受け渡し: ポインタの受け渡しは柔軟ですが、ポインタの管理は複雑で、ダングリング ポインタやメモリ リークが発生する可能性があります。並列合計では、値渡しよりも参照渡しの方が効率的で、ポインタ渡しが最も柔軟ですが、管理が複雑になります。

Go言語におけるパラメータの受け渡し方法に関する研究 Go言語におけるパラメータの受け渡し方法に関する研究 Apr 03, 2024 pm 02:48 PM

Go 言語では、関数パラメータを渡す主な方法が 2 つあります。 値の受け渡し: 変数のコピーを渡しても、呼び出し元のコード内の元の変数には影響しません。ポインターの受け渡し: 変数のアドレスを渡すと、関数は呼び出し元のコード内の元の変数を直接変更できます。

C++ 関数ポインター パラメーター受け渡しメカニズム C++ 関数ポインター パラメーター受け渡しメカニズム Apr 19, 2024 pm 02:06 PM

関数ポインタは、C++ のパラメータ受け渡しメカニズムとして使用されます。関数ポインタは定数ポインタとして渡され、受け渡しプロセス中にコピーが作成され、受け取った関数の仮パラメータはコピーを指し、逆参照されたコピーは基になる関数を呼び出すことができます。関数。

See all articles