解释

Question

我很难理解为什么这段代码不起作用。从我可以告诉我的语法是正确的但是console.log抱怨我的person对象没有方法setFirstName。这是我到目前为止所得到的：

HTML

<input type="text" id="firstName">

JQuery的

$(document).ready( function() {
    $("#firstName").on("change", getFirstName);

    var person = new Person();

    function Person() {
        this.firstName = "";
    }

    Person.prototype = {
        setFirstName: function(name) {
            this.firstName = name;
            console.log("My first name is: " + person.firstName);
        }
    }

    function getFirstName() {
        var firstName = $("#firstName").val();
        person.setFirstName(firstName);
    }
});

控制台日志显示此错误并指向“person.setFirstName（firstName）”代码行：

Uncaught TypeError: Object #<Person> has no method 'setFirstName'

令我感到困惑的是，它识别出Person对象存在，但后来却没有看到方法setFirstName。我做错了什么？帮助我掌握编码员，你是我唯一的希望。

Answer 1

当前代码将对象文字指定给Person的原型。而是将函数分配给setFirstName的{{1}}属性：

Person.prototype

解释

要理解错误，我们必须首先了解Person.prototype.setFirstName = function(name) { this.firstName = name; console.log("My first name is: " + this.firstName); }在Javascript中的工作原理。当使用函数构造函数创建对象的实例时，将为实例的原型分配构造函数的原型。

prototype

在提供的代码中，使用function MyObject(){} var myObj = new MyObject(); console.log(myObj.__proto__ == MyObject.prototype); //logs true构造函数创建Person的实例。这会导致Person分配person的原型。

Person

然后将包含var person = new Person(); function Person() { this.firstName = ""; } console.log(person.__proto__); //logs Person{}函数的对象文字分配给setFirstName的原型。

Person

此时，使用函数将Person.prototype = { setFirstName: function(name) { this.firstName = name; console.log("My first name is: " + person.firstName); } }原型分配给对象文字，但是在将对象文字分配给Person的原型之前创建了实例person。实例Person的原型不会引用在实例化后分配给person的对象文字。

Person.prototype

虽然不推荐，但我们可以通过在分配新原型后创建console.log(person.__proto__ == Person.prototype); //logs false实例来解决或避免此问题，例如：

person

将方法分配给$(document).ready( function() { $("#firstName").on("change", getFirstName); function Person() { this.firstName = ""; } Person.prototype = { setFirstName: function(name) { this.firstName = name; console.log("My first name is: " + person.firstName); } } var person = new Person(); function getFirstName() { var firstName = $("#firstName").val(); person.setFirstName(firstName); } });属性要好得多，这样我们就不会创建指示何时可以创建Person.prototype实例的临时耦合。

此article在解释Person方面表现出色，值得一读。

我的对象没有方法？

1 个答案:

解释