JavaScript 对象入门指南
介绍
JavaScript 中的面向对象编程 (OOP)。
构造函数
原型
课程
遗产
结论
资源
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
介绍
JavaScript 是一种流行的编程语言，常用于 Web 开发。作为 JavaScript 新手，你可能已经接触过这个术语objects，并想知道它的含义。
不过别担心，本文将以一种有趣且易于理解的方式讲解对象。我们还会查看一些代码示例，以帮助你更好地理解对象的概念。
具体来说，我们将探讨面向对象编程、对象方法、原型、继承、构造函数和类。
让我们深入探讨一下这个话题吧！
JavaScript 中的对象是什么？
在 JavaScript 中，对象指的是一组属性。属性由键值对组成，其中键是字符串，值可以是任何数据类型，包括另一个对象。在 JavaScript 中，几乎任何东西都可以被视为对象，每个对象都可以包含带有值的属性。简单来说，对象就像 JavaScript 中的摇滚明星——它们外形炫酷，功能强大，还能帮你高效地组织数据。
让我们来看下面的例子：
// object literals syntax
const person = {
firstName: "Adeola";,
lastName:"Comfort";,
age: 19;,
country: 'Nigeria';
};
在这个例子中，person是一个具有四个属性和值的对象：
- 名字 - 阿德奥拉
- 姓氏 -舒适
- 19岁
- 国家：尼日利亚
访问对象属性
在 JavaScript 中访问对象可以比作进入一个装满珍贵数据的保险库，而打开保险库的钥匙就是对象的属性。访问对象属性有两种方法：使用dot点号表示法或方括号表示法。
让我们来看下面使用点号表示法的例子：
// accessing object value using the dot notation
console.log(person.firstName) // output: Adeola
让我们考虑以下使用方括号 [] 表示法的示例：
//using [] to access object value
console.log(person['age'])
在这个例子中，它person['age']返回 age 属性的值，即19。
对象方法
方法是可以对对象执行的操作。方法仍然是函数，但它是定义在对象上的。
让我们来看下面的例子，创建一个对象方法：
// object literals syntax
const person = {
firstName: "Adeola",
lastName:"Comfort",
age: 19,
country: 'Nigeria',
fullname: function(){
console.log(`Hello, my full name is ${this.firstName} ${this.lastName}`)
};
};
person.fullname()
output: //Hello, my full name is Adeola Comfort
在 JavaScript 中，
this关键字是一个上下文对象，表示当前代码执行的上下文。
获取者和设置者
Getter 用于访问对象的属性，而 Setter 用于更改或修改对象的属性。
让我们来看一个 Getter 的例子：
//Getters
const person = {
firstName: "Blue",
lastName: "Doe",
occupation: "Writer",
get job() {
return this.occupation;
}
};
console.log(person.occupation) // Output: Writer
让我们来看这个二传手的例子：
//object literals syntax
const person = {
firstName: "John",
lastName: "Doe",
occupation: "NO",
set lang(value) {
this.occupation = value;
}
};
person.lang = "Software Developer";
console.log(person.occupation)
//Output: Software Developer
对象条目
该Object.entries()方法将对象转换为键值对数组。
让我们通过以下例子来Object.entries()更好地理解：
//Object literals
const user = {
name: 'Zoe',
age: 4,
color: 'Blue',
email:'zoe@gmail.com'
};
// object.entries
console.log(Object.entries(object1))
/* output
we have a subarray of a key and value pair
[
[ 'name', 'Zoe' ],
[ 'age', 4 ],
[ 'color', 'Blue' ],
[ 'email', 'zoe@gmail.com' ]
]
*/
对象.键
Object.keys返回对象属性名称的数组。例如，让我们来看下面的代码来理解Object.keys：
const user = {
name: 'Zoe',
age: 4,
color: 'Blue',
email:'zoe@gmail.com'
};
console.log(Object.keys(user))
/*output
we have the array of those property name
[ 'name', 'age', 'color', 'email' ]
*/
对象.值
Object.values返回对象值的数组。让我们来看下面的例子：
const user = {
name: 'Zoe',
age: 4,
color: 'Blue',
email:'zoe@gmail.com'
};
console.log(Object.values(user))
/* output
[ 'Zoe', 4, 'Blue', 'zoe@gmail.com' ]
*/
JavaScript 中的面向对象编程 (OOP)。
面向对象编程是一种以对象而非函数为中心的编程范式。
面向对象编程不是一种编程语言，而是一种编程风格。
在 JavaScript 中，objects对象用于对现实世界进行建模，并赋予它们属性。例如，想象一台笔记本电脑：笔记本电脑具有诸如制造商、型号、操作系统、内存规格等对象属性，以及诸如 on()、off() 等方法。
对象可以使用工厂函数或构造函数来定义。只有当对象具有行为时，使用对象字面量语法创建对象才会出现问题。
构造函数
构造函数用于创建具有特定属性和方法的新对象。面向对象编程通常使用构造函数来创建具有相同属性和方法的多个对象实例。
让我们来看一个对象构造函数的例子：
function Person(name, interest) {
this.name = name;
this.interest = interest;
this.greet = function() {
console.log("Hello, my name is " + this.name + " and I love " + this.interest);
}
}
// create new objects from the constructor
let person1 = new Person("John", "Slepping");
let person2 = new Person("Jane", "Writing");
//access properties in the created object
person1.greet(); //Output:Hello, my name is John and I love Slepping
person2.greet(); //Output:Hello, my name is Jane and I love Writing
创建构造函数时，我们使用的构造函数命名约定有所不同，首字母应大写。
在上面的例子中，我们定义了一个Person构造函数，它接受两个参数 `a`name和 `b` interest。在构造函数内部，我们使用`create` 关键字为新创建的对象创建属性。然后，我们使用`create` 关键字并传入相应的参数来this创建该对象的两个实例。Personnew
当我们访问创建的对象 person2.greet 的属性时person1.greet and，我们发现它们包含如上代码片段所示的预期值。
在上面的例子中，我们定义了一个Person构造函数，它接受两个参数 `a`name和 `b` interest。在构造函数内部，我们使用`create` 关键字为新创建的对象创建属性。然后，我们使用`create` 关键字并传入相应的参数来this创建该对象的两个实例。Personnew
当我们访问创建的对象 person2.greet 的属性时person1.greet and ，我们发现它们包含如上代码片段所示的预期值。
原型
JavaScript 中的每个对象都有一个原型属性，用于实现对象继承。原型属性是一个对象，它充当创建新对象的模板或蓝图。
当调用对象的属性或方法时，JavaScript 首先会在对象本身查找该属性或方法。如果找不到，它会在对象的原型属性中查找。如果仍然找不到，它会沿着原型链向上查找，直到找到链的末端对象为止Object.prototype。
让我们来看下面的例子：
// create the constructor
function Students(name, age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
this.register = function() {
console.log("Hello, " + this.name + " you have been registered");
}
}
// creating a method using the prototype keyword
Students.prototype.greet = function() {
console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
}
// generate new objects from the constructor
let person1 = new Students("July", 30);
let person2 = new Students("Jane", 35);
person1.register(); // "Hello, July you have been registered"
person2.register(); // "Hello, Jane you have been registered"
person1.greet(); // "Hello, my name is July and I'm 30 years old."
person2.greet(); // "Hello, my name is Jane and I'm 35 years old."
给定的代码定义了一个名为 `constructor` 的构造函数Students。该构造函数接受三个参数（` namea`、age`b` 和 ` gradec`），并使用 `new` 关键字将它们赋值给新创建的 `constructor` 对象this。它还定义了一个名为 `login` 的方法register()，该方法会向控制台输出一条消息，欢迎学生并告知他们已注册成功。
然后，利用prototype构造函数的属性，它定义了另一个名为 的方法greet()。该greet()方法向控制台输出一条消息，介绍学生的姓名和年龄。
最后，代码使用关键字并传入每个学生属性的相应值，创建了该对象的两个实例。当Students对 每个对象调用该方法时，它会在控制台输出一条欢迎消息。同样地，当对每个对象调用该方法时，它会在控制台输出一条介绍消息。person1person2newregister()greet()
课程
在 JavaScript 中，类提供了一种定义蓝图的方法，用于创建具有相似属性和方法的对象。类是 JavaScript 中现有的基于原型的继承系统的语法糖。
以下是如何在 JavaScript 中创建类的示例：
//create the class constructor
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
}
}
const student2 = new Person('Adeola', '30')
console.log(student2)
遗产
继承是指一个对象能够从父对象继承属性和方法的能力。在 JavaScript 类中，继承是通过使用 `extends` 关键字来创建继承自父类的子类来实现的。
继承的核心思想是代码重用。继承自父类使得子类能够使用父类的所有方法和属性。
以下示例展示了如何创建一个 Person 类，并创建一个继承自该类的子类：
// create the constructor
class Person {
constructor(name, age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
}
greet() {
console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
}
}
class Student extends Person {
study() {
console.log(this.name + " is studying hard for his " + this.grade + ' grade');
}
}
const student1 = new Student("John", 18, '12th');
student1.greet(); // Output: "Hello, my name is John and I'm 18 years old."
student1.study(); // Output: "John is studying hard for his 12th grade."
结论
总之，理解对象对于Web开发至关重要。通过了解对象包含哪些内容以及如何应用，开发人员可以编写更高效的代码。
需要说明的是，我并非这些领域的专家。我只是分享我一路以来所学到和理解的知识。希望你们能从中有所收获。
资源
我强烈建议您查看以下资源，其中对相关概念进行了更深入的解释：
欢迎随时提问或留言。您可以通过Twitter、LinkedIn或GitHub联系我。敬请期待我即将发布的博文，其中我将探讨 Web 开发的另一个重要领域。作为一名开发者，我乐于分享更多信息。祝您编程愉快，一切顺利！
文章来源：https://dev.to/comfortdeola/a-beginners-guide-to-objects-in-javascript-59ac