cocos2d-x for JS 中的繼承機制詳解

對於面向對象語言來說，繼承機制是代碼復用的基礎。遺憾的是 JavaScript 作為一個基於原型繼承的語言，並沒有在語言層面上直接支援類別繼承。但 JS 語言擁有強大的表現力，因此一般由使用者自行設計一套繼承機制，這套機制必須包含私有存取權限模擬、屬性與類別屬性的不同實作、方法覆寫支援、父類別被覆寫方法的存取等。

cocos2d-x 中整合了兩套繼承機制，請參考《MoonWarriors》範例中的 SysMenu.js 檔案：

var SysMenu = cc.Layer.extend({ 
 _ship:null, 
 
 ctor:function () { 
 cc.associateWithNative( this, cc.Layer ); 
 }, 
 init:function () { 
 var bRet = false; 
 if (this._super()) { 
 winSize = cc.Director.getInstance().getWinSize(); 
 var sp = cc.Sprite.create(s_loading); 
 sp.setAnchorPoint(cc.p(0,0)); 
 this.addChild(sp, 0, 1); 
 
 var logo = cc.Sprite.create(s_logo); 
 logo.setAnchorPoint(cc.p(0, 0)); 
 logo.setPosition(0, 250); 
 this.addChild(logo, 10, 1); 
 
 var newGameNormal = cc.Sprite.create(s_menu, cc.rect(0, 0, 126, 33)); 
 var newGameSelected = cc.Sprite.create(s_menu, cc.rect(0, 33, 126, 33)); 
 var newGameDisabled = cc.Sprite.create(s_menu, cc.rect(0, 33 * 2, 126, 33)); 
 
 var gameSettingsNormal = cc.Sprite.create(s_menu, cc.rect(126, 0, 126, 33)); 
 var gameSettingsSelected = cc.Sprite.create(s_menu, cc.rect(126, 33, 126, 33)); 
 var gameSettingsDisabled = cc.Sprite.create(s_menu, cc.rect(126, 33 * 2, 126, 33)); 
 
 var aboutNormal = cc.Sprite.create(s_menu, cc.rect(252, 0, 126, 33)); 
 var aboutSelected = cc.Sprite.create(s_menu, cc.rect(252, 33, 126, 33)); 
 var aboutDisabled = cc.Sprite.create(s_menu, cc.rect(252, 33 * 2, 126, 33)); 
 
 var newGame = cc.MenuItemSprite.create(newGameNormal, newGameSelected, newGameDisabled, function () { 
 this.onButtonEffect(); 
 flareEffect(this, this, this.onNewGame); 
 }.bind(this)); 
 var gameSettings = cc.MenuItemSprite.create(gameSettingsNormal, gameSettingsSelected, gameSettingsDisabled, this.onSettings, this); 
 var about = cc.MenuItemSprite.create(aboutNormal, aboutSelected, aboutDisabled, this.onAbout, this); 
 
 var menu = cc.Menu.create(newGame, gameSettings, about); 
 menu.alignItemsVerticallyWithPadding(10); 
 this.addChild(menu, 1, 2); 
 menu.setPosition(winSize.width / 2, winSize.height / 2 - 80); 
 this.schedule(this.update, 0.1); 
 
 var tmp = cc.TextureCache.getInstance().addImage(s_ship01); 
 this._ship = cc.Sprite.createWithTexture(tmp, cc.rect(0, 45, 60, 38)); 
 this.addChild(this._ship, 0, 4); 
 var pos = cc.p(Math.random() * winSize.width, 0); 
 this._ship.setPosition( pos ); 
 this._ship.runAction(cc.MoveBy.create(2, cc.p(Math.random() * winSize.width, pos.y + winSize.height + 100))); 
 
 if (MW.SOUND) { 
 cc.AudioEngine.getInstance().setMusicVolume(0.7); 
 cc.AudioEngine.getInstance().playMusic(s_mainMainMusic, true); 
 } 
 
 bRet = true; 
 } 
 return bRet; 
 }, 
 onNewGame:function (pSender) { 
 var scene = cc.Scene.create(); 
 scene.addChild(GameLayer.create()); 
 scene.addChild(GameControlMenu.create()); 
 cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
 }, 
 onSettings:function (pSender) { 
 this.onButtonEffect(); 
 var scene = cc.Scene.create(); 
 scene.addChild(SettingsLayer.create()); 
 cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
 }, 
 onAbout:function (pSender) { 
 this.onButtonEffect(); 
 var scene = cc.Scene.create(); 
 scene.addChild(AboutLayer.create()); 
 cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
 }, 
 update:function () { 
 if (this._ship.getPosition().y > 480) { 
 var pos = cc.p(Math.random() * winSize.width, 10); 
 this._ship.setPosition( pos ); 
 this._ship.runAction( cc.MoveBy.create( 
 parseInt(5 * Math.random(), 10), 
 cc.p(Math.random() * winSize.width, pos.y + 480))); 
 } 
 }, 
 onButtonEffect:function(){ 
 if (MW.SOUND) { 
 var s = cc.AudioEngine.getInstance().playEffect(s_buttonEffect); 
 } 
 } 
 }); 
 
 SysMenu.create = function () { 
 var sg = new SysMenu(); 
 if (sg && sg.init()) { 
 return sg 
 } 
 return null; 
 }; 
 
 SysMenu.scene = function () { 
 var scene = cc.Scene.create(); 
 var layer = SysMenu.create(); 
 scene.addChild(layer); 
 return scene; 
 }; 

這種 extend 繼承寫法由 John Resig 創造，他是 JS 領域的大神。範例中使用父類別 cc.Layer.extend 方法啟動繼承，傳入一個物件字面量 {}，這個字面量可以包含物件屬性和方法，最終由 extend 完成介面綁定，回傳一個建構函式賦值給 SysMenu。

對於類別方法（通常意義上的靜態方法），使用的是 JS 最傳統的方式，直接給建構函式指定屬性即可。這種編寫方式非常簡單優美，最重要的是非常符合 C++ 或 Java 程式設計師的排版審美。

關於繼承的理解：JS 的原型繼承與基於類別的繼承方式截然不同，內部維護一個原型鏈，鏈上的節點之間是連結關係（注意：不是賦值，也不是複製）。建議參考《JavaScript 權威指南》或三生石上的《JavaScript 繼承詳解》系列文章（共六篇），深入掌握原型鏈本質。