【cocos2d-x从c++到js】04:cocos2d-x for js中的继承

  1. 云栖社区>
  2. 博客>
  3. 正文

【cocos2d-x从c++到js】04:cocos2d-x for js中的继承

技术小胖子 2017-11-07 20:05:00 浏览919

对于面向对象语言来说,继承机制是代码复用的基础,很不幸的是javascript作为一个基于原型继承的语言,并没有在本身语言层面上直接作出对类继承的支持。

但是js语言拥有很强大的表现力。所以一般是js的使用者自行设计一套继承机制,这个机制必须包括几个点,对私有访问权限的模拟,对属性和类属性的不同实现,对方法覆盖的支持,对父类被覆盖方法的访问等。

cocos2d-x中,整合了两套继承机制,看《MoonWarriors》例子中的源码SysMenu.js文件 


  1. var SysMenu = cc.Layer.extend({ 
  2.     _ship:null
  3.  
  4.     ctor:function () { 
  5.         cc.associateWithNative( this, cc.Layer ); 
  6.     }, 
  7.     init:function () { 
  8.         var bRet = false
  9.         if (this._super()) { 
  10.             winSize = cc.Director.getInstance().getWinSize(); 
  11.             var sp = cc.Sprite.create(s_loading); 
  12.             sp.setAnchorPoint(cc.p(0,0)); 
  13.             this.addChild(sp, 0, 1); 
  14.  
  15.             var logo = cc.Sprite.create(s_logo); 
  16.             logo.setAnchorPoint(cc.p(0, 0)); 
  17.             logo.setPosition(0, 250); 
  18.             this.addChild(logo, 10, 1); 
  19.  
  20.             var newGameNormal = cc.Sprite.create(s_menu, cc.rect(0, 0, 126, 33)); 
  21.             var newGameSelected = cc.Sprite.create(s_menu, cc.rect(0, 33, 126, 33)); 
  22.             var newGameDisabled = cc.Sprite.create(s_menu, cc.rect(0, 33 * 2, 126, 33)); 
  23.  
  24.             var gameSettingsNormal = cc.Sprite.create(s_menu, cc.rect(126, 0, 126, 33)); 
  25.             var gameSettingsSelected = cc.Sprite.create(s_menu, cc.rect(126, 33, 126, 33)); 
  26.             var gameSettingsDisabled = cc.Sprite.create(s_menu, cc.rect(126, 33 * 2, 126, 33)); 
  27.  
  28.             var aboutNormal = cc.Sprite.create(s_menu, cc.rect(252, 0, 126, 33)); 
  29.             var aboutSelected = cc.Sprite.create(s_menu, cc.rect(252, 33, 126, 33)); 
  30.             var aboutDisabled = cc.Sprite.create(s_menu, cc.rect(252, 33 * 2, 126, 33)); 
  31.  
  32.             var newGame = cc.MenuItemSprite.create(newGameNormal, newGameSelected, newGameDisabled, function () { 
  33.                 this.onButtonEffect(); 
  34.                 flareEffect(thisthisthis.onNewGame); 
  35.             }.bind(this)); 
  36.             var gameSettings = cc.MenuItemSprite.create(gameSettingsNormal, gameSettingsSelected, gameSettingsDisabled, this.onSettings, this); 
  37.             var about = cc.MenuItemSprite.create(aboutNormal, aboutSelected, aboutDisabled, this.onAbout, this); 
  38.  
  39.             var menu = cc.Menu.create(newGame, gameSettings, about); 
  40.             menu.alignItemsVerticallyWithPadding(10); 
  41.             this.addChild(menu, 1, 2); 
  42.             menu.setPosition(winSize.width / 2, winSize.height / 2 - 80); 
  43.             this.schedule(this.update, 0.1); 
  44.  
  45.             var tmp = cc.TextureCache.getInstance().addImage(s_ship01); 
  46.             this._ship = cc.Sprite.createWithTexture(tmp,cc.rect(0, 45, 60, 38)); 
  47.             this.addChild(this._ship, 0, 4); 
  48.             var pos = cc.p(Math.random() * winSize.width, 0); 
  49.             this._ship.setPosition( pos ); 
  50.             this._ship.runAction(cc.MoveBy.create(2, cc.p(Math.random() * winSize.width, pos.y + winSize.height + 100))); 
  51.  
  52.             if (MW.SOUND) { 
  53.                 cc.AudioEngine.getInstance().setMusicVolume(0.7); 
  54.                 cc.AudioEngine.getInstance().playMusic(s_mainMainMusic, true); 
  55.             } 
  56.  
  57.             bRet = true
  58.         } 
  59.         return bRet; 
  60.     }, 
  61.     onNewGame:function (pSender) { 
  62.         var scene = cc.Scene.create(); 
  63.         scene.addChild(GameLayer.create()); 
  64.         scene.addChild(GameControlMenu.create()); 
  65.         cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
  66.     }, 
  67.     onSettings:function (pSender) { 
  68.         this.onButtonEffect(); 
  69.         var scene = cc.Scene.create(); 
  70.         scene.addChild(SettingsLayer.create()); 
  71.         cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
  72.     }, 
  73.     onAbout:function (pSender) { 
  74.         this.onButtonEffect(); 
  75.         var scene = cc.Scene.create(); 
  76.         scene.addChild(AboutLayer.create()); 
  77.         cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene)); 
  78.     }, 
  79.     update:function () { 
  80.         if (this._ship.getPosition().y > 480) { 
  81.             var pos = cc.p(Math.random() * winSize.width, 10); 
  82.             this._ship.setPosition( pos ); 
  83.             this._ship.runAction( cc.MoveBy.create( 
  84.                 parseInt(5 * Math.random(), 10), 
  85.                 cc.p(Math.random() * winSize.width, pos.y + 480))); 
  86.         } 
  87.     }, 
  88.     onButtonEffect:function(){ 
  89.         if (MW.SOUND) { 
  90.             var s = cc.AudioEngine.getInstance().playEffect(s_buttonEffect); 
  91.         } 
  92.     } 
  93. }); 
  94.  
  95. SysMenu.create = function () { 
  96.     var sg = new SysMenu(); 
  97.     if (sg && sg.init()) { 
  98.         return sg; 
  99.     } 
  100.     return null
  101. }; 
  102.  
  103. SysMenu.scene = function () { 
  104.     var scene = cc.Scene.create(); 
  105.     var layer = SysMenu.create(); 
  106.     scene.addChild(layer); 
  107.     return scene; 
  108. }; 

