JS之对象

Posted 2020-12-10 才华充电中

一、对象

1、面向对象简介

面向对象：可以创建自定义的类型，很好的支持继承和多态。

面向对象的特征：封装、继承、多态。

2、对象的概念

在 javascript 中，对象是一组无序的相关属性和方法的集合。

对象的作用是：封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。

对象具有特征（属性）和行为（方法）。

 

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

比如，如果要保存一个人的信息，通过数组的方式可以这样保存：

```javascript
var arr = [‘王二‘, 35, ‘男‘, ‘180‘];
```

上面这种表达方式比较乱。而如果用JS中的对象表达，结构会更清晰。如下：

```javascript
var person = {};

person.name = ‘王二‘;
person.age = 35;
person.sex = ‘男‘;
person.height = ‘180‘;
```

由此可见，对象里面的属性均是**键值对**：

- 键：相当于属性名。

- 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。

两条补充

补充1：对象的属性值可以是任何的数据类型，也可以是个**函数**：（也称之为方法）

```javascript
var obj = new Object();
obj.sayName = function () {
console.log(‘smyhvae‘);
};

console.log(obj.sayName); //没加括号，就是获取方法
console.log(‘-----------‘);
console.log(obj.sayName()); //加了括号，就是调用方法。即：执行函数内容，并执行函数体的内容

```

补充2：对象中的属性值，也可以是一个对象。

举例：

```javascript
//创建对象 obj1
var obj1 = new Object();
obj1.test = undefined;

//创建对象 obj2
var obj2 = new Object();
obj2.name = "smyhvae";

//将整个 obj2 对象，设置为 obj1 的属性
obj1.test = obj2;

console.log(obj1.test.name);
```

打印结果为：smyhvae

 

二、对象和数据类型之间的关系

1、数据类型分类

- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。

- **引用数据类型（引用类型）**：Object 对象。

**基本数据类型**：

基本数据类型的值直接保存在**栈内存**中，值与值之间是独立存在，修改一个变量不会影响其他的变量。

**对象**：

1）只要不是那五种基本数据类型，就全都是对象。

2）如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体。

3）对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

4）对象是保存到**堆内存**中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址（对象的引用）。换而言之，对象的值是保存在**堆内存**中的，而对象的引用（即变量）是保存在**栈内存**中的。

5）如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

一个经典的例子

```javascript
var obj = new Object();
obj.name = "孙悟空";

var obj2 = obj;

//修改obj2的name属性
obj2.name = "猪八戒";
```

上面的代码中，当我修改 obj2 的name属性后，会发现，obj 的 name 属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。

 

对于引用类型的数据，赋值相当于地址拷贝，a、b占用了同一段地址。所以改了b，a也会变；本质上a、b就是一个东西。

如果你打算把引用类型 A 的值赋值给 B，让A和B相互不受影响的话，可以通过 Object.assign() 来复制对象。效果如下：

```js
var obj = {name: ‘孙悟空‘};

// 复制对象：把 obj 赋值给 obj3。两者之间互不影响
var obj3 = Object.assign({}, obj);
```

2、基本数据类型不能绑定属性和方法

属性和方法只能添加给对象，不能添加给基本数据类型。

1、基本数据类型：

注意，基本数据类型`string`是**无法绑定属性和方法**的。比如说：

```javascript
var str = "qianguyihao";

str.aaa = 12;
console.log(typeof str); //打印结果为：string
console.log(str.aaa); //打印结果为：undefined
```

上方代码中，当我们尝试打印`str.aaa`的时候，会发现打印结果为：undefined。也就是说，不能给 `string` 绑定属性和方法。

当然，我们可以打印str.length、str.indexOf("m")等等。因为这两个方法的底层做了数据类型转换（**临时**将 `string` 字符串转换为 `String` 对象，然后再调用内置方法），也就是我们在上一篇文章中讲到的**包装类**。

2、引用数据类型：

引用数据类型`String`是可以绑定属性和方法的。如下：

```javascript
var strObj = new String("smyhvae");
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果：Object
console.log(strObj.aaa);
```

打印结果：


内置对象Number也有一些自带的方法，比如：

- Number.MAX_VALUE;

- Number.MIN_VALUE;

