JS 객체 지향 프로그래밍 : 객체와 클래스

TS에서 class를 사용하는 방법은 아래 포스트를 참고합시다.

(https://darrengwon.tistory.com/527?category=867626)

 

- 간단한 배열과 객체의 반복문

주의할 점은, 반복문에서 member.name을 할 경우 undefined을 출력하므로 member[name]으로 입력해줘야 함

// 배열
const a = [1, 3, 57, 8];
let i = 0;
while (i < a.length) {
  console.log(i);
  i++;
}

// 객체
const member = {
  manager: "deluze",
  client: "jijek"
};
for (let name in member) {
  console.log(name, member[name]);
}

 

- this

this를 호출한 곳을 말한다. 아래 예제에서는 객체 내부에서 this를 호출했으므로 human 객체를 말한다. 그런데 화살표 함수에서는 this가 function과 다르다. function 키워드로 생성한 일반 함수와 화살표 함수의 this는 다르므로 주의하자.

const human = {
  name: "lalalal",
  age: "204",
  score1: 35000,
  score2: 5000,
  sum: function() {
    return this.score1 + this.score2;
  }
};

console.log(human.sum());

 

- prototype

사전적으로 원형이라는 의미를 가지며, 생성자 함수의 외부에 지정하지만 생성자 함수로 만든 모든 객체가 접근 가능하다.

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

Person.prototype.sum = function() {
  return this.first + this.second;
};

var kim = new Person("kim", 10, 20);
var lee = new Person("lee", 10, 10);

kim.sum = () => "change!"; // kim의 function만 변경 가능

console.log(kim.sum());
console.log(lee.sum());

 

- class와 class 상속

OOP에 속했던 파이썬의 클래스를 떠올리면 아주 쉽다! JS도 class를 쓸 수 있기 때문이고 class의 구조는 다 비슷하니 쉽게 익힐 수 있다. 주의할 점은 생성자 함수는 대문자로 시작하는 코딩 컨벤션을 지키라는 것.

class Human {
   //생성자 함수는 반드시 대문자로 시작해야 함
  constructor(name, nationality) {
    //constructior는 일종의 __init__
    this.name = name;
    this.nationality = nationality;
  }
}

const me = new Human("darren", "korea"); //인스턴스 생성

console.log(me);

constructor는 python으로 치자면 __init__ 같은 것.

또한, 새 인스턴스를 생성할 때 new를 붙여주는 것을 잊지 말아라.

 

한편 React에서 class를 사용할 때 extends React.component를 했던 것처럼 확장이 가능하다.

 

class Human {
  constructor(name, nationality) {
    this.name = name;
    this.nationality = nationality;
  }
  sayName() {
    console.log(`My Name is ${this.name}`);
  }
}

class Baby extends Human {
  cry() {
    console.log("waaaaaa");
  }
}

const phony = new Baby("dora", "korea");

phony.cry();
phony.sayName();

 

- super

React에서 class 컴포넌트를 사용할 때 constructor()에서 super를 종종 사용하는 것을 경험했을 것이다. super는 서브(자식) 클래스에서 상위 클래스를 호출할 때 사용합니다. 상위(부모) 클래스의 내용을 다시 타이핑할 필요 없이 사용하는 것입니다. super()은 부모클래스의 constructor 즉, 생성자로서의 역할을 수행하며 super. 은 부모클래스 자체를 의미하며 super.<무엇>에서 <무엇>에는 부모클래스의 키 값이나 메서드가 올 수 있습니다.

 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum() {
    return this.first + this.second;
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    super(name, first, second);
    // 상속한 Persion의 내용을 모두 가져옵니다. 아래 내용을 재작성하는 것과 같습니다
    // this.name = name;
    // this.first = first;
    // this.second = second;
    
    this.third = third; // 자식 클래스에서 새로 만든 내용을 작성합니다.
  }
  sum() {
    return super.sum() + this.third; // super를 통해 부모 클래스의 함수를 가져옵니다.
  }
  avg() {
    return (this.first + this.second + this.third) / 3;
  }
}

var kim = new PersonPlus("kim", 10, 20, 30);

console.log(kim.sum());
console.log(kim.avg());