백본보기 상속

Question

이 같은 세 가지 백본 전망이 :

ParentView = Backbone.View.extend({ 
    addUsers : function() 
    { 
     console.log("Parent's Add User"); 
    }, 

    addProject : function() 
    { 
     console.log("Parent's Add Project"); 
    } 
}); 

ChildView = ParentView.extend({ 
    addProject : function() 
    { 
     var self = this; 

     console.log("Child's add Project"); 

     self.constructor.__super__.addProject.apply(self); 
    } 
}); 

GrandChildView = ChildView.extend({ 
    addItem : function() 
    { 
     var self = this; 
     self.addProject(); 
    }, 

    addUsers : function() 
    { 
     var self = this; 
     console.log("Grand Child's Add users"); 
     self.constructor.__super__.addUsers.apply(self); 
    } 
}); 

var vChild = new ChildView(); 
vChild.addProject(); // works fine, by calling it own and parent's functions. 

var vGrandChild = new GrandChildView(); 
vGrandChild.addUsers(); // This throws Maximum call stack size exceeded error, 

내가 GrandChildView의 새로운 인스턴스를 생성하고 그 ADDUSERS 메소드를 호출, 내가 그 becuase 추측, 최대 스택 크기를 초과 발생 그것은 계속 부름을 계속합니다. 그러나 알아낼 수는 없습니다. 이유는 super의 메소드를 호출하는 것 같습니다.

감사합니다.

Answer 1

당신이 실제로 당신이 당신이 실제로 호출이 실제로 무한 루프에서 "그랜드 아이"보기 :

힌트를 호출 함수의 단계를 수행하면 이해할 수 있어야하는,하고 있습니다 : 그것은 가치 운동은 당신 같은 때마다 apply .... 무엇 this 생각하는)

그렇지 않으면 이것은 당신이 달성하기 위해 무엇을 의미하는지 아마 :

ParentView = Backbone.View.extend({ 
    addUsers : function() 
    { 
     console.log("Parent's Add User"); 
    }, 

    addProject : function() 
    { 
     console.log("Parent's Add Project"); 
    } 
}); 

ChildView = ParentView.extend({ 
    addProject : function() 
    { 
     console.log("Child's add Project"); 

     ParentView.prototype.addProject.call(this); 
    } 
}); 

GrandChildView = ChildView.extend({ 

    addItem : function() 
    { 
     this.addProject(); 
    }, 

    addUsers : function() 
    { 
     console.log("Grand Child's Add users"); 
     ChildView.prototype.addUsers.call(this); 
    } 
}); 

var vChild = new ChildView(); 
vChild.addProject(); // works fine, by calling it own and parent's functions. 

var vGrandChild = new GrandChildView(); 
vGrandChild.addUsers(); 

Answer 2

그냥 시도에 대해 : 당신의 ChildView이 추가 :

addUsers : function() 
{ 
    var self = this; 
    console.log("Child's Add users"); 
    self.constructor.__super__.addUsers.apply(self); 
} 

아마 addUsers 기능이 제대로 ChildView.prototype에 정의되지 않은 그러나 다음은 발견되지을 상속하고 self.prototype에 중계 될 때 . 나는 모르겠다. 나는 JS가 일반적인 방식으로 상속으로이 방법으로 일할 의향이 있다고 생각하지 않는다고 말했다. OO 지향 언어.

Answer 3

내가 코드를했다가, 커피 스크립트로 변환이 준 나에게이 나를 위해 일하는 자바 스크립트 :

var ChildView, GrandChildView, ParentView, 
    __hasProp = {}.hasOwnProperty, 
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }, 
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 

ParentView = (function(_super) { 

    __extends(ParentView, _super); 

    ParentView.name = 'ParentView'; 

    function ParentView() { 
    return ParentView.__super__.constructor.apply(this, arguments); 
    } 

    ParentView.prototype.addUsers = function() { 
    return console.log("Parent's Add User"); 
    }; 

    ParentView.prototype.addProject = function() { 
    return console.log("Parent's Add Project"); 
    }; 

    return ParentView; 

})(Backbone.View); 

ChildView = (function(_super) { 

    __extends(ChildView, _super); 

    ChildView.name = 'ChildView'; 

    function ChildView() { 
    this.addProject = __bind(this.addProject, this); 
    return ChildView.__super__.constructor.apply(this, arguments); 
    } 

    ChildView.prototype.addProject = function() { 
    console.log("Child's add Project"); 
    return ChildView.__super__.addProject.apply(this, arguments); 
    }; 

    return ChildView; 

})(ParentView); 

GrandChildView = (function(_super) { 

    __extends(GrandChildView, _super); 

    GrandChildView.name = 'GrandChildView'; 

    function GrandChildView() { 
    this.addUsers = __bind(this.addUsers, this); 

    this.addItem = __bind(this.addItem, this); 
    return GrandChildView.__super__.constructor.apply(this, arguments); 
    } 

    GrandChildView.prototype.addItem = function() { 
    return this.addProject(); 
    }; 

    GrandChildView.prototype.addUsers = function() { 
    console.log("Grand Child's Add users"); 
    return GrandChildView.__super__.addUsers.apply(this, arguments); 
    }; 

    return GrandChildView; 

})(ChildView); 

내 이해에서부터 까다로운 요점은이 기능을 내부의 자체 기능에 바인딩한다는 것입니다. 이 함수는 함수를 호출 할 때마다 발생할 것입니다. 함수를 호출 할 때마다 정확하게 생략해야합니다. 이 함수는 보통 콜백이나 함수를 호출하는 객체에 대한 참조가없는 경우에만 함수에서 바인드해야하며 함수에 대한 참조 만 사용해야합니다. 그래서 당신이 그런 상황을 위해 이것을 묶어야한다면 그것은 기능 밖에서하십시오.