javascript OOP 中的公共方法答案

【问题标题】：Public methods in javascript OOPjavascript OOP 中的公共方法
【发布时间】：2013-02-03 03:38:37
【问题描述】：

我想用我可以在类内和类外调用的方法创建一个 javascript 类。如果您愿意，我想制作一个“公共”方法。我希望getTextAreaElement 和appendTextArea 成为这样的方法。

我已经展示了迄今为止我能想到的最佳代码的 sn-p。我还尝试将方法定义为原型以及在类中 (this.func = ...)。但这只允许我在 (new Socket().appendTextArea("osgjr89");) 外部调用该方法，但在类本身内NOT！下面的代码 sn-p 显示了完全相反的实现，我不能在类外部调用该方法，但可以在内部调用它。

错误：

Uncaught TypeError: Object #Socket has no method 'appendTextArea'

socket.js：

function Socket() {
var socket;
var canvas = document.getElementById('c');
var context = canvas.getContext("2d");

if (window.WebSocket) {
    socket = new WebSocket("ws://localhost:9012/websocket");
    socket.binaryType = 'arraybuffer';
    socket.onopen = onopen;
    socket.onmessage = onmessage;
    socket.onerror = onerror;
    socket.onclose = onclose;
} else {
    alert("Your browser does not support Web Socket.");
}

function getTextAreaElement() {
    return document.getElementById('responseText');
}

function appendTextArea(newData) {
    var el = getTextAreaElement();
    el.value = el.value + '\n' + newData + " :)";
}

function onopen(event) {
    getTextAreaElement().value = "Web Socket opened!"; 
}
/*[...]*/
}

main.js（在 socket.js 之后加载）

$(document).ready(function() {
var s = new Socket();
s.appendTextArea("osgjr89"); // ERROR!
});

更新的 socket.js：

function Socket() {
[...]
if (window.WebSocket) {
    socket = new WebSocket("ws://localhost:9012/websocket");
    socket.binaryType = 'arraybuffer';
    socket.onopen = this.onopen;
    socket.onmessage = this.onmessage;
    socket.onerror = this.onerror;
    socket.onclose = this.onclose;
} else {
    alert("Your browser does not support Web Socket.");
}

this.getTextAreaElement = function() {
    return document.getElementById('responseText');
}

this.appendTextArea = function(newData) {
    var el = this.getTextAreaElement();
    el.value = el.value + '\n' + newData + " :)";
}

this.onopen = function(event) {
    this.getTextAreaElement().value = "Web Socket opened!";
}
[...]
}

【问题讨论】：

标签： javascript oop methods

【解决方案1】：

所有公共方法都必须声明为属性，而不是变量/函数。所以，你必须改变这样的东西：

function getTextAreaElement() {
    return document.getElementById('responseText');
}

进入

this.getTextAreaElement = function() {
    return document.getElementById('responseText');
}

【讨论】：

看起来我们离让它工作越来越近了，但现在onopen 回调没有被触发（服务器获得连接并正常响应）。我已经用修改后的 socket.js 代码更新了这个问题。 Chrome 在 JS 中没有报告错误。
你必须定义this.onopen 之前你在socket.onopen = this.onopen;使用它。
哦，当然！好吧，我现在开始工作了。我现在只征求意见。要在方法中调用其他方法，我必须将Socket 的this 存储在它的一个属性中（即var socketThis = this;），然后我通过该属性调用该方法（即this.func...(event){ socketThis.otherFunc(); }）。这是做到这一点的“正确”方法，还是您推荐其他方法？

【解决方案2】：

如果您使用this.func = function() {}，则可以使用this.func() 以及在外部使用：

var s = new Socket();
s.func();

【讨论】：