我的对象没有方法？

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 的原型。而是将函数分配给Person.prototype 的setFirstName 属性：

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

说明

要理解错误，我们首先要了解prototypes 在Javascript 中是如何工作的。当使用函数构造函数创建对象的实例时，实例的原型被分配构造函数的原型。

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 的属性，这样我们就不会创建指示何时可以创建Person 实例的临时耦合。

这个article 很好地解释了prototype，值得一读。