22장: this

​​​퀴즈

다음 결과는?

const obj = {
  value: 100,
  foo() {
    console.log("1: ", this);  
    console.log("2: ", this.value); 

    function bar() {
      console.log("3: ", this); 
      console.log("4: ", this.value); 
    }

    bar();
  }
};

obj.foo();

다음 결과는?

const person1 = {
  name: 'Lee',
  getName() {
    return this.name;
  }
};

const person2 = {
  name: 'Kim'
};

person2.getName = person1.getName;
console.log(person2.getName()); 

const getName = person1.getName;
console.log(getName()); 

다음 결과는?

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle = Circle(15);
console.log('circle: ',circle3); 
console.log('radius: ',radius); 

다음 결과는?

const person = {
  name: 'Lee',
  foo(callback) {
    setTimeout(callback, 100);
  }
};

person.foo(function () {
  console.log(`Hi! my name is ${this.name}.`);
});

다음 결과는?

function User(name) {
  name = "aaaaa";

  this.sayHi = function() {
    console.log("제 이름은 " + this.name + "입니다." )
  };
}

let bora = new User("bbbb");

bora.sayHi(); 

this 키워드

용어 정리

const circle = {
  // 프로퍼티: 객체 고유의 상태 데이터
  radius: 5,
  // 메서드: 상태 데이터를 참조하고 조작하는 동작
  getDiameter() {
    // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면
    // 자신이 속한 객체인 circle을 참조할 수 있어야 한다.
    return 2 * circle.radius;
  }
};

console.log(circle.getDiameter()); // 10

위치에 따라 바인딩이 달라진다

// 전역에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window

function square(number) {
  // 일반 함수 내부에서도 this는 전역 객체 window를 가리킨다.
  console.log(this); // window
  return number * number;
}
square(2);

const person = {
  name: 'Lee',
  getName() {
    // 리터럴 객체의 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다.
    console.log(this); // {name: "Lee", getName: ƒ}
    return this.name;
  }
};
console.log(person.getName()); // Lee

function Person(name) {
  this.name = name;
  // 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  console.log(this); // Person {name: "Jack"}
}

const me = new Person('Jack');

함수 호출 방식과 this 바인딩

• this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

• 함수 호출 방식

  • 일반 함수 호출

  • 메서드 호출

  • 생성자 함수 호출

  • Function.prototype.apply/call/bind 메서드에 의한 간접 호출

const foo = function () {
  console.dir(this);
};

// 동일한 함수도 다양한 방식으로 호출할 수 있다.

// 1. 일반 함수 호출
// foo 함수 내부의 this는 전역 객체 window를 가리킨다.
foo(); // window

