쉽게 이해하는 javaScript 객체지향&ES6 신문법①

 

this와 애로우 함수의 사용

// this의 쓰임 1
console.log(this);   //window가 나옴
function 함수(){
    console.log(this);   //window가 나옴
}
함수();   //window.함수();


// this의 쓰임 2
// 오브젝트 함수 내에서 쓰면 그 함수를 갖고 있는 오브젝트를 말함
var 오브젝트 = {
    data : 'Kim',
    함수 : function(){
        console.log(this)
    }
}
오브젝트.함수();

// 애로우 fucntion을 쓰면 함수 밖의 this를 그대로 가져옴
var 오브젝트2 = {
    data : 'Kim',
    함수 : () => {
        console.log(this)
    }
}
오브젝트2.함수();


// case study 3
var 오브젝트3 = {
    이름들 : ['김', '이', '박'],
    함수 : function(){
        console.log(this);
        오브젝트3.이름들.forEach(() => {
            console.log(this)
        });
    }
}
오브젝트3.함수();

- `this`가 나오면 사용된 fucntion 살펴보기

- 오브젝트 함수 내의 `this`는 그 함수를 갖고 있는 오브젝트를 가리킴

- 단, 애로우 fucntion을 사용하면 함수 밖의 `this`를 가리킴

- 모두 따져봤을 때 `this`가 가리킬만한게 없으면 최상위인 window가 출력된다.

 

 

<button id="버튼">버튼</button>

<script>
    var 함수 = (a) => { return a + 10 }
    console.log(함수(5));
    
    var 함수2 = a => a + 10
    console.log(함수2(10));

    // arrow function 예시
    // 1. forEach 콜백함수
    [1,2,3,4].forEach( a => console.log(a) );

    // 2. 이벤트리스너
    document.getElementById('버튼').addEventListener('click', e => {
        console.log(e.currentTarget);   //<button id="버튼">버튼</button>
    });

    // 3. Object 안의 함수
    var 오브젝트 = {
        함수 : () => { return this }
    }
    // 오브젝트 함수 안의 this는 오브젝트를 말해야 하는데 애로우 함수를 사용해서 window가 나옴
    console.log(오브젝트.함수());   //window
</script>

- 함수를 만드는 이유
1. 코드들을 기능으로 묶어야 할 때
2. 입출력 기계를 만들고 싶을 때

- arrow function의 장점
1. 입출력 기계 만들 때 보기 쉬움

2. 코드가 한 줄이면 소괄호, 중괄호 생략 가능 => 직관성

 

 

<button id="버튼">버튼이에요</button>

<script>
    var 사람 = {
        name: '손흥민',
        sayHi: function () {
            // 여기의 this는 오브젝트 함수 내에서 썼기 때문에 오브젝트 함수를 말함
            console.log("안녕 나는 " + this.name);
        }
    }
    사람.sayHi();


    var 자료 = {
        data: [1, 2, 3, 4, 5]
    }
    자료.전부더하기 = function () {
        var num = 0;
        this.data.forEach(a => {
            num = num + a;
        })
        console.log(num)
    }
    자료.전부더하기();


    document.getElementById("버튼").addEventListener('click', function () {
        // 여기의 this는 오브젝트 함수 내에서 사용된 것도 아니기 때문에 원래의 this는 윈도우
        // 하지만 애로우 함수를 써서 함수 밖의 this를 불러왔기 때문에 "버튼"이 this가 됨
        setTimeout(() => console.log(this.innerHTML), 1000)
    })
</script>

- 애로우 함수의 적절한 사용으로 `this`가 가리키는 걸 조절할 수 있다.