How to handle javascript object-oriented prototype

Question

I am making tools with js API named vLine, but it is basic quesion of javascript so I post here.

I want to attache chat system on sample code. What I have adde tis between ///chat function

but

this.prototype.onMessage_

shows error like

Uncaught TypeError: Cannot set property 'onMessage_' of undefined

I have made a few javascript programings though,I am not good at this. So I think I didnt understand ,something very basic javascript object oriented.

please help me.

<script>
var vlineClient = (function(){
  if('{{vlineData.serviceId}}' == 'YOUR_SERVICE_ID' || '{{vlineData.serviceId}}' == 'YOUR_SERVICE_ID'){
    alert('Please make sure you have created a vLine service and that you have properly set the $serviceID and $apiSecret variables in classes/Vline.php file.');     

    }


    var client, vlinesession,
          authToken = '{{ vlineData.authToken }}',
          serviceId = '{{ vlineData.serviceId }}',
          profile = {"displayName": '{{ vlineData.displayName }}', "id": '{{ vlineData.id }}'};

    // Create vLine client  
    window.vlineClient = this.client_ = vline.Client.create({"serviceId": serviceId, "ui": true});
    // Add login event handler

 this.client_.on('login', onLogin);
    this.client_.login(serviceId, profile, authToken).done(this.init_,this);
    // Do login

   **/////chat function**
     this.prototype.onMessage_ = function(event) {
        var msg = event.message,
        sender = msg.getSender();
         console.log('get message');
        this.showAlert(sender.getDisplayName(),
                     sender.getThumbnailUrl(),
                     msg.getBody());
    };
       this.client_.on('recv:im', this.onMessage_, this);
   **/////chat function**  









  function onLogin(event) {
    vlinesession = event.target;
    // Find and init call buttons and init them
    $(".callbutton").each(function(index, element) {
       initCallButton($(this)); 
    });
  }

  // add event handlers for call button
  function initCallButton(button) {
    var userId = button.attr('data-userid');

    // fetch person object associated with username
    vlinesession.getPerson(userId).done(function(person) {
      // update button state with presence
      function onPresenceChange() {
        if(person.getPresenceState() == 'online'){
            button.removeClass().addClass('active');
        }else{
            button.removeClass().addClass('disabled');
        }
        button.attr('data-presence', person.getPresenceState());
      }

      // set current presence
      onPresenceChange();

      // handle presence changes
      person.on('change:presenceState', onPresenceChange);



      // start a call when button is clicked
      button.click(function() {
              if (person.getId() == vlinesession.getLocalPersonId()) {
            alert('You cannot call yourself. Login as another user in an incognito window');
            return;
              }
          if(button.hasClass('active'))
                            **/////chat function**
                            person.postMessage("Hello there");
                            console.log("send message");
                             **////chat function**
            person.startMedia();
      });
    });

  }

  return client;
})();





$(window).unload(function() {
  vlineClient.logout();
});

score 1 · Accepted Answer · answered Jun 26 '13 at 08:53

Can not undestand whole lots of things that you have written. But the problem is ver clear. "this", you are expecting to be your method, but you have to very careful of this as it changes context based upon where you are executing it.

If I simplyfy your code, its an example of module pattern, which should be as following.

var moduleExample = (function () {
    // private variables and functions
    var privateVar = 'bar';

    // constructor
    var moduleExample = function () {
    };

    moduleExample.prototype.chat = function(){
        alert('hello');
    };

    // return module
    return moduleExample;
})();

var my_module = new moduleExample();
my_module.chat();

Notice how the code above has avoided the use of "this". Also notice, how a new object is created by using "new"

How to handle javascript object-oriented prototype

1 Answers1