프론트엔드 개발자 기술면접 인터뷰 질문 -2022.02.09.WED

this 용법을 아는대로 설명하시오!!!

 

• 자바스크립트의 함수는 호출될 때 매개변수로 전달되는 인자값 이외에, argument객채와 this를 암묵적으로 전달 받는다 
• this는 인스턴스 자신을 가리키는 참조 변수이다(객체 자신에 대한 참조값을 가지고 있다는 뜻)
• 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다
• this 바인딩은 함수가 어떻게 호출되었는지에 따라서 동적으로 결정된다 .

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 

 

함수를 호출하는 방식 

• 일반 함수 호출
• 메서드 호출
• 생성자 함수 호출
• function.prototype.apply/caa/bind 메서드에 의한 간접 호출 

---

일반 함수 호출 

• 기본적으로 this에는 전역 객체가 바인딩 된다. 
• 전역 함수는 물론이고 내부함수의 경우도 전역객체에 바인딩 된다

function foo() {
  console.log("foo's this: ",  this);  // window
  function bar() {
    console.log("bar's this: ", this); // window
  }
  bar();
}
foo();

• 메소드의 내부함수일 경우에도 전역객체에 바인딩 된다 

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

• 콜백 함수인 경우에도 전역객체에 바인딩 된다 

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    setTimeout(function() {
      console.log("callback's this: ",  this);  // window
      console.log("callback's this.value: ",  this.value); // 1
    }, 100);
  }
};

obj.foo();

내부함수는 일반함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩 한다. 

 

this가 전역객체를 참조하는 것을 회피 하는 방법은 없을까?

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    var that = this;  // Workaround : this === obj

    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1

      console.log("bar's that: ",  that); // obj
      console.log("bar's that.value: ", that.value); // 100
    }
    bar();
  }
};

obj.foo();

---



메소드의 호출 

객체 소속인 메소드의this는 그 객체를 가르킨다 

---

생성자의 호출 

• 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이가 있다

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

결과 

window 
o2

• 생성자는 빈 객체를 만들고 이 객체 내에서 this는 만들어진 객체를 가르킨다 
• 생성자가 실행되기 전까지 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어느 작업도 불가넝~

function Func(){
    document.write(o);
}
var o = new Func();

//결과
undefined

---

 

apply, call, bind

• 함수의 메소드인 apply와 call을 이용하면 this 값을 제어 할수 있다. 

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}
func();
func.apply(o);
func.apply(p);

결과

window
o
p

• bind 메서드
  • f.bind(someObject)를 호출하면 f와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성합니다. 새 함수의 this는 호출 방식과 상관없이 영구적으로bind()의 첫 번째 매개변수로 고정됩니다.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

 

 

 

 

 

 

 

📍출처

https://opentutorials.org/course/743/6571

this - 생활코딩

https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/

binding의 개념과 call, apply, bind의 차이점 · 쾌락코딩