内置对象Boolean也有一些自带的方法，但是用的不多。

 

三、对象的分类

1.内置对象：

- 由ES标准中定义的对象，在任何的ES的实现中都可以使用

- 比如：Object、Math、Date、String、Array、Number、Boolean、Function等。

2.宿主对象：

- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。

- 比如 BOM DOM。比如`console`、`document`。

3.自定义对象：

- 由开发人员自己创建的对象

通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。

 

四、包装类（基本数据类型的数据转换为对象）

1、三个包装类：

- String()：将基本数据类型字符串，转换为String对象。

- Number()：将基本数据类型的数字，转换为Number对象。

- Boolean()：将基本数据类型的布尔值，转换为Boolean对象。

通过上面这这三个包装类，我们可以**将基本数据类型的数据转换为对象**。

代码举例：

```javascript
var num = new Number(3);

var str = new String("hello");

var bool = new Boolean(true);

console.log(typeof num); // 打印结果：object
```

需要注意的是：我们在实际应用中不会使用基本数据类型的对象。如果使用基本数据类型的对象，在做一些比较时可能会带来一些**不可预期**的结果。

比如说：

```javascript
var boo1 = new Boolean(true);
var boo2 = new Boolean(true);

console.log(boo1 === boo2); // 打印结果竟然是：false
```

再比如说：

```javascript
var boo3 = new Boolean(false);

if (boo3) {
console.log(‘qianguyihao‘); // 这行代码竟然执行了
}
```

 

2、基本包装类型【重要】

当我们对一些基本数据类型的值去调用属性和方法时，浏览器会**临时使用包装类将基本数据类型转换为引用数据类型**，这样的话，基本数据类型就有了属性和方法，然后再调用对象的属性和方法；调用完以后，再将其转换为基本数据类型。

举例：

```js
var str = ‘qianguyihao‘;
console.log(str.length); // 打印结果：11

```

比如，上面的代码，执行顺序是这样的：

```js
// 步骤（1）：把简单数据类型 string 转换为 引用数据类型 String，保存到临时变量中
var temp = new String(‘qianguyihao);

// 步骤（2）：把临时变量的值 赋值给 str
str = temp;

// 步骤（3）：销毁临时变量
temp = null;

```

在底层，字符串以字符数组的形式保存

代码举例：

```javascript
var str = "smyhvae";
console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第2个字符
```

上方代码中，`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的。因此，我们既可以获取字符串的长度，也可以获取指定索引index位置的单个字符。这很像数组中的操作。

再比如，String 对象的很多内置方法，也可以直接给字符串用。此时，也是临时将字符串转换为 String 对象，然后再调用内置方法。

 

五、内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。

前面两种对象：是JS的基础内容，属于 ECMAScript； 第三个浏览器对象：属于JS独有，即 JS 内置的API。

**内置对象**：就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用或者最基本而必要的功能（属性和方法）。

内置对象最大的优点就是帮助我们快速开发。

**JavaScript的内置对象**：

| 内置对象 | 对象说明 |
|:-------------|:-------------|
| Arguments | 函数参数集合|
| Array | 数组|
| Boolean | 布尔对象|
| Math | 数学对象|
| Date | 日期时间|
| Error | 异常对象|
| Function | 函数构造器|
| Number | 数值对象|
| Object | 基础对象|
| RegExp | 正则表达式对象|
| String | 字符串对象|

 

六、自定义对象的创建

创建自定义对象的几种方法

1、对象字面量

**对象的字面量**就是一个{}。里面的属性和方法均是**键值对**：

- 键：相当于属性名。

- 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。

使用对象字面量来创建一个对象，非常简洁，举例如下：：

```javascript
var obj = {};
```

使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....}

例如：

```javascript
var obj2 = {

name: "猪八戒",
age: 13,
gender: "男",
test: {
name: "沙僧"
}
sayName: function(){
console.log(‘smyhvae‘);
}
};
```

例如：

```javascript
var obj = {
name: "张三",
age: 26,
isBoy: true,
// 还可以存放一个签到的对象
test: {
id: 123,
tel: 180
}
//我们还可以在对象中增加一个方法。以后可以通过obj.sayName()的方式调用这个方法
sayName: function() {
console.log(this.name);
}
};

