如何处理javascript面向对象的原型


How to handle javascript object-oriented prototype

本问题已经有最佳答案，请猛点这里访问。

我正在用名为vline的JSAPI制作工具，但它是JavaScript的基本队列，所以我在这里发布。

我想在示例代码上附加聊天系统。我在//聊天功能之间添加的内容

但是

1
this.prototype.onMessage_

显示错误

1
Uncaught TypeError: Cannot set property 'onMessage_' of undefined

不过，我已经做了一些javascript程序，我不擅长这个。所以我想我不明白，一些非常基本的面向对象的javascript。

请帮帮我。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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();
});

不能忘记你写的很多东西。但问题是非常清楚的。"这个"，您希望成为您的方法，但是您必须非常小心，因为它会根据您执行它的位置更改上下文。

如果我简化您的代码，它是模块模式的一个示例，应该如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();

注意上面的代码如何避免使用"this"。还要注意，如何使用"new"创建新对象