一、什么是对象?
现实生活中:万物皆对象,对象是一个具体的事物
,看得见摸得着的实物。例如:一本书、一辆汽车、一个可以是“对象”,一个数据库、一张网页、一个远程服务器的连接也可以是“对象”。
在JavaScript中,对象是一组无序的相关属性
和方法
的集合,所有的事物都是对象,例如字符串、数值、数组、函数等
对象是由属性
和方法
组成的
- 属性:事物的
特征
,在对象中用属性
来表示(常用名词) - 方法:事物的
行为
,在对象中用方法
来表示(常用动词)
二、为啥需要对象?(我也想知道,“狗头保命”)
保存一个值时,可以使用变量
,保存多个值(一组值)时,可以使用数组
,如果要保存一个人的完整信息呢?
数组中的保存方式为:
var arr = ['小明','男',179,120]
JS中的对象表达结构更清晰,更强大。在对象中的表达结构如下:
小明.姓名 = '小明'
小明.性别 = '男'
小明.身高 = '179'
小明.体重 = '120'
person.name = '小明';
person.sex = '男';
person.age = '179';
person.height = '120'
三、创建对象的三种方式
在JavaScript中,现阶段我们可以采用三种方式创建对象(object):
- 利用
字面量
创建对象 - 利用
new Object
创建对象 - 利用
构造函数
创建对象
1、利用字面量创建对象
对象字面量:就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法
//利用对象字面量创建对象
//var obj = {}//创建了一个空的对象
var obj ={
uname : '小明',
age:18,
sex:'男',
HI:function(){
console.log('hellword!')
}
}
//(1)里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
//(2)多个属性或者方法中间用逗号隔开的
//(3)方法冒号后面跟的是一个匿名函数
//2、使用对象
//(1)调用对象的属性 我们采取 对象名.属性名
console.log(obj.uname);
//(2) 调用属性还有一种方法 对象名['属性名']
console.log(obj['age'])
//(3)调用方法 HI 对象名.方法名 一定要记得添加小括号
obj.HI()
2、变量、属性、函数、方法的区别
- 变量和属性是相同的,他们都是用来存储数据的
var num = 10;
var obj = {
age:10
}
- 变量:单独声明并赋值,使用的时候直接写变量名是单独存在的
- 属性:在对象里面的不需要声明,使用的时候必须是
对象.属性
- . 函数和方法的相同点,都是实现某种功能做某件事的
- 函数是单独声明的,并且调用的是 函数名()单独存在的
- 方法在对象里面调用的时候是
对象.方法()
var num = 10;
var obj = {
fn:function(){
//里面的是方法
}
age:10
}
function fn (){
//外面的是函数
}
3、利用new Object创建对象
var obj = new Object();//创建了一个空的对象
obj.uname = '小明'
obj.age = 18;
obj.sex = '男'
obj.fn = function(){
console.log('helloword!')
}
//(1)我们是利用等号 = 赋值的方法 添加对象的属性和方法
//(2)每个属性和方法之间用 分号结束
console.log(obj.uname)
obj.fn()
4、利用构造函数创建对象
为什么需要使用构造函数?
(1)因为我们前面的两种创建对象的方式一次只能创建一个对象
(2)因此我们可以利用函数的方法,重复这些相同的代码,我们就把这个函数称为构造函数
,又因为这个函数不一样,里面封装的不是普通代码,而是对象
(3)构造函数就是把我们对象里面一些相同的属性和方法抽象出来,封装到函数里面
//利用构造函数创建对象
//我们需要创建几个对象 相同的属性: 名字 年龄 性别 等等
//构造函数的语法格式
function 构造函数名 (){
this.属性 = 值
this.方法 = function(){
}
}
new 构造函数名();
function Star(uname,age,sex){
//1、构造函数的名字首字母要大写
this.name =uname;
this.age = age;
this.sex = sex;
this.school = function(sch){
console.log(sch);
}
}
var xiaoming = new Star('小明', 20,'男');
console.log(xiaoming.name)
xiaoming.school('家里蹲大学')
var xiaohong = new Star('小红', 20,'男');
console.log(xiaohong.name)
//2、构造函数不需要return,就可以返回结果
//3、我们调用构造函数必须使用new
//4、我们只要new Star() 调用函数就创建一个对象 函数名{}
//5、属性和方法前面必须添加 this 来指向
四、构造函数和对象的相互联系
对象: 是一个具体的事物
构造函数: 是泛指的某一个大类
五、遍历对象
//遍历对象
var obj = {
name:'小名',
age:5,
sex:'男'
}
console.log(obj.name)
console.log(obj.age)
console.log(obj.sex)
//通过for in 遍历对象来简化操作
for (变量 in 对象){
}
for (var key in obj){
console.log(obj[key]);
}