在JavaScript中创建对象并添加属性和方法

Question

我刚刚开始研究javaScript中的对象，并遇到了一些麻烦。 我将逐步解释我尝试做的事情，并在我没有完全掌握的步骤时提出问题。

我创建了一个称为人的对象。 然后，我想添加一个名为“ firstName”的属性，其值为“ Isaac”。 为此，我创建了一个构造函数。

var person = new print1("Isaac")

function print1(firstName) {
    this.firstName = firstName;
}

到目前为止没有问题。 但是，我想使函数返回“我的名字是” + person.firstName +“。 但是当我把它放在里面的时候我做不到。

function print1(firstName) {
    this.firstName = firstName;
    return "My name is " + this.firstName + "." 
}

我的想法是，我应该能够只调用person.print1（）和“我的名字是Isaac”。 会出现。

为什么不起作用？ 还是我不能这样做？

我已经尝试过使用下面的函数进行类似的操作，但也无法使其正常工作。 当我运行它时，我收到一条错误消息，指出“ person.print2（）不是函数。

function print2(firstName, lastName, nationality) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.nationality = nationality;
    return "My name is " + this.firstName + " " + this.lastName + " from " + this.nationality + ".";
}
console.log(person.print2());

person = new print2("Isaac", "Newton", "England");

谢谢你的帮助！

Answer 1

根本问题是您试图将构造函数和方法合并为一件事。 它们是您明确定义的不同事物。

因此，您将拥有一个构造函数（惯例是它们具有大写的首字母）：

function Person(name) {
    this.name = name;
}

...然后您可以通过将其添加到函数的prototype对象中，来向使用该构造函数创建的对象添加方法：

Person.prototype.print1 = function() {
    return "My name is " + this.name;
};

你打电话时

var person = new Person("Isaac");

......在new运营商创建一个新对象，并赋予它这是从一个基本的原型 Person.prototype属性，然后调用Person与功能this指的是新的对象，我们在代码Person存储中传递的名称在对象上作为name属性。

当你调用print1上， this再次被设置为参考对象，因此this.name给我们的名字：

console.log(person.print1()); // "My name is Isaac"

所有这些的实时示例：

 function Person(name) { this.name = name; } Person.prototype.print1 = function() { return "My name is " + this.name; }; var person = new Person("Isaac"); snippet.log(person.print1()); // "My name is Isaac" 

 <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

你不必定义上的方法Person.prototype对象，你还可以在构造函数中定义它们，就像这样：

function Person(name) {
    this.name = name;
    this.print1 = function() {
        return "My name is " + this.name;
    };
}

使用原型的好处是，通过new Person创建的所有对象都共享相同的基础原型，因此它们共享方法，这对提高内存效率很有用。 当您在构造函数中定义方法时，它们不会共享（尽管现代JavaScript引擎可以对此进行优化）。 有时在构造函数中定义它们很有用，例如，当您希望它们可以访问您无法在对象本身上获得的信息时（例如，真正私有的信息（完全封装的信息））。

使用原型还意味着它们都共享相同的方法，因此如有必要，您可以重新定义这些方法，并且所有现有实例立即开始使用重新定义的版本，如下所示：

 function Person(name) { this.name = name; } Person.prototype.print1 = function() { return "My name is " + this.name; }; var isaac = new Person("Isaac"); var joe = new Person("Joe"); snippet.log(isaac.print1()); // "My name is Isaac" snippet.log(joe.print1()); // "My name is Joe" Person.prototype.print1 = function() { return "Hi there, my name is " + this.name; }; snippet.log(isaac.print1()); // "Hi there, my name is Isaac" snippet.log(joe.print1()); // "Hi there, my name is Joe" 

 <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

---

任何优秀的JavaScript书都可以带您了解这些内容，以下是现成的清单：

• JavaScript： David Flanagan 的权威指南

• Marijn Haverbeke的Eloquent JavaScript （可在线免费获得）

您还会有其他人推荐Douglas Crockford的JavaScript：The Good Parts 。 我不建议刚起步的人使用它，更多的是已经熟悉该语言的人，并且主要是一个意见书，描述了Crockford在编写JavaScript时所做的和不喜欢的（JavaScript和Crockford的从那时起，观点一直在发展）。 克罗克福德（Crockford）聪明而有见识，但不幸的是，在我看来，他并没有很好地将自己的观点与事实区分开，这本书的某些部分特别是对于初学者来说，具有误导性。

Answer 2

您无法调用person.print1因为您的对象中没有print1方法。 从构造函数返回值无效，因为它已经在返回您创建的对象。

要在对象上调用方法，您需要向对象添加方法。 您可以在构造函数中将方法添加为属性：

  function Person(firstName) { this.firstName = firstName; this.print = function() { return "My name is " + this.firstName + "."; }; } var isaac = new Person("Isaac"); // output result in Stackoverflow snippet document.write(isaac.print()); 

您也可以将方法放在类的原型中：

 function Person(firstName) { this.firstName = firstName; } Person.prototype = { print: function() { return "My name is " + this.firstName + "."; } }; var isaac = new Person("Isaac"); // output result in Stackoverflow snippet document.write(isaac.print()); 

您甚至可以通过在创建对象后添加方法来扩展对象：

 function Person(firstName) { this.firstName = firstName; } var isaac = new Person("Isaac"); var john = new Person("John"); isaac.print = function() { return "My name is " + this.firstName + "."; }; john.print = function() { return "Call me " + this.firstName + "."; }; // output result in Stackoverflow snippet document.write(isaac.print()); document.write(john.print()); 

Answer 3

首先，构造函数应以大写字母开头：

var person = new Person("Isaac");

function Person(name) {
    this.name = name;
};

其次，定义这样的print方法：

function Person(name) {
    this.name = name;
    this.print = function() {
        return "My name is " + this.name;
    };
};

并调用person.print()调用它。 请注意，在这种情况下，您需要在实例化person之前定义Person构造函数。

在开始时，您还需要做更多的工作（例如，原型制作）。 另外，请查看有关JavaScript对象创建模式的这篇精彩文章： http : //leoasis.github.io/posts/2013/01/24/javascript-object-creation-patterns 。