这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻💻，如果我写的文章有幸可以得到你的青睐，万分有幸~
本系列文章在掘金首发，编写不易转载请获得允许
写在前面
本篇文章我们将来学习JavaScript中的对象。通过本篇文章的学习可以掌握什么知识呢？如下图：
对象的概念
对象的概念中包含了什么是对象，对象的属性、对象的方法等，现在我们依次进行学习。
什么是对象
对象即Object，是JavaScript中的一个复杂数据类型，简单的说，一个对象就是一系列属性或方法的集合。
我们可以通过现实生活中的物体来理解对象，例如我们可以把一个杯子当做是一个对象，那么杯子是有颜色、大小、重量等信息的，这些我们可以理解为是这个杯子的属性；而我们使用杯子来喝水，喝水这个动作可以理解为是这个杯子的方法。
这样理解的话，对象的属性就是一系列用来描述对象的信息的，对象的方法就是一系列用来描述对象能做什么。
JavaScript的设计是一个简单地基于对象的方式，也就是说，实际上之前我们所讲解的变量也好，还是函数也好，其实都是说是对象的属性或者方法。
如下示例代码展示了JavaScript中的对象
var obj = {
name: '杯子',
drink: function(){
console.log('杯子可以用来喝水.')
}
}
上述示例代码创建了一个名为obj对象，该对象具有一个name属性和一个drink方法。
说明 ：上述示例代码仅作为展示。
对象的分类
JavaScript中的对象根据作用以及应用场景不同，可以划分为如下三种：
-
内建对象：又称为原生对象，是JavaScript预定义的对象。ECMA-262标准规范定义的，由JavaScript解释器/引擎具体实现并提供的
-
宿主对象：是由JavaScript的运行环境所提供的。例如浏览器环境提供了DOM和BOM等一系列对象。
-
自定义对象：是由开发者根据需求自行创建的对象。
Object对象
Object在JavaScript中是一个预定义函数，也是一个构造函数。
Object 是 JavaScript 语言中所有引用类型的父级，所有的引用类型，可以直接使用Object所提供的属性和方法。
简单来说，我们可以通过Object()函数或者Object()构造函数来创建对象。无论是使用Object()还是 new Object()是等价的。
Object 的方法
当然，由于Object是JavaScript语言中的一个构造函数，所以Object本身提供了一系列方法。这一系列方法可以划分为两种，如下所示：
-
自有方法：构造函数本身的方法 。 通过对象的引用添加的方法。其他对象可能无此方法 ；即使有，也是彼此独立的方法。例如
keys()方法是用来得到当前对象中所有自有可枚举的属性名称。 -
原型方法：通过原型所定义的方法 。用于共享属性和方法 。从原型对象中继承来的方法，一旦原型对象中方法改变，所有继承自该原型的对象 方法 均改变。 例如
hasOwnProperty()方法是用来判断当前对象是否包含指定某个属性。
创建对象
在开发的过程中，我们除了可以使用JavaScript中提供的对象和宿主环境提供的对象之外，我们还可以根据自己的需求自行创建对象，JavaScript中提供创建对象的方式有三种，如下所示：
-
字面量方法创建对象
-
构造函数方式创建对象
-
Object.create()方法创建对象
字面量方法创建对象
使用字面量方式创建对象是JavaScript中最简单的一种方式，语法结构如下：
var obj = {
属性名1: 属性值1,
属性名2: 属性值2,
...
方法名1: function(参数列表) { 方法体1 },
方法名2: function(参数列表) { 方法体2 },
...
}
对象初始化器使用花括号（{}）来创建对象。值得注意的是，在这花括号并不是表示语句块，而是对象。
我们也可以创建一个不具名的对象，语法结构如下：
var obj = {
属性名1: 属性值1,
属性名2: 属性值2,
...
方法名1: function(参数列表) { 方法体1 },
方法名2: function(参数列表) { 方法体2 },
...
}
不具名对象无法在别的地方引用。
使用字面量方式创建对象的代码示例如下：
// obj 表示对象的名字
var obj = {
name: '杯子', // 表示属性
drink: function () { // 表示方法
console.log('杯子可以用来喝水.')
}
}
console.log(obj) // { name: '杯子', drink: [Function: drink] }
使用构造函数创建对象
使用构造函数创建对象具有两种情况，一种是使用JavaScript预定义的构造函数，例如我们之前学习Array()，在JavaScript中，数组也是对象。还有一种就是使用自定义的构造函数来创建对象。
关于自定义构造函数，我们将会在《JavaScript高级语法》中学习。
使用构造函数方式创建对象实例代码如下：
// 创建一个数组，JavaScript中数组即对象
var arr = new Array('1')
console.log(typeof arr) // object
使用Object.create()方法创建对象
Object提供的create()方法同样可以创建对象，并且使用这种方法创建对象允许为该对象选择其原型对象，而不是定义构造函数。
关于原型对象的详细说明，我们将会在《JavaScript高级语法》中学习。
Object.create()的语法结构如下：
Object.create(原型对象[, 自由属性])
使用Object.create()方法创建的对象的示例代码如下：
// 定义一个对象作为原型
var bird = {
name: '小鸟',
sayMe: function () {
console.log('我是一只小鸟');
}
}
// 使用object.create()创建对象，并使用 bird 作为原型对象
var swallow = Object.create(bird)
console.log(swallow.name) // 小鸟
对象的属性
在JavaScript中，一个对象可以有多个属性（其实基本所有的编程语言，一个对象中都具有多个属性），一个属性表示该对象的一个信息。简单的说，一个对象的属性，就是附加在这个对象身上的变量。
属性的命名规则与变量的相同，而只要的注意的是，访问一个未定义对象的属性并不会报错，而是返回undefined。示例代码如下：
var obj = {}
console.log(obj.name) // undefined
访问对象的属性
创建一个对象时会拥有一个或多个属性，可以通过对象的某个属性名称来访问该属性中所存储的数据内容。具体的方式有两种，如下所示：
-
通过点符号（
.）访问某个对象的属性 -
通过方括号（
[]）访问某个对象的属性
如下示例代码展示了上述两种方式来访问对象的属性：
var person = {
name: '彼岸繁華',
hobby: 'coding'
}
// 使用 . 的方式访问
console.log(person.name) // 彼岸繁華
// 使用 [] 方式访问
console.log(person['hobby']) // coding
通过点符号访问对象的属性是一种比较常见的方式，但是通过方括号访问对象的属性是一种更为通用的方式。例如某个对象中存在比较复杂的属性名称时，通过点符号访问可能会出现问题，但通过方括号访问就不会。如下示例代码所示：
var header = {
'charset': 'UTF-8',
'Content-Type': 'text/html'
}
console.log(header["Content-Type"]) // text/html
// console.log(header.Content-Type) // 报错
为对象新增属性
一般情况下，创建对象时会将其所需要的属性一并定义完成。但在开发工作中，经常需要继续为某个对象维护新的属性。JavaScrip是允许为一个已存在的对象新增属性的，具体方式有两种，如下所示：
-
通过点符号（
.）增加某个对象的属性 -
通过方括号（
[]）增加某个对象的属性
示例代码如下：
var person = {
name: '彼岸繁華',
hobby: 'coding'
}
// 使用 . 的方式新增
person.name = '彼岸繁華'
// 使用 [] 方式访问 [任意字符串]
person['hobby'] = 'coding'
console.log(person.name) // 彼岸繁華
console.log(person['hobby']) // coding
删除对象的属性
通过delete运算符我们可以实现删除某个对象的自有属性。示例代码如下
var obj = {
name: 'MacBook',
price:9999
}
console.log(obj.name, '\t\t', obj.price) // MacBook 9999
// 配合 . 的方式删除其属性
delete obj.name
// 配合 [] 的当时删除其属性
delete obj.price
console.log(obj.name, '\t\t', obj.price) // undefined undefined
遍历对象的属性
由于一个对象的属性可以是一个或者多个，并且还可以划分为自有属性和原型属性。有时我们是需要得到某一个对象的所有属性的，所以需要通过遍历的方式来实现。如下所示：
-
for...in循环语句：该方法依次访问一个对象及其原型链中所有可枚举的属性 。 -
Object.keys(object)方法：该方法返回一个数组，该数组包含了对象所有的自有可枚举属性的名称 。 -
Object.getOwnPropertyNames(object)方法：该方法返回一个数组，该数组包含了对象所有的属性名称 。
关于可枚举与不可枚举将会在《JavaScript高级语法》中学习。
for...in语句
我们在学习数组的时候学习了for...in语句。该语句不仅可以遍历数组，而且还可以遍历出该对象中的所有可枚举属性。
而在遍历对象的属性操作上，for...in语句是比较简单并且有效的一种方式。如下示例代码所示：
var person = {
name: '李雷',
age: 28,
job: '售货员',
sex: '男'
}
for (attr in person) {
console.log(person[attr])
}
上面的代码会打印对象中的每一个属性。
值得注意的是，由于for...in语句中的attr是一个变量，想要得到对象的属性值只能使用方括号的方式实现，而不能通过点符号实现的。
Object.keys()方法
Object.keys()方法是有Object提供的一个方法，该方法提供一个对象作为参数，并返回包含了该对象中所有自有可枚举的属性名称。
示例代码如下：
var person = {
name: '李雷',
age: 28,
job: '售货员',
sex: '男'
}
// 1. 获取属性名称
var attrNames = Object.keys(person)
for (var i = 0; i < attrNames.length; i++) {
var attrName = attrNames[i]
// 通过属性名称 获取值
console.log(person[attrName])
}
Object.getOwnPropertyNames()方法
Object.getOwnPropertyNames()方法与Object.keys()方法类似，不同的就是该方法会返回所有的属性名称，而Object.keys()方法仅仅返回自有可枚举属性。
示例代码如下：
var person = {
name: '李雷',
age: 28,
job: '售货员',
sex: '男'
}
// 1. 获取属性名称
var attrNames = Object.getOwnPropertyNames(person)
for (var i = 0; i < attrNames.length; i++) {
var attrName = attrNames[i]
// 通过属性名称 获取值
console.log(person[attrName])
}
对象的方法
在JavaScript中，一个对象可以有多个方法，一个方法描述了一个对象的行为。简单的说，一个对象的方法，就是附加在这个对象身上的变量
对象的方法的增删改查是一致的，唯一不同的就是对象属于可调用的。
总结
预告：下一篇文章我们将来学习JavaScript中的引用类型
精彩文章
【从头学前端】09-JavaScript中的函数（全是基础，看看你都会吗）
