[Javascript] this 객체 바인딩 , 함수 바인딩

var fullname = 'Ciryl Gane'

var fighter = {

    fullname: 'John Jones',

    opponent: {

        fullname: 'Francis Ngannou',

        getFullname: function () {

            // 객체 this 바인딩 -> Francis Ngannou

            return this.fullname;

        }

    },

    getName: function() {

        // 객체 this 바인딩 -> John Jonse

        return this.fullname;

    },

    getFirstName: () => {

        // 함수 this 바인딩 -> Ciryl Gane

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

    },

    getLastName: (function() {

        // 함수 this 바인딩 -> Ciryl Gane

        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);

// my guess answer

// Not Francis Ngannou VS John Jones

// It is John Jones VS John Jones

// reality answer

// Not Francis Ngannou VS John Jones

// It is John Jones VS Ciryl Gane

// 1. fighter.opponent.getFullname()

    // return this.fullname;을 반환하고 있으므로. 여기서의 this 바인딩 객체는 getFullname 이라는 객체가 속해있는 객체 opponent의 fullname: 'Francis Ngannou' 요소이다.

// 2. fighter.getName()

    // this.fullname을 반환하고 있으므로 여기서의 this 바인딩 객체는 getName이라는 객체의 부모 요소인 var fighter의 fullname을 뜻한다

// 3. fighter.getName()

    // 위와 같다

// 4. fighter.getFirstName() , fighter.getLastName

    // 함수형 this 바인딩으로 객체와 달리 함수 바인딩은 아예 바깥 쪽 객체인 var fullname = 'Ciryl Gane'를 바라봐야하는 것으로 보인다..

    // 화살표 함수의 특성상 this.binding을 하지 않는다