CLASS

function Person(name, age){
    this._name = name;
    this._age = age;
}
// static method
Person.getInformations = function(instance){
    return{
        name: instance._name,
        age: instance._age
    };
}
// (prototype) method
Person.prototype.getName = function(){
    return this._name;
}
// (prototype) method
Person.prototype.getAge = function(){
    return this._age;
}

var injae = new Person('InJaEE', 20);

console.log(injae.getName()); // OK
console.log(injae.getAge()); // OK

console.log(injae.getInformations(injae)) // ERROR
console.log(Person.getInformations(injae)); // OK

메소드 상속 및 동작 원리

• 2개의 인스턴스 생성

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


var injae = new Person('InJaEE', 20);  
var iu = new Person('IU', 20);

injae.setOlder = function(){  
this.age += 1;  
}  
injae.getAge = function(){  
return this.age;  
}  
iu.setOlder = function(){  
this.age += 1;  
}  
iu.getAge = function(){  
return this.age;  
}

• 반복을 줄이기 위해 prototype 사용

function Person(n, a){
  this.name = n;
  this.age = a;
}
Person.prototype.setOlder = function(){
  this.age +=1;
}
Person.prototype.getAge = function(){
  return this.age;
}

var injae = new Person('InJaEE', 20);  
var iu = new Person('IU', 20);

// this가 injae가 아니라 injae.__proto__를 가리키기 때문에 원하는 결과를 얻을 수 없다  
injae.__proto__.setOlder();  
injae.__proto__.getAge(); // NaN

// __proto__는 생략이 가능하기 때문에 마치 자신의 것처럼 호출할 수 있게 해준다.  
injae.setOlder();  
injae.getAge(); // 21

// 생성자 함수의 property에 age가 존재한다면  
Person.prototype.age = 100;  
injae.__proto__.setOlder();  
injae.__proto__.getAge(); // 101  
injae.setOlder();  
injae.getAge(); // 21  

Prototype

• Constructor가 new 연산자를 통해 instance를 생성하면 Constructor의 prototype이 instance에 proto라는 이름으로 전달된다.

• 생성자 함수의 prototype과 instance의 proto는 같은 객체를 참조한다.

• proto는 내부 property에 접근할때 생략할 수 있다.

  

• 생성자 함수의 prototype에 접근하는 방법

  • [instance].__proto__
  • [instance]
  • Object.getPrototypeOf([instance])
  • [CONSTRUCTOR].prototype

• 생성자 함수에 접근하는 방법

  • [CONSTRUCTOR]
  • [instance].__proto__.constructor
  • [instance].contructor
  • (Object.getPrototypeOf([instance])).constructor
  • [CONSTRUCTOR].prototype.constructor

Closure로 Private Member 만들기

• 지역변수의 이점

  • 외부로부터의 접근을 제한한다.
  • 전역스코프의 변수를 최소화한다.

• Closure를 활용하여 PrivateMember와 PublicMember를 구분하는 방법

  • 함수에서 지역변수 및 내부함수 등을 생성한다.
  • 외부에 노출시키고자 하는 멤버들로 구성된 객체를 return한다.
    • return한 객체에 포함되지 않은 멤버들은 private하다.
    • return한 객체에 포함된 멤버들은 public하다.

• 함수 내부에서 다시 함수를 return하면 그 함수는 최초 선언된 정보를 유지하기 때문에 외부에 노출하고자하는 데이터들만 return한다.

  • return하지 않은 데이터들은 외부에서의 접근을 제한할 수 있다.(접근 권한 제어)
  • 접근이 제한되기 때문에 지역변수를 안전하게 보호할 수 있다.(지역변수 보호)
  • 외부에게 지역변수의 변경 권한을 부여함으로써 데이터를 활용할 수 있다.(데이터 보존 및 활용)

• PrivateMember를 활용하지 않았을때

let car = {  
    fuel: 10,  
    power: 2,  
    total: 0,  
    run: function(km){
        let wasteFuel = km / this.power;  
        if(this.fuel < wasteFuel){  
            console.log('이동 불가');  
            return;  
        }  
        this.fuel -= wasteFuel;  
        this.total += km;  
    }  
}  
// car.fuel = 1000;  
// car.power = 10;  
// 접근이 가능하다.

• PrivateMember를 활용했을때

