关键词

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

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

什么是对象和构造函数

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

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

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

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

上面的代码中,person 是一个对象,它有两个属性 nameage,以及一个方法 sayHellothis 关键字引用了当前的对象,所以当 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。这个对象有两个属性 nameage,以及一个方法 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面向对象编程基础篇(一) 对象和构造函数实例详解”的完整攻略,希望对你有所帮助。

本文链接:http://task.lmcjl.com/news/10617.html

展开阅读全文