本文详细介绍了JavaScript中的对象，包括对象的概念、为何需要对象、创建对象的三种方式（字面量、new Object、构造函数）以及new关键字的作用。此外，还探讨了属性、方法、变量的区别，并通过实例讲解了构造函数的使用和对象实例化的过程。最后，讨论了遍历对象属性的方法for...in语句。
文章目录
JavaScript对象
目标
- 能够说出为什么需要对象
- 能够使用字面量创建对象
- 能够使用构造函数创建对象
- 能够说出new的执行过程
- 能够遍历对象
1 对象
1.1 什么是对象？
现实生活中: 万物皆对象,对象是一个具体的事物 , 看得见摸得着的实物。例如,一本书、一辆汽车、一个人
可以是”对象”, 一个数据库、一张网页、 一个与远程服务器的连接也可以是“对象”。
在JavaScript中, 对象是一组无序的相关属性和方法的集合 ,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
1.2 为什么需要对象
保存一个值时,可以使用变量，保存多个值(一组值 )时,可以使用数组。如果要保存一个人的完整信息呢 ?
例如, 将”张三疯”的个人的信息保存在数组中的方式为:
var arr = ['张三疯','男',128,154];
JS 中的对象表达结构更清晰 , 更强大。张三疯的个人信息在对象中的表达结构如下:
张三疯.姓名= '张三疯';
张三疯.性别= '男';
张三疯.年龄= 128;
张三疯.身高= 154 ;
person.name = '张三疯' ;
person.sex ='男';
person.age = 128;
person.height = 154 ;
2 创建对象的三种方式
在 JavaScript中, 现阶段我们可以采用三种方式创建对象( object) :
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象
2.1 利用字面量创建对象
对象字面量 : 就是花括号 {} 里面包含了表达这个具体事物(对象)的属性和方法。
<script>
// 1 利用对象字面量创建对象 {}
var obj = {}; // 创建一个空的对象
var obj = {
uname: 'zsf',
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();
变量、属性、函数、方法的区别
- 变量:单独声明赋值,单独存在
- 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
- 函数:单独存在的,通过“函数名()”的方式就可以调用
- 方法:对象里面的函数称为方法,方法不需要声明,使用“对象方法名()”的方式就可以调用, 方法用来描述该对象的行为和功能。
// 变量、属性、函数、方法的区别
// 1 变量和属性的相同的他们都是用来存储数据的
var num = 10;
var obj = {
age: 18,
fn: function(){
}
}
function fn() {
}
console.log(obj.age);
// 变量单独声明并赋值使用的时候直接写变量名 单独存在
// 属性在对象里面的不需要声明的使用的时候必须是对象.属性
// 2 函数和方法的相同点都是实现某种功能做某件事
// 函数是单独声明的 并且调用的时候 对象.方法()
2.2 利用 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();
2.3 利用构造函数创建对象
为什么需要构造函数？
// 我们为什么需要使用构造函数
// 就是因我们前面两种创建对象的方式次只能创建个对象
var ldh = {
uname: '刘德华',
age: 55,
sing: function() {
console.log('冰雪');
}
}
var zxy = {
uname: '张学友',
age: 55,
sing: function() {
console.log('李香兰');
}
}
// 因为一次创建一个对象 里面很多属性和方法是大量相同的 我们只能复制
// 因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数
// 又因为这个函数不一样，里面封装的不是普通代码，而是对象
// 构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数: 是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起
使用。我们可以把对象中一些公共的属性和方法抽取出来 ,然后封装到这个函数里面。
<!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>
</head>
<body>
<script>
// 利用构造函数创建对象
// 我们需要创建四大天王的对象相同的属性: 名字 年龄性别相同的方法: 唱歌
//构造函数的语法格式
// function 构造函数名() {
// this.属性 = 值;
// this.方法 = function() {}
// }
// new 构造函数名();
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,'男'); // 调用函数返回的是一个对象 （new一个不就有对象了嘛）
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友',19,'男');
console.log(zxy.name);
// 1 构造函数名字首字母要大写
// 2 构造函数不需要return 就可以返回结果
// 3 我们调用构造函数 必须使用 new
// 4 我们只要new Star() 调用函数就创建了一个对象 ldh {}
// 5 我们的属性和方法前面必须添加 this
</script>
</body>
</html>
2.4 构造函数和对象
- 构造函数, 如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
- 创建对象,如new Stars() ,特指某一个,通过new关键字创建对象的过程我们也称为对象实例化
eg 汽车设计图纸(构造函数) 一辆真宝马! (对象实例)
<!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>
</head>
<body>
<script>
// 构造函数和对象
// 1 构造函数 Star 泛指的某一大类 它类似于 java 语言里面的 类（class）
function Star(uname,age,sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function() {
console.log(sang);
}
}
// 2 对象 特指 是一个具体的事物 刘德华 == {name: '刘德华', age: 18, sex: '男', sing: ƒ}
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
console.log(ldh);
// 3 我们利用构造函数创建对象的过程我们也称为对象的实例化
</script>
</body>
</html>
3 new 关键字
<!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>
</head>
<body>
<script>
// new 关键字 执行过程
// 1. new构造函数可以在内存中创建了一个空的对象
// 2. this就会指向刚才创建的空对象
// 3. 执行构造函数里面的代码给这个空对象添加属性和方法
function Star(uname,age,sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function() {
console.log(sang);
}
}
var ldh = new Star('刘德华',18,'男');
</script>
</body>
</html>
4 遍历对象属性
for…in 语句 用于对数组或者对象的属性进行循环操作
<!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>
</head>
<body>
<script>
// 遍历对象
var obj = {
name: 'pink',
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>
</body>
</html>
小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型object.
- 本质: 对象就是一 组无序的相关属性和方法的集合。
- 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
- 对象实例特指一 个事物,比如这个苹果、正在给你们讲课的pink老师等。
- fo…in语句用于对对象的属性进行循环操作。
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
