[Cocos2d-x from c ++ to js] 04: inheritance in cocos2d-x for js

For object-oriented languages, the inheritance mechanism is the basis for code reuse. Unfortunately, javascript is a prototype-based inherited language, class inheritance is not directly supported at the language level.

However, the js language is very expressive. Therefore, JavaScript users generally design their own inheritance mechanism. This mechanism must include several points, simulating private access permissions, and implementing different attributes and class attributes, support for method override and access to methods overwritten by the parent class.

Cocos2d-x, integrated two sets of Inheritance Mechanism, see the "MoonWarriors" Example of the source code SysMenu. js File

 
 

  
  
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; 
  
  
}; 
 
 

This extend inheritance method was created by John Resig. John Resig is a great player in the JS field. It is very interesting to have many fans compile paragraphs for him on the Internet.

The example uses the parent class cc. layer. extend method to start inheritance. Input an object literal {}, which can contain object attributes and object methods. Finally, extend binds the interface, returns a constructor assigned to SysMenu.

For Class methods, that is, static methods in the general sense), the most traditional method of js is used. You can directly specify attributes for the constructor.

This method of writing code is very simple and elegant. More importantly, this writing method is very compatible with the typographical aesthetics of C ++ or java programmers.

Understanding of inheritance. The prototype inheritance in js is different from the class-based inheritance method. Internally, a prototype chain is maintained, and nodes on the chain are linked. Note: No value assignment, is not a copy ). Let's take a look at how the book "authoritative guide" talks about it. Unfortunately, it's not a good illustration of prototype inheritance ...... Never implement algebraic replacement or rote memorization, so you can hardly grasp the essence of prototype chain.

In addition, we strongly recommend a series of articles on sanshenshi, "JavaScript inheritance details".

JavaScript inheritance

JavaScript inheritance (2)

Details on JavaScript inheritance 3)

JavaScript inheritance 4)

JavaScript inheritance 5)

Details on JavaScript inheritance 6)

If you have time, I will configure the article on Sansheng stone with a detailed prototype Link Description diagram, so that you can easily master the prototype chain of js.

This article is from the "Old G hut" blog, please be sure to keep this source http://4137613.blog.51cto.com/4127613/1125167