## 面向对象简介 **对象的作用是:封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 对象具有**特征**(属性)和**行为**(方法)。 面向对象:可以创建自定义的类型、很好的支持继承和多态。 面向对象的特征:封装、继承、多态。 ## 对象简介 ### 基本数据类型和引用数据类型的对比 - **基本数据类型(值类型)**: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 } ``` **补充1**:对象的属性值可以是任何的数据类型,也可以是个**函数**:(也称之为方法) ```javascript var obj = new Object(); obj.sayName = function () { console.log('smyhvae'); }; console.log(obj.sayName); //没加括号,获取的是对象 console.log('-----------'); console.log(obj.sayName()); //加了括号,执行函数内容,并执行函数体的内容 ``` 打印结果: ![](http://img.smyhvae.com/20180314_2109.png) **补充2**: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 ### 获取对象中的属性 **方式1**: 语法: ```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 ``` **方式2**:可以使用`[]`这种形式去操作属性 对象的属性名不强制要求遵守标识符的规范,但是我们使用是还是尽量按照标识符的规范去做。 但如果要使用特殊的属性名,就不能采用`.`的方式来操作对象的属性。比如说,`123`这种属性名,如果我们直接写成`obj.123 = 789`,是会报错的。那怎么办呢?办法如下: 语法格式如下:(读取时,也是采用这种方式) ``` 对象["属性名"] = 属性值 ``` 上面这种语法格式,举例如下: ```javascript obj["123"] = 789; ``` **重要**:使用`[]`这种形式去操作属性,更加的灵活,因为,我们可以在`[]`中直接传递一个**变量**,这样变量值是多少就会读取那个属性。 ### 修改对象的属性值 语法: ```javascript 对象.属性名 = 新值 ``` ```javascript obj.name = "tom"; ``` ### 删除对象的属性 语法: ```javascript delete obj.name; ``` ### 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'); } }; ``` 对象字面量的属性名可以加引号也可以不加,建议不加。如果要使用一些特殊的名字,则必须加引号。 属性名和属性值是一组一组的键值对结构,键和值之间使用`:`连接,多个值对之间使用`,`隔开。如果一个属性之后没有其他的属性了,就不要写`,`,因为它是对象的最后一个属性。 ## 遍历对象中的属性:for in 语法: ```javascript for (var 变量 in 对象) { } ``` 解释:对象中有几个属性,循环体就会执行几次。每次执行时,会将对象中的**每个属性的 属性名 赋值给变量**。 举例: ```html