JS 기초 (텍스트RPG게임 만들기)

• 깊은복사 vs 얕은복사.

const a = 'b';
const c= ['d', true, 1];
const e = { g: 'h'};
const i = [{ j : 'k' }, { l : 'm' }];
const n = { o : { p : 'q' }};

const a1 = a;
const c1 = [...c] // c.slice  >> 배열일 때 '= c' 는 참조이지 복사가 아님. 현재 배열안에 원시값만 들어있어서 얕은 복사해도 상관이 없다. 객채안에 객체가 없으면 깊복을 안해도 된다.
const e1 = {...e}
const i1 = JSON.parse(JSON.stringify(i))
const n1 = JSON.parse(JSON.stringify(n))

• this

const hero = {
    name: '',
    lev: 1,
    maxHp: 100,
    hp: 100,
    xp: 0,
    att: 10,
    attack(monster){
        monster.hp -= this.att; // 객체 안에 들어있는 this는 객체 자기자신(here)를 가리킨다. 단, 화살표함수가 아닌 function으로 작동할때만 사용가능. 만약 화살표함수로 쓰게 되면 브라우저에서 윈도우가 되어버린다.
        this.hp -= monster.att;
    },
    heal(monster){
        this.hp += 20;
        this.hp -= monster.att;
    }

  };

//참고. 객체 리터럴 안에서는 attack: function(monster){} 를 attack(monster){}로 줄일 수 있다.

아래 두개의 this는 서로 다르다. 1번은 외부에 있는 class, 2번은 내부에 있는 $gameMenu(form태그) 를 지칭한다.

아래와 같이 바깥에 있는 this를 game에다가 넣어서 외부에 있는 this를 끌어올 수 있다.

하지만 화살표함수를 이용하면 문제가 해결된다.
function()(함수선언문)은 내부에 있는 것을 this로 보지만 화살표함수는 외부에 있는 this를 가지고 올 수 있게 된다. (화살표함수는 this 때문에 나왔다고 한다.)
++ this 는 함수가 호출될 때 결정된다.

• 부가설명
  
  ※추가사항.
  b.sayname(); 에서는 this가 b를 가리키고 있기때문에 true가 나오지만 const bf = b.sayName; 를 하고 bf()를 확인하면 false. bf()에서는 this를 window 자체로 받아버림.
  
• window
  브라우저 전체를 담당하는 객체.
  document, querySelector 모두 window에 포함. 다만 window를 생략할 수 있기에 쓰지않음.