NIUCLOUD是一款SaaS管理后台框架多应用插件+云编译。上千名开发者、服务商正在积极拥抱开发者生态。欢迎开发者们免费入驻。一起助力发展! 广告
[TOC] # 1.1什么是对象? 现实生活中:万物皆对象,对象是一个**具体的事物**,**看得见摸得着的实物**。例如,一本书、一辆汽车、一个人、可以是“对象”, 一个数据库、一张网页、 一个与远程服务器的连接也可以是”对象”。 ![](https://img.kancloud.cn/17/d3/17d31cfa306315913f07070ff2555283_1085x129.png) ## 对象是由属性和方法组成的。 ![](https://img.kancloud.cn/67/4e/674e89f39339f6154076d2cefe344ce3_997x431.png) ## 1.2为什么需要对象 ![](https://img.kancloud.cn/fc/1a/fc1a5b291eb7a13a13a0b189e30fbd5f_1037x73.png) 原因 ![](https://img.kancloud.cn/72/6a/726a79fc9434e4d58aa610c0da1b1e8d_957x484.png) # 2.创建对象的三种方式 在JavaScript中,现阶段我们可以采用三种方式创建对象( object) : . ●利用**字面量**创建对象**(常用)** ●利用**new Objec**t创建对象 ●利用**构造函数**创建对象 ## 1.利用对象字面量创建对象 { } ![](https://img.kancloud.cn/07/b0/07b054aaec0fbdf5bfbceda8bcc4c587_948x214.png) (1) 里面的属性或者方法我们采取键值对的形式 键属性名:值属性值 (2) 多个属性或者方法中间用逗号隔开的 (3)方法冒号后面跟的是个匿名函数 ### 1、创建对象 (属性:值属性值,) ~~~ //1、创建了一个空的对象 //varobj={ }; varobj={ uname :'张三疯', //属性名:值属性值, age : 18, //属性名:值属性值, sex : '男', //属性名:值属性值, sayHi : function() { console.1og('hi~'); } ~~~ ### 2、使用对象 (obj.(使用的对象)属性名) ![](https://img.kancloud.cn/23/d6/23d60e31d9a7cefcf3f2eca2e32f0cc3_1064x245.png) ~~~ // // (1).调用对象的属性我们采取对象名.属性名.我们理解为的 console.log(obj.uname); // (2). 调用属性还有一 种方法对象名['属性名'] console.1og(obj[' age ']); // (3) 调用对象的方法sayHi 对象名.方法名() 千万别忘记添加小括号 obj.sayHi(); ~~~ ## 2.2利用new Object创建对象 跟我们前面学的new Array()原理一致 ### 创建newobject创建对象 // (1) 我们是利用等号=赋值的方法添加对象的属性和方法 // (2) 每个属性和方法之间用分号结束 ~~~ //1、创建了一个空的对象 var obj = new Object(); obj.uname = '张三疯' ; //对象.属性= (内容); obj.age = 18; //对象.属性= (内容); obj.sex = '男'; //对象.属性= (内容); obj.sayHi = function() { //创建函数 对象.函数名 = function(){ } console.log('hi~'); ~~~ ### 使用对象 ~~~ console.log(obj.uname ); //对象.属性 obj.uname console.log(obj['sex']); //对象[' '] obj.['sex'] obj.sayHi() ; //对象.对象函数的方法名 obj.sayHi(); ~~~ ## 2.3利用构造函数创建对象(重点) (构造函数名字首字母要大写) ![](https://img.kancloud.cn/16/d7/16d7da845fb984def0794dfe582c5183_1042x84.png) 原因:就是因我们**前面两种创建**对象的方式次**只能创建1个对象**,里面很**多的属性**和**方法**是**大量相同**的我们**只能复制** * **因此**我们可以**利用函数**的方法**重复这些相同**的代码我们就把**这个函数称为构造函数** * **又因为这个函数不一样**,里面封装的**不是普通代码**,**而是对象** * **构造函数**就是**把我们对象**里面一些相**同的属性**和方法**抽象出来封装到函数里面** ### 创建构造函数创建对象 // 我们需 要创建四大天王的对象相同的属性: 名字年龄性别相同的方法: 唱歌 构造函数的语法格式 ~~~ function构造函数名() { this.属性=值; this.方法= function() { } ~~~ ### 使用对象 ~~~ new 构造函数名(); ~~~ ## 构造函数的实际使用 // 1.构造函数名字首字母要大写 // 2.我们构造函数不需要return就可以返回结果 // 3.我们调用构造函数必须使用new // 4.我们只要**new Star()****调用函数**就**创建一个对象**ldh { } // 5.我们的**属性**和**方法**前面必须**添加this** ![](https://img.kancloud.cn/b5/ac/b5ac21506268e5520c34319788300c5f_1037x473.png) ~~~ //new构造函数名(); function Star(uname, age, sex) { this.name= uname ; this.age = age; this.sex = sex; this.sing = function(sang) { //方法 console.1og(sang); } } //使用 var Idh = new Star ('刘德华',18, '男'); //调用函数返回的是一个对象 // console.log(typeof 1dh) ; //测试他的数据类型 console.log(1dh. name); console.log(1dh['sex' ]); ldh. sing( '冰雨'); //对象里(函数)方法的使用 var zxy = new Star ('张学友',19, '男'); console.log(zxy.name); console.log(zxy.age ); ~~~ ## 2.4构造函数和对象 ●**构造函数**,如Stars0 ,**抽象了对象的公共部分**,**封装**到了**函数里面**,它**泛指某一大类( class )** ●**创建对象**,如new Stars0 ,**特指某一 个**,通过**new关键字创建对象**的过程我们也称为**对象实例化** ![](https://img.kancloud.cn/0d/ab/0dab5316e469bc1438d6e81300b7c0fb_963x424.png) # 3\. new关键字 new在执行时会做四件事情: 1.在内存中创建一个新的空对象。 2.让this指向这个新的对象。 3.执行构造函数里面的代码,给这个新对象添加属性和方法。 4.返回这个新对象(所以构造函数里面不需要return )。![](https://img.kancloud.cn/30/e0/30e0e81d0c9b8eea90150b50fcc395d0_1135x399.png) # 4.遍历对象属性 (连续输出 对象里面内容) **for.....in**语句用于对**数组**或者**对象的属性**进行**循环**操作。 // for in遍历我们的对象 (**连续输出 对象里面内容**) ## 遍历对象属性(重点) ~~~ for (变量(k)in对象(obj)) { console.log(k); // k变量输出 得到的是属性名 console.log(obj[k]); // obj[k] 得到是属性值 } ~~~ ### 创建对象 ~~~ 创建对象 varobj={ name: ' pink老师', age: 18 , sex:'男', } ~~~ ### 输出使用对象 //我们使用for in里面的变量我们喜欢写**k**或者**key** ~~~ 输出使用对象 //我们使用for in里面的变量我们喜欢写k或者key for (var k in obj) { console.log(k); // k变量输出 得到的是属性名 console.log(obj[k]); // obj[k] 得到是属性值 } ~~~ # 小结 1.对象可以让代码结构更清晰 2.对象复杂数据类型object, 3.本质:对象就是一-组无序的相关属性和方法的集合。 4.构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。 5.对象实例特指一个事物 ,比如这个苹果、正在给你们讲课的pink老师等。 6\. fr.in语句用于对对象的属性进行循环操作。