글 작성자: 망고좋아
반응형

🎯 자바스크립트 this 넌 누구냐!

호출한 놈(객체) === THIS

 

📝 전역에서 this

  • 전역에서 this는 window객체이다.
console.log(this); // window {...}

 

📝 일반 함수의 this

  • 일반 함수에서의 this도 window이다.
  • 함수 호출을 전역에서 했기 때문에 호출한 놈이 윈도우이기 때문에!
function whatIsThis() {
  console.log(this);
}

whatIsThis(); // window

 

📝 객체 메서서의 this

  • 객체의 method로 호출될 때 this는 해당 객체를 가리킨다.

 

📕 this를 호출한 놈 . 가 중요하다.

let user = {
  name: "John",
  age: 30,
  sayHi() {
    // 'this'는 '현재 객체'를 나타낸다.
    alert(this.name);
  }

};

user.sayHi(); // John
  • user.sayHi()에서sayHi()를 호출한 놈은 . 앞에 있는 user이다. 따라서 this는 user 객체를 가리킨다. user객체 안에 name은 John이다.
  • this.name 대신 user.name을 사용하면 user를 복사해 다른 변수에 할당하고 user는 다른 값으로 덮어썼다고 하면 sayHi는 원치 않는 값을 참조할 수 있다.
let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어씁니다.

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.

 

📕 this의 값은 런타임에 결정된다. 즉, 컨텍스트에 따라 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 각 객체의 f라는 프로퍼티 생성
// let user = { 
//      name: "John",
//     f: function () {
//            alert( this.name );
//        }, 
// };

user.f = sayHi;
admin.f = sayHi;


user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)
  • 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 값이 달라진다.

 

 

 

const someone = {
  name: 'coding',
  whoAmI:function()  {
    console.log(this); // 자기 자신
  } 
};

someone.whoAmI();

const myWhoAmI = someone.whoAmI;
myWhoAmI();
  • someone.whoAmI()나 myWhoAmI를 똑같은데 호출하는 방법에 따라 this의 값이 달라진다.

 

someone.whoAmI()

  • whoAmI()를 호출한 직접적인 아이는 someone이다.

 

myWhoAmI();

  • myWhoAmI를 실행한 자체는 윈도우다.
  • why? 자바스크립트를 실행하는 자체가 global에 있고 global은 윈도우 객체이기 때문이다.

 

<body>
    <button id="btn">버튼</button>
    <script>
        const someone = {
            name: 'coding',
            whoAmI: function () {
                console.log(this);
            }
        };

        const btn = document.getElementById('btn');
        btn.addEventListener('click', someone.whoAmI)


    </script>
</body>

 

 

호출한 놈(객체) === THIS

  • 누가!!! 실행했냐!!!가 중요하다.

 

📝 bind를 이용한 호출

  • 예외적으로 호출하는 것과 무관하게 this를 고정시키는 것이 bind다.
<body>
    <button id="btn">버튼</button>
    <script>
        const someone = {
            name: 'coding',
            whoAmI: function () {
                console.log(this);
            }
        };

        someone.whoAmI();

        const myWhoAmI = someone.whoAmI;
        myWhoAmI();

        const bindedWhoAmI = myWhoAmI.bind(someone); //bindedWhoAmI는 someone을 무조건 this로 받겠다는 말이다.(고정 시키겠다.)
        bindedWhoAmI(); //밖에서 호출해도 동일

        const btn = document.getElementById('btn');
        btn.addEventListener('click', bindedWhoAmI)


    </script>
</body>

 

 

🏷 요약

  • 호출한 놈(객체) === THIS
  • this를 호출한 놈 . 가 중요하다.

 

📌 참고

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 배열 합 구하는 방법  (0) 2021.11.05
[JavaScript] 배열 정렬 방법(오름차순, 내림차순)  (0) 2021.11.05
[JavaScript] Object.assign() 사용법  (0) 2021.09.11
[자바스크립트] Location 객체  (0) 2021.08.11
[자바스크립트] 함수의 prototype 프로퍼티  (0) 2021.07.16

티스토리툴바