자바 스크립트 상속 : Object.create vs new

JavaScript에서이 두 예제의 차이점은 무엇입니까?

전제 조건 :

function SomeBaseClass(){
}

SomeBaseClass.prototype = {
    doThis : function(){
    },

    doThat : function(){
    }
}

Object.create를 사용한 상속 예제 A :

function MyClass(){
}

MyClass.prototype = Object.create(SomeBaseClass.prototype);

새 키워드를 사용한 상속 예 B

function MyClass(){
}

MyClass.prototype = new SomeBaseClass();

두 예제 모두 같은 일을하는 것 같습니다. 언제 다른 것을 선택하겠습니까?

추가 질문 : 함수 자체 생성자에 대한 참조가 프로토 타입에 저장되는 아래 링크 (15 행)의 코드를 고려하십시오. 이것이 왜 유용합니까?

https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js

발췌 (링크를 열지 않으려는 경우) :

THREE.ImageLoader.prototype = {

    constructor: THREE.ImageLoader
}

귀하의 질문에서 귀하는 Both examples seem to do the same thing, 전혀 사실이 아닙니다.

첫 번째 예

function SomeBaseClass(){...}
SomeBaseClass.prototype = {
    doThis : function(){...},
    doThat : function(){...}
}
function MyClass(){...}
MyClass.prototype = Object.create(SomeBaseClass.prototype);

이 예에서, 당신은 단지 상속하고 SomeBaseClass' prototype있지만 SomeBaseClass같은 속성이 있다면 어떨까요 ?

function SomeBaseClass(){ 
    this.publicProperty='SomeValue'; 
}

그리고 당신이 그것을 사용한다면

var obj=new MyClass();
console.log(obj.publicProperty); // undefined
​console.log(obj);​

obj개체가 없습니다 publicProperty같은 속성을 이 예제 .

두 번째 예

MyClass.prototype = new SomeBaseClass();

constructor함수를 실행 SomeBaseClass하고 전체 SomeBaseClass개체 의 인스턴스를 만들고 상속 합니다. 그래서, 당신이 사용한다면

    var obj=new MyClass();
    console.log(obj.publicProperty); // SomeValue
    console.log(obj);​

이 경우 publicProperty속성은 이 예제obj 와 같이 객체 에서도 사용할 수 있습니다 .

(가)부터 Object.create오래된 브라우저에서 사용할 수 없습니다,이 경우 당신은 사용할 수 있습니다

if(!Object.create)
{
    Object.create=function(o){
        function F(){}
        F.prototype=o;
        return new F();
    }
}

위의 코드는 Object.create사용할 수없는 경우에만 함수를 추가 하므로 Object.create함수 를 사용할 수 있으며 위의 코드는 Object.create실제로 수행하는 작업을 설명한다고 생각합니다 . 어떤 식 으로든 도움이되기를 바랍니다.

두 예제 모두 동일한 작업을 수행하는 것 같습니다.

그것은 당신의 경우에 사실입니다.

언제 다른 하나를 선택하겠습니까?

때 SomeBaseClass함수 본문이이은으로 실행 얻을 것이다 new키워드. 이것은 일반적으로 의도 된 것이 아닙니다. 프로토 타입 체인 만 설정하려고합니다. 어떤 경우에는 개인 범위 변수가 동일한 권한있는 메서드를 상속하므로 모든 인스턴스에서 공유되는 개체 를 실제로 인스턴스화 하기 때문에 심각한 문제가 발생할 수도 있습니다 MyClass. 다른 부작용은 상상할 수 있습니다.

따라서 일반적으로 Object.create. 그러나 일부 레거시 브라우저에서는 지원되지 않습니다. new이것이 종종 (분명한) 해를 끼치 지 않기 때문에-접근을 너무 자주 보는 이유 입니다. 또한 이 답변을 살펴보십시오 .

Object.create()의도 한대로 사용하면 차이가 분명해집니다 . 사실, 그것은 prototype당신의 코드 에서 단어를 완전히 숨기고, 내부 에서 일을 할 것입니다. 를 사용하면 Object.create()다음과 같이 갈 수 있습니다.

var base =  {
    doThis : function(){
    },

    doThat : function(){
    }
};

그런 다음 여기에서 다른 객체를 확장 / 상속 할 수 있습니다.

var myObject = Object.create( base );
// myObject will now link to "base" via the prototype chain internally

그래서 이것은 또 다른 개념, 더 "객체 지향적 인"상속 방식입니다. Object.create()예를 들어 사용하는 "생성자 기능"은 없습니다 . 그러나 물론 이러한 객체 내에서 자체 정의 생성자 함수를 만들고 호출 할 수 있습니다.

사용 Object.create()에 대한 한 가지 주장은 Javascripts default way를 사용하는 것보다 다른 객체에서 / * inherit * 를 혼합 하는 것이 더 자연스럽게 보일 수 있다는 것 입니다.

저는 자바 스크립트의 전문가는 아니지만 "Object.create"와 "new"의 차이점을 이해하는 간단한 예제입니다.

1 단계 : 몇 가지 속성 및 작업을 사용하여 부모 함수를 만듭니다.

function Person() {

this.name = 'venkat';

this.address = 'dallas';

this.mobile='xxxxxxxxxx'

}

Person.prototype.func1 = function () {

    return this.name + this.address;
}

2 단계 : New 키워드를 사용하여 Person 함수 위에 확장되는 자식 함수 (PersonSalary)를 만듭니다 .

function PersonSalary() {
    Person.call(this);
}
PersonSalary.prototype = new Person();

PersonSalary();

3 단계 : Object.create 키워드를 사용하여 Person 함수 위에 확장되는 두 번째 자식 함수 (PersonLeaves)를 만듭니다 .

function PersonLeaves() {
 Person.call(this);
}
PersonLeaves.prototype = Object.create(Person.prototype);


PersonLeaves();

// 이제 두 하위 함수 프로토 타입을 모두 확인합니다.

PersonSalary.prototype
PersonLeaves.prototype

이 두 자식 함수는 모두 Person (parent function) 프로토 타입에 연결되고 메서드에 액세스 할 수 있지만 new를 사용하여 자식 함수를 생성하면 필요하지 않은 모든 부모 속성이 포함 된 새로운 객체가 반환됩니다. 우리가 원하지 않는 부모 함수가 실행되는 "New"를 사용하는 객체 또는 함수.

요점은 다음과 같습니다.

부모 함수의 일부 메서드에 위임하고 새 객체를 생성하지 않으려면 Object.create를 사용하는 것이 가장 좋습니다.