一.什么是对象
1.对象是指一个具体的事物，对象由属性和方法组成的
- 属性：事物的特征(常用名词)
- 方法：事物的行为(常用动词)
- JS中对象表达结构更清晰，更强大
二.创建对象的三种方式
1.利用字面量创建对象
对象字面量：就是花括号{} 里面包含了属性和方法
{}里面包含了键值对的形式表示
- 键：相当于属性名
- 值：相当于属性值，可以是任意类型的值
对象的调用
- 对象里面的属性调用：对象.属性名,
- 还有一种调用方式：对象[‘属性名’],加上引号
- 对象里面方法的调用：对象.方法名()，加上小括号
代码演示如下
<script>
// 1.利用字面量创建对象{}
// var obj = {}；创建了一个空的对象
var obj = {
// 属性
unme: '浩哥',
age: 20,
sex: '男',
// 方法 方法后面跟函数 因为函数就是用来做什么事情的实现什么功能的
sayHi: function() {
console.log('你好啊对象！！！');
}
}
// 注意点(1)里面的属性或者方法采取键值对的形式 键 属性名 : 值 属性值
// (2)多个属性用逗号隔开
// (3)方法冒号后面跟的是匿名函数
// 2.对象的使用
// (1)调用对象的属性 采取 对象名.属性名 这个点.我们理解为 的
console.log(obj.unme); //浩哥
// (2) 调用属性还有一种方法 对象名['属性名']
console.log(obj['age']); //20
// (3) 调用对象的方法 sayHi 对象名.方法名() 别忘记小括号
obj.sayHi();
</script>
2.利用new Object创建对象
代码演示如下
<script>
var obj = new Object(); //创建了一个空的对象
// 属性
obj.uname = '浩哥';
obj.age = 20;
obj.sex = '男';
// 方法
obj.sayHi = function() {
console.log('你好啊 对象!!!');
}
// 注意点
// (1) 我们利用 等号 = 赋值的方法 添加对象的属性和方法
// (2) 每个属性和方法之间用 分号结束
//（3）O要大写
console.log(obj.uname);
console.log(obj.age);
console.log(obj['sex']);
obj.sayHi();
</script>
3.利用构造函数创建对象
我们为什么需要构造函数？
- 因为我们一次创建一个对象，里面的属性和方法是大量相同的，我们只能复制，因此我们可以利用构造函数的方法，重复这些相同的代码，我们就把这个函数称为 构造函数，又因为这个函数不一样，里面封装的不是普通代码，而是对象
- 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
代码演示
<script>
//1. 构造函数的语法格式
// function 构造函数名() {
// this.属性 = 值;
// this.方法 = function() {};
// }
// new 构造函数名()
// 2.代码演示
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex
this.sing = function(guitar) { //guitar = 弹吉他
console.log(guitar);
}
}
var hh = new Star('浩哥', 20, '男')
console.log(hh.name);
console.log(hh['age']);
hh.sing('弹吉他')
var ldh = new Star('刘德华', 45, '男')
console.log(ldh.name);
console.log(ldh['age']);
ldh.sing('唱歌')
// 3.注意点
// (1)构造函数首字母大写
// (2)构造函数不需要return返回结果
// (3)调用构造函数 必须使用new
// (4) 我们只需要 new Star() 调用函数就可以创建一个对象了
// (5) 属性和方法必须加this.
</script>
构造函数和对象
- 构造函数，如Stars(),抽象了对象的公共部分，封装到了函数里面，他泛指某一大类
- 创建对象，如new Stars(),特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
三.new关键字执行的过程
- 在内存中创建一个新的空对象
- 让this指向这个新的对象
- 执行构造函数里面的代码，给这个新对象添加属性和方法
- 返回这个新对象(所有构造函数里面不需要return)
四.遍历对象
- for…in语句用于对数组或者对象的属性进行循环操作
代码如下
<script>
var obj = {
unme: '浩哥',
age: 20,
sex: '男',
sayHi: function() {
console.log('你好啊对象！！！');
}
}
语法结构
for (变量 in 对象名字) {
// 在此执行代码
}
// 利用for..in来遍历对象
for (var k in obj) {
console.log(k); // k 变量 输出 得到的是 属性名; 注意k 是不需要赋值的
console.log(obj[k]); // obj[k] 输出得到的是 属性值 注意括号里面是没有引号的
}
// 我们使用 for in 里面的变量 喜欢写出 k 或者 key 也可以写成其他的 这只不过是前端人员习惯用的
</script>
五.对象小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型Object
- 本质：对象就是一组无序的相关属性和方法的集合
- 构造函数泛指某一大类，比如苹果，不管你是啥颜色苹果都统称为苹果
- 对象实例化特指一个事物，比如这个苹果，或者这个人，反正是具体的事物
- for…in 语句用于对 对象的属性进行循环操作