JS面向对象编程基础篇（一） 对象和构造函数实例详解

那么让我们来详细讲解一下“JS面向对象编程基础篇（一） 对象和构造函数实例详解”的完整攻略。

什么是对象和构造函数

对象是 JavaScript 中一种复合数据类型，由属性和方法组成，用于存储和操作数据。可以通过对象字面量或构造函数来创建。

构造函数是创建对象的一种特殊方式。它是一种函数，当用 new 关键字调用时，它将返回一个新的对象，并通过原型继承关联到构造函数的 prototype 属性。特别地，如果构造函数没有 return 语句，或者返回的不是一个对象类型，那么 new 关键字返回的对象就是这个构造函数创建的对象本身。

下面是一个创建对象的示例：

const person = {
  name: '张三',
  age: 18,
  sayHello() {
    console.log(`大家好，我是${this.name}`);
  }
};

上面的代码中，person 是一个对象，它有两个属性 name 和 age，以及一个方法 sayHello。 this 关键字引用了当前的对象，所以当 sayHello 方法被调用时，this.name 将返回 person.name 的值。

下面是一个使用构造函数创建对象的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`大家好，我是${this.name}`);
  }
}

const person = new Person('张三', 18);

上面的代码中，我们定义了一个 Person 构造函数，创建了一个 person 对象，并将其赋值给了变量 person。这个对象有两个属性 name 和 age，以及一个方法 sayHello，其实现方式与前面例子中创建的对象的方法相同。但是与字面量方式不同的是，这个方法是通过 Person 构造函数的实例创建的。

对象和构造函数的详解

对象可以有一些内置的方法来访问或修改它的属性，例如：

const person = {
  name: '张三',
  age: 18,
  sayHello() {
    console.log(`大家好，我是${this.name}`);
  }
};

// 使用点语法访问对象属性
console.log(person.name); // 输出："张三"

// 使用方括号语法访问对象属性
console.log(person['age']); // 输出：18

// 修改对象属性
person.age = 20;
console.log(person.age); // 输出：20

// 调用对象方法
person.sayHello(); // 输出："大家好，我是张三"

构造函数在创建实例时，可以使用 this 关键字来引用实例对象。在构造函数中为实例对象添加属性和方法时，直接使用 this 就可以了。下面的示例展示了如何使用构造函数来创建对象，并访问和修改它们的属性：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`大家好，我是${this.name}`);
  }
}

const person1 = new Person('张三', 18);
const person2 = new Person('李四', 20);

// 访问实例的属性
console.log(person1.name); // 输出："张三"
console.log(person1.age); // 输出：18

// 修改实例的属性
person1.age = 22;
console.log(person1.age); // 输出：22

// 调用实例的方法
person1.sayHello(); // 输出："大家好，我是张三"

示例说明

示例1：使用对象字面量创建对象

下面的示例展示了如何使用对象字面量来创建一个 person 对象，包括添加属性和方法，并访问和修改它们：

const person = {
  name: '张三',
  age: 18,
  sayHello() {
    console.log(`大家好，我是${this.name}`);
  }
};

console.log(person.name); // 输出："张三"
console.log(person.age); // 输出：18
person.age = 20;
console.log(person.age); // 输出：20
person.sayHello(); // 输出："大家好，我是张三"

示例2：使用构造函数创建对象

下面的示例展示了如何使用 Person 构造函数来创建一个 person 对象，包括添加属性和方法，并访问和修改它们：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`大家好，我是${this.name}`);
  }
}

const person = new Person('张三', 18);

console.log(person.name); // 输出："张三"
console.log(person.age); // 输出：18
person.age = 20;
console.log(person.age); // 输出：20
person.sayHello(); // 输出："大家好，我是张三"

以上就是关于“JS面向对象编程基础篇（一） 对象和构造函数实例详解”的完整攻略，希望对你有所帮助。