Inheritance Pattern은 정말 어렵다.
이부분에 대해서 socrative 문제가 나갔는데 참 힘들었다.
그래서 오늘은 socrative 복습을 할겸 풀이를 하려고 한다.
방법 1과방법 2의 차이점에 대해서 서술하라.
방법 1 : Student.prototype = Person.prototype
방법 2 : Student.prototype = Object.create(Person.prototype)
방법 1같은 경우는 Student.prototype에 Person.prototype을 할당한 것이고,
방법 2는 Student.prototype = Object.create(Person.prototype)는 Student.prototype이 Person.prototype의 속성을 갖는 새 객체로 만들어진 것이다.
여기서 방법 1은 말 그대로 주소값을 할당했기 때문에 Student의 prototype이 변경되면 Person의 prototype이 변경되는 문제점이 있다.
그래서 방법 2처럼 Object.create()를 써서 특성을 상속받으면서도 상황에 맞게 이용할 수 있도록 만든다.
Object.create()를 사용한 이유는 새로운 객체로 만들었기 때문에 더이상 Person과 같은 객체를 참조하지 않아서 변경을 한다해도 서로 아무런 영향이 없기 때문이다.
- 다음 코드의 결과는 무엇인가?
function Person(name) {
this.name = name;
};
function Student(name) {
this.name = name;
};
Student.prototype = Person.prototype;
Student.prototype.hello = function() {
console.log("hello, world")
};
const human = new Person();
human.hello()여기서 주목해야할 점은 Student.prototype = Person.prototype; 이 부분이다.
1번 문제에서 Student.prototype에 Person.prototype을 할당했다고 설명한 바가 있다.
여기서 Studen.prototype.hello에 function()을 함으로써 함수 표현식을 사용하여 hello, world가 나오게끔 함수를 걸었다.
그리고 human으로 선언해 Person()이라는 새 함수를 걸었다.
여기서 function person(name)이 먼저 실행되는데, Student.prototype = Person.prototype;을 할당해주었으므로, human은 Person이 된다.
그래서 그 뒤로는 Person.prototype에 기반하여 실행이 된다.
그렇게 human.hello()를 실행한 결과 "hello, world"가 나왔다.
- 다음 코드의 결과는 무엇인가?
function Person(name) {
this.name = name;
};
function Student(name) {
this.name = name;
};
Student.prototype = Object.create(Person.prototype);
Student.prototype.hello = function() {
console.log("hello, world")
};
const human = new Person();
human.hello()이번 문제는 2번 문제와는 달리 Object.create를 쓴 케이스다.
Student.prototype은 prototype을 사용할 객체 Person.prototype를 전달하여 새 객체로 만들었다.
그렇기 때문에 더 이상 human은 Person이지, Student가 아니다.
그래서 human.hello()를 함수로 인식하지 못하기 때문에 TypeError가 나오는 것이다.
- 다음 코드의 결과는 무엇인가?
function Person(name) {
this.name = name;
};
function Student(name) {
this.name = name;
};
Student.prototype = Object.create(Person.prototype);
const kali = new Student();
kali.__proto__.constructor3번 문제와 비슷하나 특이한 점은 const kali = new Student();라고 하고 kali.__proto__.constructor를 쓴 것이다.
여기서 __proto__란 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.
Student.prototype은 prototype을 사용할 객체 Person.prototype를 전달하여 새 객체로 만들었는데, kali는 Student라고 했다.
그러므로 kali.__proto__.constructor는 Student가 인스턴스화 되는 순간 호출되는 생성자라고 할 수 있다.
따라서 kali.__proto__.constructor를 실행하게 되면 상위 프로토타입 객체인 Person이 나오게 되는 것이다.
- 다음 코드의 결과는 무엇인가?
function A() {
this.name = "A";
}
function B() {
this.name = "B";
}
function C() {
this.name = "C";
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;
A.prototype.sayHi = function() { console.log("Hello, walli") };
B.prototype.sayHi = function() { console.log("hi") };
const a = new A();
const b = new B();
const c = new C();
c.sayHi()여기서 쉽게 생각하면 된다.
B의 상위 prototype 객체는 A이고,
C의 상위 prototype 객체는 B이다.
c.sayHi()는 C의 상위 Prototype 객체 B를 참조하기 때문에 B.prototype.sayHi = function() { console.log("hi") };를 실행한 결과인 "hi"가 나오는 것이다.
다음 6번부터 10번까지의 문제는 아래의 코드에 대한 것이다.
function A() {
this.name = "A";
}
function B() {
this.name = "B";
}
function C() {
this.name = "C";
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;
A.prototype.sayHi = function() { console.log("Hello, walli") };
B.prototype.sayHi = function() { console.log("hi") };
const a = new A();
const b = new B();
const c = new C();c instanceof B의 결과는?true이다.
c 객체가 B.prototype 체인에 상속되어 있기 때문이다.
여기서
instanceof는 생성자의 객체가 특정 클래스에 속하는지 아닌지, 그 상속 관계를 확인해준다.
-
b instanceof C의 결과는?false이다.
b 객체는 반대로 C.prototype 체인에 상속되어 있지 않다. -
c instanceof A의 결과는?true이다.
c 객체는 B.prototype 체인에 상속되면서, A.prototype 체인에도 상속되어 있기 때문이다. -
b instanceof A의 결과는?true이다.
b 객체는 A.prototype 체인에 상속되어 있다. -
a instanceof B의 결과는?false이다.
a 객체는 반대로 B.prototype 체인에 상속되어 있지 않다. -
다음 코드의 결과의 순서는?
function Person (name) {
this.name = name;
}
function Student (name, age) {
Person.call(this, name);
this.age = age;
}
function CoolStudent (name, age, hairColor) {
Student.apply(this, [name, age]);
this.hairColor = hairColor;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
CoolStudent.prototype = Object.create(Student.prototype);
CoolStudent.prototype.constructor = CoolStudent;
const human_1 = new Person('walli');
const human_2 = new Student('kali', 26);
const human_3 = new CoolStudent('moli', 20, 'pink');
console.log( human_2.name )
console.log( human_3.age )
console.log( human_2.hairColor )쉽다.
human_2의 name은 'kali'가 되고,
human_3의 age는 20이다.
그리고 주의할점이 있다!
human_2의 hairColor는 선언된바가 없다. 그러므로 undefined가 나온다.
따라서 'kali'/20/undefined 가 된다.
