Question

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

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);
}

Answer 1

你必须如此实例化Client：

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

这使this内的Client能够引用您真正想要的内容，因为如果没有上述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();

Answer 2

抱歉，我不想下载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>

Answer 3

将功能更改为：

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

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

这相当于静态函数。

- 编辑 -

重新阅读问题和代码，这将无法正常工作，因为这将无法使用。静态函数无权访问实例，这就是它们是静态的原因。

静态函数Javascript

3 个答案:

更新 - 显示所有代码流：