静态函数 Javascript答案

【问题标题】：Static function Javascript静态函数 Javascript
【发布时间】：2014-08-05 21:08:47
【问题描述】：

我想要一个原型并调用一个静态函数。这是我的代码：

function Client() {
    this.username = "username",
    this.password = "Password",
    this.printUsername = function() {
        this.username=$("#Username").val()
        console.log(this.username);
    };
};

这是我的称呼：

<button onclick="Client.printUsername()" type="button">Submit</button>

这是控制台中的错误：

Uncaught TypeError: Object function Client() {
    this.username = "username",
    this.password = "Password",
    this.printUsername = function() {
        this.username=$("#Username").val()
        console.log(this.username);
    };
} has no method 'printUsername'

我的代码有什么问题？

这仍然会产生错误：

function Client() {
    this.username = "username",
    this.password = "Password",
    this.setUsername = function() {
        this.username=$("#Username").val()
        console.log(this.username);
    };
};

Client.prototype.printUsername = function() {
    this.username = $("#Username").val();
    console.log(this.username);
}

【问题讨论】：

你必须实例化你的Client
愿意在静态函数中打印带有上下文的用户名的简单事实是设计缺陷。
OP 认为他需要静态调用的事实是恕我直言的设计缺陷。 @OP 你知道静态是什么意思吗？
OP，您需要重新表述您的需求，我们才能正确回答您的问题。你到底想用 printUsername 做什么，为什么它应该是静态的？
class/static method in javascript? 的可能重复项

标签： javascript static

【解决方案1】：

抱歉，我不想下载 jQuery 来测试它。它以任何方式工作。该方法既是静态的，也是实例方法。

<html>
<body>
<input id="Username">
<button onclick="Client.printUsername()" type="button">Submit</button>
<script>
function Client() {
    this.username = "username",
    this.password = "Password",
    this.printUsername = function() {
        this.username=document.querySelector("#Username").value;
        console.log(this.username);
    };
};
var proto = Client.prototype;
Client.printUsername = function(){
    proto.username=document.querySelector("#Username").value;
    console.log(proto.username);
};
</script>
</body>
</html>

你也可以这样做。

<html>
<body>
<input id="Username">
<button onclick="Client.printUsername()" type="button">Submit</button>
<button onclick="new Client().printUsername2()" type="button">Submit</button>
<script>
function Client() {};

Client.prototype.username = "username";
Client.prototype.password = "Password";
Client.prototype.printUsername = function() {
    this.username=document.querySelector("#Username").value;
    console.log(this.username);
};
var proto = Client.prototype;
Client.printUsername = function(){
    proto.printUsername.call(proto);
};
Client.prototype.printUsername2 = function(){
    console.log(this.username);
};
</script>
</body>
</html>

实例属性对实例唯一的解决方案。

<html>
<body>
<input id="Username">
<button onclick="Client.printUsername()" type="button">Submit</button>
<button onclick="new Client().printUsername2()" type="button">Submit</button>
<script>
function Client() {
    //this.init can also be left outside the constructor if you want to choose
    //if properties change between instances, and call the init method directly.
    this.init.apply(this, arguments);
};
Client.prototype.init = function(){
    this.username = "username";
    this.password = "Password";
};
Client.prototype.username = "username";
Client.prototype.password = "Password";
Client.prototype.printUsername = function() {
    this.username=document.querySelector("#Username").value;
    console.log(this.username);
};
var proto = Client.prototype;
Client.printUsername = function(){
    proto.printUsername.call(proto);
};
Client.prototype.printUsername2 = function(){
    console.log(this.username);
};
</script>
</body>
</html>

【讨论】：

谢谢它的工作。发现使用这种技术将方法委托给 html 文件中的事件更优雅，但在 javascript 中不太优雅，因此最终会选择非静态
是的。这真的是唯一的方法。当然，这取决于你认为什么是优雅的。您应该查看 jQuery 源代码。它经常做这样的事情。
这个答案显示缺乏javascript知识，对不起。这根本不是原型设计的方式。 username 和 password 应该只驻留在实例本身中，绝不应该驻留在原型中。另外，你的代码是一团糟。
@vsync 不，它没有。它回答了这个问题。如果你想要实例用户名和密码，那么你可以这样做。没有什么能阻止任何人这样做。这取决于用例。
@QuentinEngles - 你实例化Client 因为你有不止一个，所以，你绝对不能将用户名和密码在所有客户的实例之间共享。以任何标准来看，这都是荒谬的，先生。您的示例在现实生活中永远不会起作用，因为密码和用户名永远不会按实例存储。

【解决方案2】：

你必须像这样实例化你的Client：

var client = new Client();
// now you can do:
client.printUsername();

这使得Client 中的this 能够引用您真正想要的东西，因为没有上面的new.. 东西，this 将指向其他东西，可能是window 对象。

您也可以使用原型：（扩展原始 Client）

Client.prototype.printUsername = function() {
    this.username = $("#Username").val();
    console.log(this.username);
};

更新 - 显示所有代码流：

function Client(){
    this.username = "username";
    this.password = "Password";
};


Client.prototype.printUsername = function(){
    this.username = $("#Username").val();
    console.log(this.username);
};


var client = new Client();
// call it
client.printUsername();

【讨论】：

谢谢，但我想避免这种情况。我想要一个静态函数。
我没有得到你想要的东西......对不起......你能解释得更好吗？
我可以让它成为非静态的，但作为一个旁注，让它成为静态的方式是行不通的。也许它不需要在静态方法中包含“this”？我已经在我最初的问题中发布了我试图使其静态化但不起作用。
我不明白您为什么选择了后来出现的另一个答案，并且是我的副本...这 100% 有效。我会通过给你所有的代码来告诉你，因为你似乎不理解它。另外，我不知道“静态函数”这个词。在 10 年的密集 js 编码中从未听说过。
您的答案与我接受的答案不相似。您的实例化了一个新客户端，这意味着它不是静态的。不过感谢您的帮助。

【解决方案3】：

将函数改为：

function Client() {
    this.username = "username",
    this.password = "Password",
};

Client.printUsername = function() {
    this.username=$("#Username").val()
    console.log(this.username);
};

这相当于一个静态函数。

--编辑--

重新阅读问题和代码，这将无法按预期工作，因为它不可用。静态函数无法访问实例，这就是它们是静态的原因。

【讨论】：

this.username is undefined inside Client.printUsername：它与实例无关。所以this在这种情况下一定不能使用
谢谢@aduch 我在发布答案后注意到了这一点。