33
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[メモ] JavaScript 参照

Last updated at Posted at 2020-10-24

コメントにてツッコミをいただきましたので、併せてご確認頂けると幸いです

変数aを定義し、1を入れた時
それぞれメモリ空間上に配置される

def.js
let a = 1;

aは1への参照(住所みたいなイメージ、メモリ空間上のアドレス)を保持している

スクリーンショット 2020-10-23 16.00.48.png

変数b変数aをコピーした時

def.js
let a = 1;
let b = a;

値の1がコピーされ、その参照を持つ変数bが作られる

スクリーンショット 2020-10-24 12.49.35.png

それぞれ別の参照先なので、変数bに再代入しても、変数aは影響を受けない
参照先が張り替えられるだけ

def.js
let a = 1;
let b = a;
b = 2;

console.log(a,b); // 1 2

スクリーンショット 2020-10-24 13.24.29.png

#オブジェクト

def.js
let user = {
    name: '山田'
};

上記のようなオブジェクトが定義されている時

変数userは「オブジェクトへの参照」は対して参照をもつ
「オブジェクトへの参照」というのは、オブジェクトのプロパティなどを示すアドレス

オブジェクトのプロパティはそれぞれの値への参照をもちます
スクリーンショット 2020-10-24 13.48.11.png

このオブジェクトをコピーします

def.js
let user = {
    name: '山田'
};

let secondUser = user;

ここでコピーされるものは「オブジェクトへの参照」です
「オブジェクトへの参照」への参照をコピーし、変数secondUserはそれへの参照を持ちます

スクリーンショット 2020-10-24 13.48.04.png

なので、オブジェクトの参照はそのまま残っているので、書き換えると両方変わります

def.js
let user = {
    name: '山田'
};

let secondUser = user;

secondUser.name = '田中';

console.log(user.name, secondUser.name); // 田中 田中

See the Pen Object Reference by natusme (@natsume0718) on CodePen.

これは、メソッドの引数の時も同様の挙動となる

#参考
[【JS】初級者から中級者になるためのJavaScriptメカニズム] (https://www.udemy.com/course/javascript-essence/) の 参照とコピー

33
39
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?