변수와 this 정리

var cat = "nabi";
function animal() {
    return cat;
}
animal(); //nabi

함수 animal()안에는 cat이라는 변수가 함수 안에 없기 때문에,

위로 거슬러 올라가 밖에 있는 cat의 값을 가져옴.

var cat = "nabi";
function animal() {
    cat = "coco";
    return cat;
}
animal(); //coco

함수 animal()안에는 cat이라는 변수가 함수 안에 있기 때문에,

위로 거슬러 올라갈 필요없이 안에 있는 cat의 값을 가져옴.

전역변수(바깥 변수)보다 지역변수(안에 변수)가 영향력이 세기 때문에!

var cat = "nabi";
var box = {
    animal : function() {
        return cat;
    }
}
box.animal(); //nabi

객체 box안에 함수 animal()가 들어가있는데,

cat라는 변수가 함수 안에 없기 때문에,

위로 거슬러 올라가 밖에 있는 cat을 가져옴.

var cat = "nabi";
var box = {
    cat: "mimi",
    animal : function() {
        return cat;
    }
}
box.animal(); //nabi

객체 box안에 함수 animal()가 들어가있는데,

cat라는 변수가 함수 안에 없기 때문에,

위로 거슬러 올라가 밖에 있는 cat을 가져옴.

box안에 있는 cat(mimi)는 변수가 아니고 프로퍼티 즉 객체의 속성이기 때문에 무시됨.

var cat = "nabi";
var box = {
    cat: "mimi",
    animal : function() {
        cat = "coco";
        return cat;
    }
}
box.animal(); //coco

객체 box안에 함수 animal()가 들어가있는데,

cat이라는 변수가 함수 안에 있기 때문에,

위로 거슬러 올라갈필요 없이 안에 있는 cat의 값을 가져옴.

------------------------------------------------

var cat = "nabi";
function animal() {
    return this.cat
}
animal(); //nabi

this는 객체 자신을 의미함.

함수 animal()의 객체는 사실 window임.

document.write 역시 앞에 window가 붙어있는 것임 생략한것뿐.

window.cat = nabi

window.animal().cat = 결국 nabi

그래서 nabi가 출력됨.

var cat = "nabi";
function animal() {
    cat = "coco";
    return this.cat
}
animal(); //coco

this.cat = window의 cat을 찾아라.

그리고 그런 window의 cat은 맨처음에는 nabi였다가 후반에 나온 coco때문에 coco로 변함.

그래서 window(this).cat은 coco임.

var cat = "nabi";
var box = {
    animal: function() {
        return this.cat
    }
}
box.animal(); //undefined

아까 animal()은 window 소속이였으나, 이제는 box라는 객체 안에 들어있기 때문에,

this는 box를 가리키게 됨.

그리고 box안에 cat이라는 변수는 없기 때문에 undefined가 출력됨.

var cat = "nabi";
var box = {
    cat: "mimi",
    animal: function() {
        return this.cat
    }
}
box.animal(); //mimi

box안에 cat을 만들어주자 그 값이 출력되는 것을 볼 수 있음.

var cat = "nabi";
var box = {
    cat: "mimi",
    animal: function() {
        cat = "coco";
        return this.cat
    }
}
box.animal(); //mimi

그런 함수 안에 지역 변수가 생성되도 이미 this 자체가 box를 의미하기 때문에 box.cat이 출력됨.