静态函数Javascript

Static function Javascript

本文关键字：Javascript 静态函数      更新时间：2023-09-26

我想有一个原型，并调用静态函数。下面是我的代码:

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

对不起，我不想下载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>

您必须像这样实例化您的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();

将函数改为:

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

相当于静态函数

——编辑——

重新阅读问题和代码，这不会像预期的那样工作，因为这将不可用。静态函数不能访问实例，这就是为什么它们是静态的。

相关文章：