• this
    • use stric
  • constructor
    • new 생성자(인자)
  • prototype


this

  • this 키워드는 기본적으로 전역객체(브라우저에서는 window)와 같다.
  • 전역 문맥에서 this는 use strict여부에 관계없이 전역 객체를 참조한다.
// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"


  • 함수 문맥에서 this의 값은 함수 호출법에 따라 달라진다.
  • 단순호출(use strict가 아닌 경우)
    • this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역객체를 참조


function f1() {
  return this;
}

// 브라우저
f1() === window; // true


  • use strict인 경우
    • this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 this는 undefined로 남아있다.
    • f2()를 객체의 매서드나 속성(ex. window.f2())로써가 아닌 직접 호출했기 때문에 this는 undefined.


function f2(){
  "use strict"; 
  return this;
}

f2() === undefined; // true

window.f2() === undefined //false


  • this의 값을 한 문맥에서 다른 문맥으로 넘기려면 call()이나 apply()를 사용한다.
// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = 'Global';

function whatsThis() {
  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj);  // this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.


constructor

  • class 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드
  • 클래스는 constructor라는 이름을 가진 특별한 메서드를 하나씩만 가질 수 있다.
    • 두 개 이상의 constructor 메서드는 SyntaxError를 유발
  • new를 붙이고 함수처럼 호출, 객체를 생성하는 함수를 생성자 함수라고 부른다.


function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    alert(this.name + ' said "hello"');
  }
  this.... // 사람의 속성과 메소드를 더 정의할 수 있음
}


  • 사용방법 : new 생성자(인자)
var boka = new Person('Boka', '25');
boka.sayHello(); //'Boka said Hello'


prototype

  • Person의 prototype 객체에 sayHello라는 메소드를 넣으면 Person 생성자로 만든 모든 객체는 이 메소드 사용이 가능
  • this.sayHello보다 prototype에 Person.prototype.sayHello로 넣는 게 더 효율적
    • this에 넣은 것은 객체 하나를 만들 때마다 메소드도 하나씩 만들어지기 때문에 불필요한 메모리 낭비가 발생하기 때문


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

Person.prototype.sayHello = function() {
  console.log(this.name + ' said "hello"');
};


참고