javascript OOP中的公共方法

Question

我想用一些方法创建一个javascript类,我可以在类中以及类之外调用这些方法.如果愿意,我想制作一个"公开"的方法.我想要getTextAreaElement并appendTextArea成为这样的方法.

我已经展示了迄今为止我能想到的最佳代码片段.我也尝试将方法定义为原型以及类(this.func = ...).但是,这只是让我以外(调用方法new Socket().appendTextArea("osgjr89");),但不是类本身内!下面的代码片段显示了完全相反的实现,我无法在类之外调用该方法,但可以在其中调用它.

错误:

未捕获的TypeError:对象#Socket没有方法'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!";
}
[...]
}

Answer 1

必须将所有公共方法声明为属性,而不是变量/函数.所以,你必须改变这样的东西:

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

成

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