文章目录
- 一、对象使用
- 1、使用字面量创建对象要点
- 2、调用对象属性
- 3、调用对象方法
- 二、变量与属性区别
- 三、函数与方法区别
一、对象使用
1、使用字面量创建对象要点
使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) 中 , 介绍了 使用 字面量 创建对象 , 有如下要点 :
- 键值对 : 对象字面量 中的 属性 和 方法 都是以 " 键值对 " 的形式存在的 , 键 对应 属性名称 , 值 对应 属性值 ;
- 逗号隔开 : 多个 表示 属性 和 方法 的 键值对 之间 使用逗号隔开 ;
- 对象方法 : 表示 方法名称 的 键 后面的 冒号 后面 写一个 " 匿名函数 " , 如 :
hello: function() { 函数体 };
代码示例如下 :
var person = {
name: "Tom",
age: 18,
hello: function() {
console.log(this.name + " is " + this.age + " years old");
}
};
2、调用对象属性
调用对象属性 :
- 使用
对象名.属性名的方式 , 调用 对象属性 ;
// 访问对象属性 - 方式一 : 对象名.属性名
console.log(person.name);
- 使用
对象名['属性名']的方式 , 调用 对象属性 ;
// 访问对象属性 - 方式二 : 对象名['属性名']
console.log(person['name']);
完整代码示例 :
<!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(person.name);
// 访问对象属性 - 方式二 : 对象名['属性名']
console.log(person['name']);
</script>
</head>
<body>
</body>
</html>
执行结果 :
3、调用对象方法
调用对象方法 : 使用 对象名.方法名() 的方式 , 调用对象方法 ;
// 调用对象方法 - 对象名.方法名()
person.hello();
完整代码示例 :
<!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(person.name);
// 访问对象属性 - 方式二 : 对象名['属性名']
console.log(person['name']);
// 调用对象方法 - 对象名.方法名()
person.hello();
</script>
</head>
<body>
</body>
</html>
执行结果 :
二、变量与属性区别
变量 指的是 在 全局作用域 或 局部作用域 定义的 存储数据的内存空间 ;
var name = 'Tom';
属性 指的是 对象中的 键值对 ;
var person= {
name: 'Tom';
};
变量和属性相同点 : 变量 和 属性 都可以存储数据 ;
变量和属性不同点 : 声明使用上的不同 ;
- 变量 可以 单独声明 并赋值 , 可以使用 变量名 单独使用 ;
- 属性 在 对象中 , 不需要声明 , 但是在使用时 , 必须 用
对象名.属性名或者对象名[属性名]的方式使用 ;
三、函数与方法区别
函数与方法相同点 : 都可以 实现 某种功能 , 做某件事 ;
函数与方法不同点 :
- 函数 可以 单独声明存在 , 可以使用 函数名() 单独使用 ;
- 方法 在 对象中 , 不需要声明 , 但是在使用时 , 必须 用
对象名.方法名()的方式使用 ;
