[Error] Function is not a function

Cocos Creator
#1

I have this code:

properties: {
        enemy: {
            default: null,
            type: cc.Prefab,
        },
    },

    
    update: function (dt) {
        this.node.on('touchstart', function (event) {
            console.log("TOUCH");
            this.spawnEnemy();  //<- ERROR
        });
    },
    spawnEnemy: function () {
        var scene = cc.director.getScene();
        var node = cc.instantiate(this.enemy);
        node.parent = scene;
        node.position = this.node.position;
    },

And I get this error:

 Uncaught TypeError: this.spawnEnemy is not a function

I’m not very familiar with JS, and I don’t know what’s going on here!

#2

what is this: }); in the end of update function?

#3

In the callback of on, the this point to the event listener object, to get the node, you can use event.getCurrentTarget()

#4

I failed to do it the way you described, but I added this as a parameter at the end:

   update: function (dt) {
        this.node.on('touchstart', function (event) {
            console.log("TOUCH");
            this.spawnEnemy();  
        }, this);  //<- Here
#5 
 update: function (dt) {
        var self = this;
        this.node.on('touchstart', function (event) {
            console.log("TOUCH");
            self.spawnEnemy(); 
        });
    },
    spawnEnemy: function () {
        ...
    },
1 Like
#6

Closure&Scope concepts in JS is pretty confusing, different than what I’m used to, I also wonder if there is way to declare private variables for the entire class instead of keep using this

#7

its confusing at start but youll get use to it… patience :smile: and its not like youll do that every part of your code
in cocos creator u can use es6… its now almost looks like native code… try to google it

#8

I’m also a newbie with JavaScript, but I think you should consider using onLoad instead of update, which is called at every frame!
What about this (please note I created and used a ‘local variable’, _myself, maybe the example you are looking for):

   onLoad: function() {
        var self = this;

        self.node._myself = self;   // store it to be able to access it later

        self.node.on('touchstart', self.onTouchStart, self.node);
    },

    onTouchStart: function  (event) {
        var node = event.getCurrentTarget();
        var self = node._myself; // retrieve the previously saved value

        console.log("TOUCH");
        self.spawnEnemy(); 
   },

   spawnEnemy: function () {
   ...
   },
#9

You can check which ‘node’ that your javascript file bind.
I meet same bug.
when i bind the ‘js’ file to a ‘layerout’ node , there’s the same error of ‘this.btn.on is not a function…’ .
After I changed the file binding to a ‘sprite’ , that’s OK !

妈的，你会不会说中文，难道都是老外吗 ？ 英文差的我  解释的累求死了。
意思是，别把js文件绑定到layerout上，弄一个普通的sprite或者空node，就好了 。