남현준 질문

• 아래의 예시 코드를 확인해주세요.

  const Actors = function () {
    const args = Array.prototype.slice.call(arguments);
    for (let i = 0; i < args.length; i++) {
      this[i] = args[i];
    }
    this.length = args.length;
  };
  Actors.prototype = ["이병헌", "정우성", "이정재"];
  const star = new Actors("송강호");
  console.log(star);      // Array { '0': '송강호', length: 1 }
  
  star.push("최민식");
  console.log(star);      // Array { '0': '송강호', '1': '최민식', length: 2 }
  
  delete star.length;
  star.push("강동원");
  console.log(star);      // Array { '0': '송강호', '1': '최민식', '3': '강동원', length: 4 }
  

  • 인스턴스 star의 length 속성을 제거한 이후 push 연산을 수행했을 때, length의 값이 4가 된 이유는 무엇인가요?

  A: star.proto, 즉 Actors.prototype이 [’이병헌’, ‘정우성’, ‘이정재’] 라는 length가 3인 배열을 가리키고 있었기 때문에 star.push(강동원)을 했을 때, 엔진이 star.length를 읽지 못하고, 프로토타입 체이닝을 타고 star.proto.length를 읽어왔다. 즉, 3인 배열에서 legnth가 +1 된 걸로 동작하게 됨.

  • 위와 같은 상황에서, 프로토타입을 활용해 클래스를 구현하고자 할 때 클래스가 구체적인 데이터를 지니지 않게 추상화하는 방법에는 어떤 것들이 있는지 설명해주세요.
    • 위의 상황에서 클래스가 구체적인 데이터를 지니지 않게 추상화하는 방법으로는
      1. delete 해주고 더는 새로운 프로퍼티를 추가할 수 없게 freeze 거는 방법도 있고
      2. ‘Actors’ 라는 클래스를 정의하고 생성자를 사용하여 초기 데이터를 설정한 후
         1. 추가, 제거, length 셈을 동작해주는 메서드를 만들어 클래스 내부에 정의하고, 데이터 및 동작을 캡슐화 해준다.
         2. 이런 방식도 있다.?

이영욱 질문

• 클래스에서 프로토타입 메서드와 스태틱 메서드를 호출하는 주체를 this와 연관지어 설명해주세요.

A:

var Rectangle = function (width, height) {
	this.width = width;
	this.height = height;
} // 생성자

Rectangle.prototype.getArea = function(){
	return thios.width * this.height;
} // (프로토타입 메서드)
프로토 타입 객체에 할당한 메서드는 인스턴스가 마치 자신의 것처럼 호출할 수 있다.

Rectangle.isRectangle = function(instance){
	return instance instanceof Rectangle && instance.width > 0 && instance.height > 0;
} // (스태틱 메서드)

프로토타입 메서드는 인스턴스에서 직접 호출할 수 있는 메서드라고도 생각할 수 있는데, 
예를 들어,

var rect1 = new Rectangle(3, 4)
console.log(rect1.getArea()); // 12  (O)
이런 코드에서, getArea는 실제로 rect1.__proto__.getArea에 접근하고,이때 __proto__가
생략됐기 때문에, this가 rect1인 채로 실행이 된다.

console.log(rect1.isRectangle(rect1)); // TypeError
이 코드에서는
rect1 인스턴스에서 isRectangle이라는 메서드에 접근하려고 하는데,
rect1에 해당 메서드가 없고, rect1.__proto__에도 없고, 그 뒤에도 쭉 없다.(프로토타입 체이닝)
결국 undefined를 실행하게 되고, 함수가 아니어서 실행할 수 없기에 typeError가 발생.

이렇게 인스턴스에 직접 접근할 수 없는 메서드 === 스태틱 메서드라고 하고
스태틱 메서드를 호출하기 위해서는?

console.log(Rectangle.isRectangle(rect1)); // true

생성자 함수를 this로 해야만 호출할 수 있다.

김특희 질문

• 스태틱 메서드와 인스턴스 메서드의 차이는 무엇인가요? 그리고 자바스크립트에서는 왜 ‘인스턴스 메서드’라는 용어보다 ‘프로토타입 메서드’라는 용어를 쓰는 것이 더 권장될까요?

A:

인스턴스에 상속되는지의 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉘게 된다.

이것은 클래스 입장에서 사용 대상에 따라 구분한 것이다.

js에서는 인스턴스에서도 직접 메서드를 정의할 수 있기 때문에 ‘인스턴스 메서드’라는 명칭은 프로토타입에 정의한 메서드를 지칭하는 것인지 인스턴스에 정의한 메서드를 지칭하는 것인지 헷갈릴 여지가 있다. 따라서, 프로토타입 메서드라고 부르는 것을 더 권장한다.

어준혁 질문

• class의 개념과 사용시 장점을 설명해주세요.

A:

우선 ES5 이하에는 클래스가 없이, 객체형, 클로저, 생성자, 프로토타입 등을 이용해서 클래스의 유사한 구조를 흉내냈다.

하지만 ES6에서는 클래스를 적극적으로 지원하였고, 사실 상속은 아니지만, 프로토타입 체이닝에 의한 참조로 객체 내부의 요소들이 인스턴스에 ‘상속’된다고 볼 수 있다.

장점으로는: 접근 제어가 용이하다는 점이 있고, 객체의 선언부와 정의부가 분리되기 때문에 가독성이 좋다.

최재훈 질문