Object.create사용과 사용하지 않았을 때의 차이를 보여주는 예시가 필요합니다.

Question

SubClass.prototype = Object.create(SuperClass.prototype); 과SubClass.prototype = uperClass.prototype;의 차이를 보여주는 예시를 대강 예상하여 작성하였습니다.function SuperClass() { this.a = 1; this.b = 2;}SuperClass.prototype.sum = function() { return this.a + this.b;};function SubClass1() { this.a = 3; this.b = 4;}// SubClass1의 prototype을 Object.create(SuperClass.prototype)로 설정SubClass1.prototype = Object.create(SuperClass.prototype);SubClass1.prototype.constructor = SubClass1; //Object.create써도 생성자는 SuperClass로 명시되니 바꿔주는 작업const sub1 = new SubClass1();console.log('sub1.sum() (Object.create):', sub1.sum()); // 3 + 4 = 7// SubClass1의 prototype을 SuperClass.prototype을 직접 참조로 설정function SubClass2() { this.a = 5; this.b = 6;}SubClass2.prototype = SuperClass.prototype;const sub2 = new SubClass2();console.log('sub2.sum() (direct reference):', sub2.sum()); // 5 + 6 = 11// SuperClass의 sum 메서드를 변경SuperClass.prototype.sum = function() { return this.a * this.b; // 이제 곱셈으로 변경};console.log('sub1.sum() (Object.create after change):', sub1.sum()); // 3 + 4 = 7 (변경되지 않음)console.log('sub2.sum() (direct reference after change):', sub2.sum()); // 5 * 6 = 30 (변경됨)이때, 실제 결과의 경우 SuperClass.prototype.sum이 변경되었을 때 sub1은 변경 이전 값이 나올 줄 알았는데 예상이 틀렸습니다. 다른 객체로 저장되어 변경이 없을 줄 알았는데 변경이 된 이유와 SubClass1.prototype = Object.create(SuperClass.prototype);와 SubClass1.prototype = SuperClass.prototype; 의 다른 점을 보여주는 예시를 알고 싶습니다.

무드득 · Answer

Object.create(SuperClass.prototype)는 단순히 SuperClass.prototype을 참조하는 새로운 객체를 만들어서 SubClass1.prototype에 할당하는 겁니다. 그러니까 SuperClass.prototype 안의 메서드나 프로퍼티를 내부적으로 여전히 참조하고 있습니다. 그래서 SuperClass.prototype.sum을 나중에 바꾸면 sub1.sum()/sub2.sum() 도 그 영향을 받습니다.하지만 SubClass1.prototype과 SuperClass.prototype은 서로 다른 객체입니다. Object.create()를 이용해서 새로운 객체를 만들었으니까 주소값이 다르죠. 그래서 SubClass1.prototype !== SuperClass.prototype는 true가 나옵니다. 하지만 SubClass1.prototype.__proto__는 SuperClass.prototype을 가리키고 있어서 참조가 같다는 점에서는 true가 나와요.이해가 안되시면 프로토타입 체이닝에 대해서 더 찾아보시면 이해하기 쉬우실겁니다.

월급은나의빛 · Answer

두번째 방식의 문제는 subclass 변경으로 인해 superclass가 영향을 받는다는 것입니다. 그래서는 제대로 된 상속이라고 말할 수 없죠.다음의 예제를 돌려 보십시오.function SuperClass() { this.a = 1; this.b = 2; } SuperClass.prototype.sum = function () { return this.a + this.b; }; SuperClass.prototype.multiply = function () { return this.a * this.b; }; function SubClass1() { this.a = 3; this.b = 4; } // SubClass1의 prototype을 Object.create(SuperClass.prototype)로 설정 SubClass1.prototype = Object.create(SuperClass.prototype); SubClass1.prototype.constructor = SubClass1; //Object.create써도 생성자는 SuperClass로 명시되니 바꿔주는 작업 function SubClass2() { this.a = 5; this.b = 6; } // SubClass1의 prototype을 SuperClass.prototype을 직접 참조로 설정 SubClass2.prototype = SuperClass.prototype; // SubClass1 은 sum 을 바꾸고, SubClass2 는 mul을 바꾼다 // SubClass1 의 mul 과 SubClass2 의 sum 은 // 별도 정의하지 않았으므로 SuperClass에서 정의된 것이 사용된다. SubClass1.prototype.sum = function() { return this.a + this.b + 10; } SubClass2.prototype.multiply = function() { return this.a * this.b * 10; } const sub1 = new SubClass1(); console.log('sub1.sum() :', sub1.sum()); // 10을 더 더한 값 console.log('sub1.multiply() :', sub1.multiply()); // super 구현 (원래 곱??) const sub2 = new SubClass2(); console.log('sub2.sum() :', sub2.sum()); // super 구현 (원래 합) console.log('sub2.multiply() :', sub2.multiply()); // 10을 더 곱한 값이걸 돌려보면 결과는 이렇습니다.sub1.sum() : 17 sub1.multiply() : 120 <---- 여기에 주목! 12가 아니라 120임 sub2.sum() : 11 sub2.multiply() : 300SubClass2와 같은 방식으로 상속받으면 subclass 의 변경이 superclass 에 영향을 줍니다. sub1 에서 multiply 를 재정의하지 않았음에도 불구하고 SubClass2에서의 변경으로 인해 multiply 함수가 바뀌었습니다.

Object.create사용과 사용하지 않았을 때의 차이를 보여주는 예시가 필요합니다.

2개의 답변

기술 목록