[JS] 자바스크립트 this (1/2)

 

 

 

 

 

 

> 관련 글 :: [JS]자바스크립트 this(2/2)

 

 

🌈 자바스크립트 This

 

자바스크립트에서는 함수를 호출하는 방식에 따라 this에 바인딩되는 객체가 달라진다.

 

📕 함수 호출

 

📕 메서드 호출

 

📘 생성자 함수 호출

     1️⃣ 동작 방식

     2️⃣ 객체 리터럴 방식과 생성자 함수 방식의 차이

     3️⃣ new 연산자를 붙이지 않고 호출할 경우

 

 

📘 call / apply / bind 를 통한 호출

    1️⃣ apply를 통한 바인딩과 함수 호출

    2️⃣ apply와 유사 배열 객체

    3️⃣ 콜백함수와 apply, call

    4️⃣ bind

 

 

---

 

 

📕 함수 호출 

내부 함수의 경우 함수, 메소드, 콜백함수 어디에 선언되든 this는 전역객체에 바인딩된다.

 

◾ 기본적으로 this는 전역객체에 바인딩된다.

function foo() {
   console.log(this); 
}

foo(); // window

 

◾ 내부함수의 경우에도 this는 전역객체에 바인딩된다.

function foo() {
   function goo() {
      console.log(this); 
   }
   goo();
}

foo(); // window

 

◾ 메서드의 내부함수인 경우에도 this는 전역객체에 바인딩된다.

let a = 100;
let obj = {
   a: 200,
   foo: function() {
      function goo() {
         console.log(this.a);
      }
   goo();
   }
};

obj.foo(); // 100

 

내부함수의 this가 전역 객체를 참조하는 것을 피하기 위해서는 내부 함수를 지정하기 전에 특정 변수를 지정해준다.

let a = 100;
let obj = function() {
   a: 200,
   foo: function() {
     var 변수 = this;
     function goo() {
        console.log(this.a); // 100
        console.log(변수.a); // 200
     }
     goo();
   }
}

obj.foo();

 

 

 

 

📕 메서드 호출

함수가 객체의 프로퍼티 값이면 메서드로 호출되고, 메서드 내부의 this는 해당 메서드를 소유한 객체에 바인딩된다.

let obj1 = {
   name: 'Jinny',
   sayName: function() {
      console.log(this.name);
   }
}

let obj2 = {
   name: 'Lee'
}

obj2.sayName = obj1.sayName;
obj1.sayName(); // Jinny
obj2.sayName(); // Lee

 

 

 

 

 

 

 

 

📌 참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this