let createCar = function(f, q){
  let fuel = f;
  let power = p;
  let total = 0;
  return{
    run: function(km){
      let wasteFuel = km / power;
      if(fuel < wasteFuel){
        console.log('이동 불가');
        return;
      }
      fuel -= wasteFuel;
      total += km;
    }
  }
};
const car = createCar(10, 2);
// fuel, power, total에 접근할 수 없다.

CLOSURE

• 클로저란 함수 내부에서 생선한 데이터와 그 유효범위로 인해 발생하는 특수한 현상/상태이다.
• Scope와 밀접한 관계가 있다.
• 클로저의 사전적 의미 : 닫혀있음, 폐쇄성, 완결성
• 외부에 정보를 제공할 수 있는 유일한 수단은 return
• 함수를 return하더라도 그 함수를 최초 선언할때의 scope와 환경정보는 변하지 않는다.
• 클로저의 핵심 : 최초 선언시의 정보를 유지한다!!!
• 클로저를 활용하면 얻을 수 있는 이점
  • 접근 권한 제어
  • 지역변수 보호
  • 데이터 보존 및 활용

This

• 전역공간에서

  • window/global
  • 브라우저에서는 window, Nodejs에선 global이 나온다.

• 함수 내부에서

  • window/global
  • 함수 내부에서 this는 기본적으로 window를 가리킨다. Default가 window라는 의미이며 바뀔수있다.

• 메소드 호출시

  • 메소드 호출 주체(메소드명 앞)

  • 메소드명 바로 앞에있는 '.'까지가 this이다.

  • 함수는 (전역객체의) 메소드다!(라고 생각하면 편하다.) 앞에 무언가가 있으면 그것이 this이고 없으면 전역객체가 this이다.('window.' 혹은 'global.'이 생략되었다고 생각하자.)

  • 내부함수에서의 우회법

var a = 10;
var obj = {
  a: 20,
  b: function(){
    console.log(this.a); // 메소드이기때문에 20 

    function c(){
      console.log(this.a); // 함수이기때문에 10
    }
    c();
  }
}
obj.b();

// 스코프체인을 이용해 우회하는 방법  
var a = 10;  
var obj = {  
a: 20,  
b: function(){  
var self = this; // obj가 담긴다.  
console.log(this.a); // obj.a = 20


    function c(){
        console.log(self.a); // obj.a = 20
    }
    c();
}


}  
obj.b():

• callback에서
  • 기본적으로는 함수의 this와 같다.
  • 제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다.
  • 개발자가 this를 바인딩한 채로 callback을 넘기면 그에 따른다.
  • call, apply, bind 등의 방식을 이용해서 다른 대상을 this로 바인딩할 수 있다.
  • call, apply. bind 메소드에 대하여

function a(x, y, z){
  console.log(this, x, y, z);
}
var b = {
  c: 'eee'
};

a.call(b, 1, 2, 3); // func.call(thisArg[, arg1[, ard2[, ...]]])  
a.apply(b, [1, 2, 3]); // func.apply(thisArg, [argsArray])

var c = a.bind(b); // func.bind[, arg1[, arg2[, ...]]])  
c(1, 2, 3);

var d = a.bind(b, 1, 2);  
d(3);

/*  
결과는 4개 모두 같다  
Object {c: "eee"} 1 2 3  
*/

• 생성자 함수에서
  • 인스턴스

Callback

• "something will call this function back sometime somehow"
• 무언가가 이 콜백함수를 언제, 어떤 방식이던 실행해서 다시 돌려줄거야.
• 제어권을 넘겨준다 어떻게 처리할지는 제어권을 받은 대상에게 달려있다.
• 콜백함수의 특징
  • 다른 함수(A)의 매개변수로 콜백함수(B)를 전달하면, A가 B의 제어권을 갖게 된다.
  • 특별한 요청(bind)이 없는 한 A에 미리 정해진 방식에 따라 B를 호출한다.
  • 미리 정해진 방식이란 this에 무엇을 바인딩할지, 매개변수에는 어떤 값들을 지정할지, 어떤 타이밍에 콜백을 호출할지 등이다.
• 콜백함수는 메소드가 아니라 함수이다!

METHOD

• 함수처럼 생겼는데 앞에 '.'이 붙어있으면 메소드라고 생각하면 된다.
• 함수와 메소드의 차이점은 this를 바인딩 하나, 안하나의 차이. 메소드는 this를 바인딩한다.
• 메소드의 '.' 앞에가 this.