자바스크립트/Ext JS
[Cookbook Study Ch01]2. Using inheritance in your classes
베니94
2013. 5. 22. 00:57
Ext.onReady(function() { /*** * 여기에서는 상속을 통해 클래스를 재활용하고 상속해준 클래스를 초기화 또는 override로 재정의한다. */ Ext.define('Cookbook.Vehicle', { config : { manufacturer : 'Unknown Manufacturer', model : 'Unknown Model', topSpeed : 0 }, constructor : function(manufacturer, model, topSpeed) { // initialise our config object this.initConfig(); // 초기화 console.log(manufacturer, model, topSpeed) if (manufacturer) { this.setManufacturer(manufacturer); } if (model) { this.setModel(model); } if (topSpeed) { this.setTopSpeed(topSpeed); } }, travel : function(distance) { console.log('The ' + this.getManufacturer() + ' ' + this.getModel() + ' travelled ' + distance + ' miles at ' + this.getTopSpeed() + 'mph'); } }, function() { console.log('Vehicle Class defined!'); }); // 생성사 클래스명과 필요한 인자를 같이 제공해 줄 수 있다. var vehicle = Ext .create('Cookbook.Vehicle', 'Aston Martin', 'Vanquish', 60); vehicle.travel(100); // alerts �The Aston Martin Vanquish travelled 100 miles at 60mph // Define the Cookbook.Plane class Ext.define('Cookbook.Plane', { extend : 'Cookbook.Vehicle', config : { maxAltitude : 0 }, constructor : function(manufacturer, model, topSpeed, maxAltitude) { // initialise our config object this.initConfig(); if (maxAltitude) { this.setMaxAltitude(maxAltitude); } /*** * 상속 받은 클래스를 초기화 할 경우 아래와 같이 * 제공받은 인자로 초기화가 가능하다. * 즉 현재 메소드가 생성자이고 생성자 내부에서 callparent했으므로 * 상속해준 클래스의 생성자가 호출되는 것이다. */ this.callParent([ manufacturer, model, topSpeed ]); }, takeOff : function() { console.log('The ' + this.getManufacturer() + ' ' + this.getModel() + ' is taking off.'); }, land : function() { console.log('The ' + this.getManufacturer() + ' ' + this.getModel() + ' is landing.'); }, travel : function(distance) { this.takeOff(); // execute the base class� generic travel method console.log('current arg : ', arguments) /*** * 하단에 주목하자 현재 실행되고 있는 함수는 travel이고 동일한 함수가 상속받은 * 클래스에도 존재하는데 상속된 클래스의 함수를 콜하기 위해 아래와 같이 한다. */ this.callParent(arguments); // console.log('The ' + this.getManufacturer() + ' ' + this.getModel() + ' flew at an altitude of ' + this.getMaxAltitude() + 'feet'); // this.land(); } }, function() { console.log('Plane Class Defined!'); }); // create an instance of Cookbook.Plane class var plane = Ext.create('Cookbook.Plane', 'Boeing', '747', 500, 30000); plane.travel(800); // alerts 'The Boeing 747 is taking off' }); // 출처 : Ext JS4 Web Application Development Cookbook