Javascript中面向对象的问题 [英] Object Oriented questions in Javascript

问题描述

我一直在使用javascript，但从未学过语言超过基础知识。我正在阅读John Resig的Pro Javascript技术 - 我想出了一些问题，但我没有在书中或谷歌上找到答案。

I've been using javascript for a while, but have never learned the language past the basics. I am reading John Resig's "Pro Javascript Techniques" - I'm coming up with some questions, but I'm not finding the answers to them in the book or on google, etc.

John在他的书中给出了这个例子：

功能＃1

John gives this example in his book:
Function #1

function User( name, age ){
  this.name = name;
  this.age = age;
}
// Add a new function to the object prototype
User.prototype.getName = function(){
  return this.name;
};
User.prototype.getAge = function(){
  return this.age;
};
var user = new User( "Bob", 44 );
console.log("User: " + user.getName() + ", Age: " + user.getAge());

我还在学习 prototype 属性，所以我试着写类似的东西：

功能＃2

I'm still learning about the prototype property, so I tried writing something similar:
Function #2

function User (name, age ) {
  this.name = name;
  this.age = age;
  this.getName = function() {
    return this.name;
  };
  this.getAge = function() {
    return this.age;
  };
}
var user = new User( "Bob", 44 );
console.log("User: " + user.getName() + ", Age: " + user.getAge());

它不使用 prototype 属性来创建getName和getAge函数，但输出与John的例子相同。

It doesn't use the prototype property to create the getName and getAge functions, but the output is the same as John's example.

我更进了一步，创造了这个：

功能＃3

I took it one step further, and created this:
Function #3

var User = {
  name: "",
  age: 0,
  setName: function(name) {
    this.name = name;
  },
  setAge: function(age) {
    this.age = age;
  },
  getName: function() {
    return this.name;
  },
  getAge: function() {
    return this.age;
  }
};
User.setName("Bob");
User.setAge(44);
console.log("User: " + User.getName() + ", Age: " + User.getAge());

再次 - 它看起来与John的例子不同（我必须添加setter方法），但输出是一样的。

Again - it looks different than John's example (and I had to add setter methods), but the output is the same.

问题＃1 - 3个功能有什么区别？ prototype属性的优点是什么，而且Function＃2做错了什么，因为它似乎更直接代码＃2而不是＃1（尽管我确信＃1在John创建它时更好看） 。

Question #1 - what is the difference between the 3 functions? What is the advantage of the prototype property, and is Function #2 doing anything incorrectly, because it seems more straight forward to code #2 instead of #1 (although I'm sure #1 is doing it better seeing as John created it).

问题＃2 - 如何修改函数＃3以不使用setName和setAge方法，但仍保留{.. 。}简写？ {...}速记可以有构造函数吗？

Question #2 - How could I modify function #3 to not use the setName and setAge methods, but still keep the {...} shorthand? Can the {...} shorthand have constructors?

提前感谢您帮助我学习！

Thanks in advance for helping me learn!

EDIT
我认为我的第二个问题有点令人困惑。我的意思是我怎么能用{...}简写来创建一个User对象，但是在我创建对象之后，请说出如下内容：

EDIT I think my 2nd question was a little confusing. I meant how could I use the {...} shorthand to create a User object, but then after I create the object, say something like:

var user = new User("Bob", 44);

就像在功能＃1中一样 - 或者这是不可能的？

Just like in Function #1 - or is that not possible?

编辑＃2
哇！谢谢大家的精彩回答。这真的让我更加清楚。因此，如果我理解正确，＃1和＃2之间的差异不会太大。如果我只创建一个用户对象 - 它们可能完全不同。但是如果我的程序创建了许多User对象，那么＃1很可能会更高效并且使用更少的内存，因为所有对象都将共享相同的功能。

EDIT #2 Wow! Thanks everyone for the awesome answers. That really makes it a lot more clear to me. So if I understand correctly, the difference between #1 and #2 aren't too much. If I only ever create one "User" object - they probably aren't different at all. But if my program creates many User objects, #1 would most likely be more efficient and use less memory since all objects will share the same functions.

我非常感谢所有很棒的答案 - 谢谢！

I really appreciate all of the great answers - Thanks!

推荐答案

每次评估一个function（）{}时，它都会创建一个新的函数对象。因此，在＃1中，所有User对象共享相同的getName和getAge函数，但在＃2和＃3中，每个对象都有自己的getName和getAge副本。所有不同的getName函数都表现完全相同，因此您无法看到输出中的任何差异。

Every time a function() {} is evaluated, it creates a new function object. Therefore, in #1 all of the User objects are sharing the same getName and getAge functions, but in #2 and #3, each object has its own copy of getName and getAge. All of the different getName functions all behave exactly the same, so you can't see any difference in the output.

{...}缩写是一个构造函数。在计算时，它构造一个具有给定属性的新对象。当您运行新用户（...）时，它会构造一个新的用户。您碰巧创建了一个与用户具有相同行为的Object，但它们的类型不同。

The {...} shorthand is a constructor. When evaluated, it constructs a new "Object" with the given properties. When you run "new User(...)", it constructs a new "User". You happen to have created an Object with the same behavior as a User, but they are of different types.

对评论的回应：

你不能，直接。您可以创建一个按＃3创建新对象的函数。例如：

You can't, directly. You could make a function that creates a new object as per #3. For example:

function make_user(name, age) {
    return {
        name: name,
        age: age,
        getName: function() { return name; },
        getAge: function() { return age; },
    };
}

var user = make_user("Joe", "18");

这篇关于Javascript中面向对象的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！