Web/03-JavaScript基础/07-对象简介.md
2019-01-11 19:52:53 +08:00

300 lines
6.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 对象简介
### 基本数据类型和引用数据类型的对比
- **基本数据类型(值类型)**String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- **引用数据类型(引用类型)**Object 对象。
**基本数据类型**
基本数据类型的值直接保存在**栈内存**中,值与值之间是独立存在,修改一个变量不会影响其他的变量。
**对象**
只要不是那五种基本数据类型,就全都是对象。
如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
对象是保存到**堆内存**中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址(对象的引用)。
换而言之,对象的值是保存在**堆内存**中的,而对象的引用(即变量)是保存在**栈内存**中的。
**如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响**
例如:
```javascript
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
//修改obj的name属性
obj.name = "猪八戒";
```
上面的代码中当我修改obj的name属性后会发现obj2的name属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。
## 对象的分类
1.内置对象:
- 由ES标准中定义的对象在任何的ES的实现中都可以使用
- 比如Math、String、Number、Boolean、Function、Object....
2.宿主对象:
- 由JS的运行环境提供的对象目前来讲主要指由浏览器提供的对象。
- 比如 BOM DOM。比如`console`、`document`。
3.自定义对象:
- 由开发人员自己创建的对象
## 对象的基本操作
### 创建对象
使用new关键字调用的函数是构造函数constructor。**构造函数是专门用来创建对象的函数**。
例如:
```javascript
var obj = new Object();
```
另外,使用`typeof`检查一个对象时,会返回`object`。
### 向对象中添加属性
在对象中保存的值称为属性。
向对象添加属性的语法:
```javascript
对象.属性名 = 属性值;
```
举例:
```javascript
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
```
打印结果:
```
{
"name":"孙悟空",
"gender":"男",
"age":18
}
```
### 获取对象中的属性
语法:
```javascript
对象.属性名
```
如果获取对象中没有的属性,不会报错而是返回`undefined`。
举例:
```javascript
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;
// 获取对象中的属性,并打印出来
console.log(obj.gender); // 打印结果:男
console.log(obj.color); // 打印结果undefined
```
### 修改对象的属性值
语法:
```javascript
对象.属性名 = 新值
```
```javascript
obj.name = "tom";
```
### 删除对象的属性
语法:
```javascript
delete obj.name;
```
## 对象的属性名和属性值的补充
### 属性名:可以使用`[]`这种形式去操作属性
对象的属性名不强制要求遵守标识符的规范,但是我们使用是还是尽量按照标识符的规范去做。
但如果要使用特殊的属性名,就不能采用`.`的方式来操作对象的属性。比如说,`123`这种属性名,如果我们直接写成`obj.123 = 789`,是会报错的。那怎么办呢?办法如下:
需要使用另一种方式。语法格式如下:(读取时,也是采用这种方式)
```
对象["属性名"] = 属性值
```
上面这种语法格式,举例如下:
```javascript
obj["123"] = 789;
```
**重要**:使用`[]`这种形式去操作属性,更加的灵活,因为,我们可以在`[]`中直接传递一个**变量**,这样变量值是多少就会读取那个属性。
### 属性值js中的属性值可以是一个对象
JS对象的属性值可以是任意的数据类型甚至也**可以是一个对象**。
举例:
```javascript
var obj = new Object();
obj.test = true;
obj.test = null;
obj.test = undefined;
//创建一个对象
var obj2 = new Object();
obj2.name = "smyhvae";
//将obj2设置为obj的属性
obj.test = obj2;
console.log(obj.test.name);
```
打印结果为smyhvae
### in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true没有则返回false。
语法:
```javascript
"属性名" in 对象
```
举例:
```javascript
//检查obj中是否含有name属性
console.log("name" in obj);
```
我们平时使用的对象不一定是自己创建的可能是别人提供的这个时候in 运算符可以派上用场。
## 对象字面量
如果要创建一个对象,我们可以使用下面这种方式:
```javascript
var obj = new Object();
```
但是上面的这种方式,比较麻烦,我们还有更简洁的方式来创建一个对象。如下。
使用对象字面量来创建一个对象:
```javascript
var obj = {};
```
使用对象字面量,可以在创建对象时,直接指定对象中的属性。语法:{属性名:属性值,属性名:属性值....}
例如:
```javascript
var obj2 = {
name: "猪八戒",
age: 13,
gender: "男",
test: {
name: "沙僧"
}
//我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
sayName: function(){
console.log('smyhvae');
}
};
```
对象字面量的属性名可以加引号也可以不加,建议不加。如果要使用一些特殊的名字,则必须加引号。
属性名和属性值是一组一组的键值对结构,键和值之间使用`:`连接,多个值对之间使用`,`隔开。如果一个属性之后没有其他的属性了,就不要写`,`,因为它是对象的最后一个属性。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)