本文详细介绍了JavaScript中的对象概念，包括为何需要对象，以及三种创建对象的方法：字面量方式、new Object()和构造函数。同时，探讨了构造函数的作用、new关键字的执行过程及对象的遍历技巧。通过对这些概念的深入理解，有助于提升JavaScript开发能力。
01-对象的概念以及为什么需要对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1.1 什么是对象？
// 现实生活中：外物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书，一辆汽车可以是"对象"。一个数据库，一张网页，一个与远程服务器的连接也可以是"对象"。
// 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。
// 对象是由属性和方法组成的
// 属性：事物的特征，在对象中用属性来表示（常用名词）
// 方法：事物的行为，在对象中用方法来表示（常用动词）
// 例如：一个手机就是一个对象， 大小，颜色，屏幕尺寸都是属性; 打电话，发短信，玩游戏，砸核桃都是方法
// 1.2 为什么需要对象
// 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组.如果要保存一个人的完整信息呢?
// 例如,将"张三疯"的个人信息保存在数组中的方式为:
var arr = ['张三疯', '男', 28, 180]; //不清晰
// js 中的对象表达结果更清晰.更强大.张三疯的个人信息在对象中的表达结构如下
// 张三疯.姓名 = '张三疯'; //转化为代码 : person.name = '张三疯';
// 张三疯.性别 = '男'; person.sex = '男';
// 张三疯.年龄 = '28'; person.age = '28';
// 张三疯.身高 = '180'; person.height = '180';
</script>
</head>
<body>
</body>
</html>
02-创建对象的方式1-利用字面量创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建对象的方式一-利用字面量创建对象</title>
<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();
// 3.课堂案例:用对象字面量的形式创建一个名字为可可的狗对象
//(1) 创建对象
var obj = {
name: '可可',
type: '阿拉斯加犬',
age: 5,
color: '棕红色',
Bark: function() {
console.log('汪汪汪');
console.log('演电影');
}
}
// (2) 使用对象
console.log(obj.name);
console.log(obj.type);
console.log(obj.age);
console.log(obj.color);
obj.sayBark();
</script>
</head>
<body>
最低0.47元/天 解锁文章
1717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