// 2. 메서드 호출
// foo 함수를 프로퍼티 값으로 할당하여 호출
// foo 함수 내부의 this는 메서드를 호출한 객체 obj를 가리킨다.
const obj = { foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
// new 연산자 이용
// foo 함수 내부의 this는 생성자 함수가 생성한 인스턴스를 가리킨다.
new foo(); // foo {}

// 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
// foo 함수 내부의 this는 인수에 의해 결정된다.
const bar = { name: 'bar' };

foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

일반 함수 호출

기본적으로 this에는 전역 객체가 바인딩

• 중첩함수를 일반 함수로 호출 this에는 전역 객체가 바인딩

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

• 다만, 객체를 생성하지 않는 일반 함수에서 this는 의미가 없다

• If the object is not specified, functions in strict mode will return undefined and functions in normal mode will return the global object (window)

function foo() {
  'use strict'; // 객체 생성을 제한하는거 같음 (older version compatibility 위해 사용)

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

콜백 함수 내부의 this는 전역 객체가 바인딩된다

var value = 1;

const obj = {
  value: 100,
  foo() {
    console.log("foo's this: ", this); // {value: 100, foo: ƒ}
    // 콜백 함수 내부의 this에는 전역 객체가 바인딩된다.
    setTimeout(function () {
      console.log("callback's this: ", this); // window
      console.log("callback's this.value: ", this.value); // 1
    }, 100);
  }
};

obj.foo();

• 콜백 함수 내부에서 obj 객체 참조를 위한 임시? 해법

var value = 1;

const obj = {
  value: 100,
  foo() {
    // this 바인딩(obj)을 변수 that에 할당한다.
    const that = this;

    // 콜백 함수 내부에서 this 대신 that을 참조한다.
    setTimeout(function () {
      console.log(that.value); // 100
    }, 100);
  }
};

obj.foo();

콜백 함수를 위한 명시적으로 바인딩

var value = 1;

const obj = {
  value: 10,
  foo() {
    // 콜백 함수에 명시적으로 this를 바인딩한다.
    setTimeout(function () {
      console.log(this.value); // 10
    }.bind(this), 100);
  }
};

obj.foo();

화살표 함수 내부의 this는 상위 스코프 this를 가리킨다

var value = 1;

const obj = {
  value: 100,
  foo() {
    // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
    setTimeout(() => console.log(this.value), 100); // 100
  }
};

obj.foo();

메서드 호출

메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다

const person = {
  name: 'Lee',
  getName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.
    return this.name;
  }
};

// 메서드 getName을 호출한 객체는 person이다.
console.log(person.getName()); // Lee

const person = {
  name: 'Lee',
  getName() {
    return this.name;
  }
};

const anotherPerson = {
  name: 'Kim'
};

anotherPerson.getName = person.getName;
// getName 메서드를 호출한 객체는 anotherPerson이다.
console.log(anotherPerson.getName()); // Lee? Kim?
const getName = person.getName;

// getName 메서드를 일반 함수로 호출
console.log(getName()); // ''
// 일반 함수로 호출된 getName 함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
// 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
// Node.js 환경에서 this.name은 undefined다.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

const me = new Person('Lee');

// getName 메서드를 호출한 객체는 me다.
console.log(me.getName()); // ① Lee

Person.prototype.name = 'Kim';

// getName 메서드를 호출한 객체는 Person.prototype이다.
console.log(Person.prototype.getName()); // ② Kim

console.log(me.getName()); 

생성자 함수 호출

• new 를 작성하지 않으면, 생성자 함수로 동작하지 않고 일반적인 함수 호출이 된다.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle3 = Circle(15);
console.log(circle3); 
console.log(radius); 

Function.prototype.aplly/call/bind 메서드에 의한 간접 호출

• aplly/call/bind 차이?

  • aplly/call 의 본질적인 기능은 함수를 호출하는 것

  • [링크] Call is a function that helps you change the context of the invoking function. In layperson's terms, it helps you replace the value of this inside a function with whatever value you want.

    • 안에 this를 변경

  • Apply is very similar to the call function. The only difference is that in apply you can pass an array as an argument list.

  • Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.

• aplly/call/bind 는 Function.prototype 의 메서드이다. 즉, 디폴트 상속이기에 모든 함수가 사용 가능.

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

console.log(getThisBinding()); // window

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
console.log(getThisBinding.apply(thisArg)); // {a: 1}
console.log(getThisBinding.call(thisArg)); // {a: 1}

아래처럼 apply/call 사용시, thisArg를 호출한 함수의 this 에 바인딩 한다.

• 궁금, apply랑 call 비슷하면 배열까지 넘길수있는 apply 만 사용하면 되는거 아닌가?

// 22-20
function getThisBinding() {
  console.log(arguments);
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
// apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.
console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

// call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.
console.log(getThisBinding.call(thisArg, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

// 22-21
function convertArgsToArray() {
  console.log(arguments);

  // arguments 객체를 배열로 변환
  // Array.prototype.slice를 인수없이 호출하면 배열의 복사본을 생성한다.
  const arr = Array.prototype.slice.call(arguments);
  // const arr = Array.prototype.slice.apply(arguments);
  console.log(arr);

  return arr;
}

convertArgsToArray(1, 2, 3); // [1, 2, 3]

bind는 apply/call 과 달리 함수를 호출하지 않는다. 첫번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.

// 22-22
function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// bind 메서드는 첫 번째 인수로 전달한 thisArg로 this 바인딩이 교체된
// getThisBinding 함수를 새롭게 생성해 반환한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)()); // {a: 1}

bind는 메서드의 this 메서드와 내부의 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결해주기도 한다.

// Before
// 22-23
const person = {
  name: 'Lee',
  foo(callback) {
    // ①
    setTimeout(callback, 100);
  }
};

person.foo(function () {
  console.log(`Hi! my name is ${this.name}.`); // ② Hi! my name is .
  // 일반 함수로 호출된 콜백 함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
  // 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
  // Node.js 환경에서 this.name은 undefined다.
});


// After
// 해결
// 22-24
const person = {
  name: 'Lee',
  foo(callback) {
    // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    setTimeout(callback.bind(this), 100);
  }
};

person.foo(function () {
  console.log(`Hi! my name is ${this.name}.`); // Hi! my name is Lee.
});

추가 참고 자료

• https://ko.javascript.info/constructor-new