JS之对象

First00 2020-06-16

一、对象

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);
```

打印结果:

![](http://img.smyhvae.com/20180202_1351.png)

内置对象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**。

相关推荐