在 Javascript 中，我们为什么要使用函数来创建对象？

Question

Going through some basic lessons on creating objects over at javascript.info.

I'm trying to grasp on choosing which way to make objects. Because there's so many ways to do it. Also, why do we use functions to make objects? And why do we use constructor functions to make objects when we can do without it? In what situation one way is preferred over the other?

Here's three ways:

1:

let name = "bob";
let age = 24;

let user = {
  name: name,
  age: age,
}

alert(user.name);

2:

function obj(name, age) {
return {
  name: name,
  age: age,
};
}

let user = obj("bob", 24);

alert(user.name);

3:

function User(name, age) {
    this.name = name;
  this.age = age;
}

let user = new User("bob", "24")

alert(user.age);

isn't codes from 2 and 3 practically serve the same purpose of making a blueprint object? thanks.

Answer 1

1 and 2 create same object which are instances of Object . 3 creates an object which is Instance if User as well as Object . Using method 3, you can get achieve Inheritance or at least add common properties and methods to all the instances of that class/function (User). eg

 function User(name, age) { this.name = name; this.age = age; } User.prototype.showDetails = function () { console.log(`Name: ${this.name}\\nAge: E${this.age}`); } let user1 = new User("Bob", "24"); let user2 = new User("John", "25"); console.log(user1.showDetails()); console.log(user2.showDetails());

Answer 2

Option 1 creates a simple object. It's a sensible approach if you just want to store some key/data pairs.

Option 2 lets you generate lots of similar objects with slight variations in data.

Option 3 is not very useful unless you combine it with a prototype so that the generated object has methods and makes use of inheritance.

The Option 3 approach is superseded by class syntax .

Answer 3

Your option 2 and 3 is more like making a class than an object

The problem is, javascript only recently started defining things like classes and objects and instantiated objects.

For your enjoyment, here is way number 4

class User{
  constructor (name, age) {
    this.name = name
    this.age = age
  }
}

let user = new User("bob", "24")

This new way allows you to extend another class, giving you proper inheritance.

class Person{
   constructor (gender) {
     this.gender=gender
   }
}
class User extends Person{
  constructor (name, age, gender) {
    super(gender)
    this.name = name
    this.age = age
  }
}

let user = new User("bob", "24", 'male')

Answer 4

The difference between 1 and 2 is negligible.

Number 1 is an object you've constructing using the {} syntax. Number two is a function that returns an object that you've made using the {} syntax. The function is not part of the process here, it's simply returning a simple value, an object.

EVERYTHING is an object in javascript. Not actually, but mostly. Arrays are objects, these key value pairs you've made are an object (and each value in your object could also be set to an object). Strings are objects, FUNCTIONS are objects. Every non primitive datatype is an object.

Number 3 is a class. Still an object, but with the properties of a class, including having an constructor. An object is simply a value, and a data structure, with no explicit typing.