## 对象简介 ### 面向对象简介 面向对象:可以创建自定义的类型,很好的支持继承和多态。 面向对象的特征:封装、继承、多态。 ### 对象的概念 在 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()); //加了括号,就是调用方法。即:执行函数内容,并执行函数体的内容 ``` 打印结果: ![](http://img.smyhvae.com/20180314_2109.png) **补充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 ## 对象和数据类型之间的关系 数据类型分类: - **基本数据类型(值类型)**: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 对象.属性名 ``` 如果获取对象中没有的属性,不会报错而是返回`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 // 注意,括号里的属性名,必须要加引号 对象['属性名'] = 属性值 ``` 上面这种语法格式,举例如下: ```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 对象名) { } ``` 解释:对象中有几个属性,循环体就会执行几次。每次执行时,会将对象中的**每个属性的 属性名 赋值给变量**。 语法举例: ```javascript for (var key in obj) { console.log(key); // 这里的 key 是:对象属性的键 console.log(obj[key]); // 这里的 obj[key] 是:对象属性的值 } ``` 举例: ```html ``` 打印结果: ``` 属性名:name 属性值:smyhvae 属性名:age 属性值:26 属性名:gender 属性值:男 属性名:address 属性值:shenzhen 属性名:sayHi 属性值:function() { console.log(this.name); } ``` ## 我的公众号 想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/2016040102.jpg)