这个extend继承写法由John Resig创造,John Resig是JS领域的大神,而且网上有很多粉丝给他编的段子,非常有趣。

例子中使用父类cc.Layer.extend方法来启动继承,传入一个对象字面量{},这个字面量可以包含对象属性和对象方法,最终由extend来完成接口绑定,返回一个构造函数赋值给SysMenu。

对于类方法(也就是通常意义上的静态方法),使用的是js最传统的方式,直接给构造函数指定属性即可。

这种编写代码的方式非常简单,而且也很优美。更重要的是,这种写法,非常符合C++或java程序员的排版审美。

关于继承的理解。js里面的原型继承和基于类的继承方式截然不同,内部是在维护一个原型链,链上的节点与节点之间是链接关系(注意:不是赋值,也不是拷贝)。可以先看一下《权威指南》那本书是怎么讲的,不过很遗憾,那本书关于原型继承的图解画的不太好……千万不要搞代数式的替换和死记硬背,那样你很难掌握原型链的本质。

另外,强烈推荐三生石上的系列文章《JavaScript继承详解》

JavaScript继承详解

JavaScript继承详解(二)

JavaScript继承详解(三)

JavaScript继承详解(四)

JavaScript继承详解(五)

JavaScript继承详解(六)

有时间的话,我会把三生石上的文章配一些详细的原型链描述图,这样就可以很容易的掌握js的原型链了。





 本文转自 老G 51CTO博客,原文链接:http://blog.51cto.com/goldlion/1125167,如需转载请自行联系原作者