2023 - 05 - 26 내부this에 다른 값 바인딩하기

오늘 할일

1. 자바스크립트 4주차 강의 듣기

2. 알고리즘 특강(1) 정리

3. 깃헙 공부

 

 

오늘 배운 것 : 콜백함수 내부 this에 다른 값 바인딩 하기.

 

1. 첫번째 방식

 

var obj1 = {
    name: "obj1",
    func: function(){   // 순서02.
        var self = this;  // 순서01.
        return function () {
            console.log(self.name);
        };
    },
};

var callback = obj1.func();  // 순서03.
setTimeout(callback, 1000);  // 순서04.

01. this 값을 self에 할당한다.
02. obj1 객체 안의 func 속성은 함수를 갖는다. 바로 console찍는게 아니라 함수 return먼저 함.
03. var callback = obj1.func(); 이 값은 func함수를 return한 값, 즉 console.log(self.name)을 담은 것. 
04. 즉, 객체에서의 self.name인 obj1 출력. 이 callback은 아래줄의 setTimeout에 들어가서 1초뒤 출력.

closure : 현재의 함수가 끝났음에도 영향을 미친다. 1번과정에서 return해온 값은 self.name인데 이것은 참조하지 않은 값인 name: "obj1" 을 가져옴.

 

 

 

 

2. 두번째 방식 (this를 없앰)

var obj2 = {
    name: "obj2",
    func: function(){
        console.log(obj2.name)
    },
};

setTimeout(obj2.func, 1000);

setTimeout에서 첫번째 요소인 func에서는 함수 function값에 obj1.name을 찍어서 name인 "obj1" 값이 나오게 했고, 이를 setTimeout으로 찍어서 1초뒤에 나오게 함. this는 쓰이지 않음.

하지만 두번째 방식 코딩은 하드코딩이므로 지양해야함.

 

 

 

3. 세번째 방식 ( 맨 아래 3줄, 즉시실행함수 call)

var obj1 = {
    name: "obj1",
    func: function(){    //순서 02.
        var self = this;  //순서 01.
        return function () {
            console.log(self.name);
        };
    },
};

var obj3 = {name: "obj3"}; 
var callback1 = obj1.func.call(obj3); //순서 03.
setTimeout(callback1, 2000); //순서 04.

 

콜백함수에서 obj1 값의 func값을 갖고오도록 함. this바인딩 방식.

 

 

 1. 함수를 즉시실행함수가 아닌 this를 바인딩하는 방법 : call, apply, bind,
call 과 apply는 괄호 열고닫자마자 바로실행하는 반면, bind는 즉시실행이 아니라 this를 바인딩해서 새로운함수 return

 

var obj1 = {
    name: "obj1",
    func: function(){   
            console.log(this.name);
        },
    };

    var boundObj1 = obj1.func.bind(obj1);
    setTimeout(boundObj1, 2000);

 

  이렇게 하면, boundObj1의 값은 obj1.func.bind(obj1) => 여기서 bind함수로 obj1.func 값과 obj1를 묶음.
    그러면 함수function 값의 console에 this가 obj1가 되고, 자동으로 이름값인 name: "obj1" 이 찍힘.

 

 

2. 함수 자체를 바인딩하는 방법

var obj1 = {
    name: "obj1",
    func: function(){   
            console.log(this.name);
        },
    };

var obj2 = {name: "obj2"};
setTimeout(obj1.func.bind(obj2), 1500)

 obj1.func.bind(obj2) => obj2를 obj1.func 요소에 바인딩함. 그러면 this에 함수 obj 전체인 name: "obj2" 이 바인딩됨.

 

 

const obj = {
    name: "John",
    greeting: function() {
      console.log(`Hello, ${this.name}!`);
    }
  };
  
  const obj2 = {
    name: "Alice"
  };
  
  obj.greeting.bind(obj2)();
  
  // 'Hello, Alice!' 출력됨