文章目录
- [一、JavaScript 对象](#一、JavaScript 对象)
- 二、使用字面量创建对象
-
- 1、使用字面量创建对象
- [2、小括号 / 中括号 / 大括号 作用](#2、小括号 / 中括号 / 大括号 作用)
- [3、代码示例 - 使用字面量创建对象](#3、代码示例 - 使用字面量创建对象)
- [4、代码示例 - 使用字面量创建空对象](#4、代码示例 - 使用字面量创建空对象)
一、JavaScript 对象
1、对象概念
在 JavaScript 中 , 对象 是 一种 复杂的数据类型 , 是 一组 无序的 相关属性 和 方法 的集合 , 这些 属性值 允许存储 各种数据类型值 ;
对象 由 属性 和 方法 组成 :
- 属性 : 事物 特征 , 具体就是 对象中的 变量 ;
- 方法 : 事物 行为 , 具体就是 对象中的 函数 ;
JavaScript 对象 可以理解为 由 键值对 组成 ;
- 键 是 字符串 , 表示属性的名称 ;
- 值 是 任何数据类型 , 表示属性的值 ;
2、对象使用场景
对象的使用场景 :
- 保存单个值 , 使用变量即可 ;
- 保存多个值 , 使用数组即可 ;
- 保存多个值并表示不同的信息 , 使用对象 ;
数组也可以保存多个不同类型的值 , 如 :
js
var arr = ['Tom', 18];只能知道 数组中有一个 字符串 和 一个 number 类型的值 ;
如果想要表示 , 第一个字符串元素是 姓名 name , 第二个 数字类型是 年龄 age , 这就是两个键值对了 , 此时需要 使用 对象 进行保存 ;
JavaScript 对象的结构 要比 数组结构 更清晰 , 强大 ;
下面的 person 对象就是将 ['Tom', 18] 数组的数据转为对象进行存储 ;
js
var person = {
name: "Tom",
age: 18,
hello: function() {
return this.name+ " is " + this.age + " years old";
}
};上述为 person 变量赋值的是一个 对象 字面量 ;
二、使用字面量创建对象
JavaScript 中有 3 种创建对象的方式 :
- 使用 字面量 创建对象 ;
- 使用 new 关键字 创建对象 ;
- 使用 构造函数 创建对象 ;
1、使用字面量创建对象
对象字面量 是 花括号 {} 中 定义多个 键值对 表示 对象的 属性 和 方法 , 键值对 之间使用 逗号 , 隔开 ,
下面就是一个 对象 字面量 , name 和 age 分别是 属性变量 名称 , 'Tom' 和 18 分别是 属性变量 值 , hello 是 对象方法的名称 后面的 函数表达式 就是 函数的具体内容 ;
js
{
name: "Tom",
age: 18,
hello: function() {
return this.name+ " is " + this.age + " years old";
}
};将上述 对象字面量 赋值给一个 var 声明的变量 , 就是创建了一个对象 ;
js
var person = {
name: "Tom",
age: 18,
hello: function() {
return this.name+ " is " + this.age + " years old";
}
};如果 对象字面量 的 大括号中为 空 , 则创建了一个 空的字面量 , 后期 使用 . 运算符为对象填充 属性和方法 ;
js
// 创建一个空对象
var person = {};
// 后期逐渐为空对象填充属性和方法
person.name = 'Tom';
person.age = 18;
person.hello = function() {
console.log(this.name + " is " + this.age + " years old");
};2、小括号 / 中括号 / 大括号 作用
JavaScript 中 小括号 / 中括号 / 大括号 作用 :
- 小括号 是 结合运算符 , 是拥有最高的优先级 的 运算符 ;
- 中括号 是 数组字面量 的标志 , 如 :
['Tom', 18]这是一个数组字面量 ; - 大括号 是 对象字面量 的标志 , 使用字面量创建对象中 , 就是 使用 大括号 构造了一个 对象字面量 ;
3、代码示例 - 使用字面量创建对象
代码示例 :
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建对象
var person = {
name: "Tom",
age: 18,
hello: function() {
console.log(this.name + " is " + this.age + " years old");
}
};
// 访问对象中的属性
console.log("name : " + person.name + " , age : " + person.age);
// 调用对象中的方法
person.hello();
</script>
</head>
<body>
</body>
</html>执行结果 :
4、代码示例 - 使用字面量创建空对象
代码示例 :
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建对象
// 创建一个空对象
var person = {};
// 后期逐渐为空对象填充属性和方法
person.name = 'Tom';
person.age = 18;
person.hello = function() {
console.log(this.name + " is " + this.age + " years old");
};
// 访问对象中的属性
console.log("name : " + person.name + " , age : " + person.age);
// 调用对象中的方法
person.hello();
</script>
</head>
<body>
</body>
</html>执行结果 :