console.log(JSON.stringify(obj));
```

对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。

属性名和属性值是一组一组的键值对结构，键和值之间使用`:`连接，多个值对之间使用`,`隔开。如果一个属性的后面没有其他的属性了，就不要写`,`，因为它是对象的最后一个属性。

2、工厂模式

通过该方法可以大批量的创建对象。

```javascript
/*
* 使用工厂方法创建对象
* 通过该方法可以大批量的创建对象
*/
function createPerson(name, age, gender) {
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function() {
alert(this.name);
};
//将新的对象返回
return obj;
}

var obj2 = createPerson("猪八戒", 28, "男");
var obj3 = createPerson("白骨精", 16, "女");
var obj4 = createPerson("蜘蛛精", 18, "女");
```

第一次看到这种工厂模式时，你可能会觉得陌生。如果简化一下，可以写成下面这种形式，更容易理解：（也就是，利用new Object创建对象）

```javascript
var obj = new Obect();
obj.name = ‘猪八戒‘;
obj.age = 28;
obj.gender = ‘男‘;
obj.sayHi = function() {
alert(‘hello world‘);
};
```

**弊端：**

使用工厂方法创建的对象，使用的构造函数都是Object。**所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象**。

 

3、利用构造函数

```javascript
//利用构造函数自定义对象
var stu1 = new Student("smyh");
console.log(stu1);
stu1.sayHi();

var stu2 = new Student("vae");
console.log(stu2);
stu2.sayHi();

// 创建一个构造函数
function Student(name) {
this.name = name; //this指的是当前对象实例【重要】
this.sayHi = function () {
console.log(this.name + "厉害了");
}
}
```

七、构造函数

构造函数可以创建自定义对象，所以这里顺带介绍构造函数

1、构造函数概念

是一种特殊的函数，主要用来创建和初始化对象，也就是为对象的成员变量赋初始值。它与 `new` 一起使用才有意义。

我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个构造函数里面。

 

```javascript
// 创建一个构造函数，专门用来创建Person对象
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function() {
alert(this.name);
};
}

var per = new Person("孙悟空", 18, "男");
var per2 = new Person("玉兔精", 16, "女");
var per3 = new Person("奔波霸", 38, "男");

// 创建一个构造函数，专门用来创建 Dog 对象
function Dog() {}

var dog = new Dog();
```

2、构造函数和普通函数的区别

1）构造函数的创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。

2）构造函数和普通函数的区别就是**调用方式**的不同：普通函数是直接调用，而构造函数需要使用new关键字来调用。

3）this的指向也有所不同：

- 1.以函数的形式调用时，this永远都是window。比如`fun();`相当于`window.fun();`

- 2.以方法的形式调用时，this是调用方法的那个对象

- 3.以构造函数的形式调用时，this是新创建的实例对象

new 一个构造函数的执行流程

new 在执行时，会做下面这四件事：

（1）开辟内存空间，在内存中创建一个新的空对象。

（2）让 this 指向这个新的对象。

（3）执行构造函数里面的代码，给这个新对象添加属性和方法。

（4）返回这个新对象（所以构造函数里面不需要return）。

因为this指的是new一个Object之后的对象实例。于是，下面这段代码：

```javascript
// 创建一个函数
function createStudent(name) {
var student = new Object();
student.name = name; //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
}
```

可以改进为：

```javascript
// 创建一个函数
function Student(name) {
this.name = name; //this指的是构造函数中的对象实例
}

```

 

3、类、实例

类：使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。

实例：通过一个构造函数创建的对象，称为该类的实例。

 

4、instanceof

使用 instanceof 可以检查**一个对象是否为一个类的实例**。

**语法如下**：

```javascript
对象 instanceof 构造函数
```

如果是，则返回true；否则返回false。

**代码举例**：

```javascript
function Person() {}

function Dog() {}

var person1 = new Person();

var dog1 = new Dog();

console.log(person1 instanceof Person); // 打印结果： true
console.log(dog1 instanceof Person); // 打印结果：false

console.log(dog1 instanceof Object); // 所有的对象都是Object的后代。因此，打印结果为：true
```

根据上方代码中的最后一行，需要补充一点：**所有的对象都是Object的后代，因此 `任何对象 instanceof Object` 的返回结果都是true**。