숙제5 - 어떤 매치가 성사될까?

문제

출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요

주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행)

var fullname = 'Ciryl Gane'

var fighter = {

    fullname: 'John Jones',

    opponent: {

        fullname: 'Francis Ngannou',

        getFullname: function () {

            return this.fullname;

        }

    },

    getName: function() {

        return this.fullname;

    },

    getFirstName: () => {

        return this.fullname.split(' ')[0];

    },

    getLastName: (function() {

        return this.fullname.split(' ')[1];

    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());

console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

 

 

 

---

내가 작성한 답

[출력결과]
Not Francis Ngannou VS John Jones
It is John Jones VS Ciryl Gane

[이유]
1. fighter.opponent.getFullname()
메소드이므로 앞의 객체를 받아 this == fighter.opponent가 되어 'Francis Ngannou' 값을 가져옴
2. fighter.getName()
메소드이므로 앞의 객체를 받아 this == fighter가 되어 'John Jones' 값을 가져옴
3. fighter.getFirstName()
화살표함수이므로 this를 따로 바인딩하지 않고 상위에서 상속(?)받아서 this == window가 되어 'Ciryl Gane'값을 가져옴  
4. fighter.getLastName
즉시실행함수로 바로 실행된 값이 할당됨. 그런데 왜 this가 window를 가리키는지는 모르겠습니다.

 

정답

var fullname = 'Ciryl Gane';

var fighter = {

    fullname: 'John Jones',

    opponent: {

        fullname: 'Francis Ngannou',

        getFullname: function () {

            // 1. 객체 this 바인딩 : 프란시스 은가누

            // fighter.opponent.getFullname()은 호출의 주체가 명확한 메서드이므로 opponent를 가리켜서 opponent.fullname이 됨

            return this.fullname;

        },

    },

    getName: function () {

        // 2. 객체 this 바인딩 : 존 존스

        // 호출의 주체가 명확. fighter.fullname이 됨

        return this.fullname;

    },

    getFirstName: () => {

        // 3. 함수 this 바인딩 : 시릴

        // fighter.getFirstName()

        // 화살표 함수의 특성 상 this 바인딩을 안하고, 상위의 this를 바라보게끔 되어있음. window.fullname이 됨

        return this.fullname.split(' ')[0];

    },

    getLastName: (function () {

        // 4. 함수 this 바인딩 : 시릴

        // 클로저 개념

        // 괄호를 열고 닫는 호출부가 없다. 실행이 아니라 갖다 껴놓은 것과 같음

        // 스스로 선언해놓고 뒤에 호출해놓은 구조. 즉시실행함수

        // fighter.getLastName 호출주체가 fighter라는게 아니라 이 부분을 그냥 대체한다고 보면 됨. 이부분도 호출 주체가 명확하지 않은 것이므로 전역객체 window를 바라봄

        return this.fullname.split(' ')[1];

    })(),

};

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());

console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);