JavaScript对象字面量和构造函数原理与用法详解

什么是JavaScript对象

在Javascript中，对象是指一组属性的集合，每个属性都是一个键值对。可以将它们看作是一些具有状态和行为的实体。JavaScript中有两种常见的对象创建方法：对象字面量和构造函数。在研究这两种方法之前，先来看看一般的对象创建方式：

var person = {};
person.name = "Tom";
person.age = 18;
person.sayName = function() {
  console.log(this.name);
}

在上面的代码中，我们创建了一个名为person的对象，它有两个属性name和age，还有一个方法sayName，这个方法会输出该对象的name属性值。对象创建完毕后，我们可以通过如下方式调用该方法：

person.sayName(); // 输出 "Tom"

从上面的示例可以看出，原生的JavaScript对象其实就是一些具有属性和方法的实体，能够动态的添加、删除属性和方法。

对象字面量

对象字面量是创建对象的一种简单方式，其中包含若干个键值对。我们可以在花括号中添加属性和方法，如下所示：

// 创建一个空对象
var person = {};

// 添加属性和方法
person.name = "Tom";
person.age = 18;
person.sayName = function() {
  console.log(this.name);
};

我们还可以使用更简洁的方式创建一个对象：

var person = {
  name: "Tom",
  age: 18,
  sayName: function() {
    console.log(this.name);
  }
};

在这个示例中，我们首先创建了一个空对象，然后通过添加键值对的方式创建了一个拥有三个属性和一个方法的对象。可以看到，使用对象字面量创建对象非常简单方便。

构造函数

构造函数是一种创建对象的模板，我们可以通过构造函数创建多个拥有相同属性和方法的对象。构造函数中的this关键字代表将要创建的对象本身。下面是一个简单的示例：

// 创建一个Person对象的构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
    console.log(this.name);
  };
}

// 使用构造函数创建两个Person对象
var person1 = new Person("Tom", 18);
var person2 = new Person("Jerry", 20);

// 调用对象的方法
person1.sayName(); // 输出 "Tom"
person2.sayName(); // 输出 "Jerry"

在这个示例中，我们首先定义了一个名为Person的构造函数，它有两个参数name和age，分别代表创建对象时的属性。在构造函数内部，我们通过使用this关键字为要创建的对象添加属性和方法。然后，通过new关键字调用该构造函数，创建了两个对象person1和person2。注意，每次使用构造函数创建对象时，都会重新创建一个相同属性和方法的新对象。

总结

对象字面量和构造函数都是JavaScript中创建对象的常用方法。使用对象字面量可以方便地创建一个对象，而使用构造函数则可以创建多个拥有相同属性和方法的对象。无论使用哪种方法，它们都可以动态地添加、删除属性和方法，使对象具备更加丰富的功能。

示例1

var circle = {
  radius: 5,
  area: function() {
    return this.radius * this.radius * Math.PI;
  }
};
console.log(circle.radius); // 输出 5
console.log(circle.area()); // 输出 78.53981633974483

在这个示例中，我们创建了一个名为circle的对象，拥有一个属性radius表示圆的半径，还有一个方法area用于计算圆的面积。我们可以通过访问circle的属性和调用circle的方法来获取圆的相关信息。

示例2

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = new Person("Tom", 18);
var person2 = new Person("Jerry", 20);

console.log(person1.name); // 输出 "Tom"
console.log(person2.age); // 输出 20
person1.sayName(); // 输出 "Tom"
person2.sayName(); // 输出 "Jerry"

这个示例中，我们首先定义了一个名为Person的构造函数，它有两个参数name和age，用于创建拥有这两个属性的对象。然后，我们在Person.prototype上定义了一个方法sayName，它用于输出该对象的name属性值。

最后，我们使用构造函数创建了两个不同的对象person1和person2，并访问了它们的属性和方法。注意，在这个示例中，我们通过将sayName方法添加到Person.prototype对象上，使它成为共有的方法，这样所有通过Person构造函数创建的对象都可以共享这个方法的实现。这也是使用构造函数创建对象比使用对象字面量更灵活的原因之一。