自定义对象Object

自定义对象Object

1. 概念

1.1 什么是对象?

image-20230228152256012

1.2 为什么需要对象?

image-20230228152031638

2. 创建对象的三种方式

2.1 字面量创建对象

image-20230228152727256

2.2 new Object 创建对象

image-20230228152822017

2.3 构造函数创建对象

image-20230228153001570

3. 对象的使用

image-20230228153348554

1
2
3
4
方法是对象的一部分,函数不是对象的一部分,函数是单独封装操作的容器

- 函数:单独存在的,通过“函数名()”的方式就可以调用
- 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

4. 遍历对象

image-20230228153522536

5. 案例

5.1 自定义电脑对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
function computers(color,weight,brand,type,work){
this.color = color;
this.weight = weight;
this.brand = brand;
this.type = type;
this.work =function(params) {
console.log(params);
}
}
var lenovo=new computers('black','4kg','lenovo','game');
lenovo.work('看电影,听音乐,打游戏,敲代码')
// 遍历对象
for(var key in lenovo) {
// console.log(key);
console.log(lenovo[key]);
}
</script>

5.2 new与this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
// new关键字执行过程
// 1. new 构造函数可以在内存中创建了一个空的对象
// 2. this 就会指向刚才创建的空对象
// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
// 4. 返回这个对象
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);

}
}
var ldh = new Star('刘德华', 18, '男');
</script>

5.3 利用字面量创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
// 1.利用对象字面量创建对象 {}
// var obj = {}; // 创建了一个空的对象
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');

}
}
// (1) 里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
// (2) 多个属性或者方法中间用逗号隔开的
// (3) 方法冒号后面跟的是一个匿名函数
// 2. 使用对象
// (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
console.log(obj.uname);
// (2). 调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
// (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj.sayHi();
</script>

5.4 利用 new Object 创建对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// 利用 new Object 创建对象
var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
// (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
// (2) 每个属性和方法之间用 分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
</script>

5.5 遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
// 遍历对象
var obj = {
name: 'Solar',
age: 18,
sex: '男',
fn: function() {}
}
// console.log(obj.name);
// console.log(obj.age);
// console.log(obj.sex);
// for in 遍历我们的对象
// for (变量 in 对象) {

// }
for (var k in obj) {
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值

}
// 我们使用 for in 里面的变量 我们喜欢写 k 或者 key
</script>