반응형
이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다.
자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다.
모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다.
참조, 복사 의 개념은 프로그래밍 언어에서 많이 사용된다.
복사는 말 그대로 복제한다고 생각하면 되고, 참조는 가리키는 것 이라고 이해할 수 있다.
변수의 데이터가 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다. 코드를 통해 이해해보자
-소스 코드-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var a = { 'id': 1 };
var b = a;
//b = { 'id': 2 };
//위 라인에서 'b'라는 객체는 새로운 객체를 만들어버림,
//b 객체는 더이상 a객체가 아닌 새롭게 만들어진 객체를 참조한다.
b.id = 2;
//a도 변경됨, 맨 첫번째 라인에서 a변수에 id가 1인 값(객체)이 만들어짐,
//'var b = a'라 하면 기존의 객체가 있을 때, 기존 객체를 참조함
//b의 id값을 2로 바꾸면 a의 id값, 즉 참조하는것이 바뀌므로 a도 바뀜
document.write(a.id + '<br />');
var aa = { 'id': 1 };
var aaa = { 'id': 1 };
function f(bb) {
bb = { 'id': 2 };
}
//bb와 aa는 똑같은 객체(를 참조하지만 b는 새로 만든 객체를 참조하기때문에
// aa의 값은 바뀌지 않는다.
function ff(bbb) {
bbb.id = 2;
}
//여기서는 데이터가 객체이기 때문에, bbb와 aaa가 참조하고 있는 id는 같은 것이다.
//bbb.id를 통해 id값이 바뀌고 aaa와 bbb가 참조하고 있는것이 같기 때문에 aaa의 값이 바뀜
f(aa);
ff(aaa);
document.write(aa.id + '<br />');
document.write(aaa.id + '<br />');
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5; text-decoration:none">Colored by Color Scripter
|
함수 f에 파라미터 bb로 전달된 값은 객체 aa,
bb를 새로운 객체로 대체하는 것은 bb가 가리키는 객체를 변경하는 것이므로 aa객체에 영향을 주지 않는다.
함수 ff에 파라미터 bbb는 객체 a의 래퍼런스, 이 속성을 바꾸면 그 속성이 소속된 객체를 바꾸므로
bbb의 변경이 aaa에도 영향을 미친다.
반응형
'JavaScript' 카테고리의 다른 글
| [javascript] 페이지 개발 : localstorage (0) | 2019.11.18 |
|---|---|
| [javascript] 페이지 개발 : 타이머제작 (0) | 2019.11.14 |
| [JavaScript]Object 객체 (0) | 2019.06.02 |
| [JavaScript]표준 내장 객체 (0) | 2019.05.29 |
| [JavaScript]프로토타입_Prototype (0) | 2019.05.29 |