038_JavaScript对象

最新推荐文章于 2024-01-09 15:50:54 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-01-09 15:50:54 发布

阅读量157

点赞数

分类专栏： JavaScript学习文章标签： javascript web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109569039

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. 一切皆对象

1.1. 在JavaScript中, 几乎"所有事物"都是对象。

布尔是对象(如果用new关键词定义)
数字是对象(如果用new关键词定义)
字符串是对象(如果用new关键词定义)
数组永远都是对象
函数永远都是对象
对象永远都是对象
日期永远都是对象
正则表达式永远都是对象
......

1.2. 所有JavaScript值, 除了原始值, 都是对象。

2. 对象是包含变量的变量

2.1. JavaScript变量能够包含单个的值:

var person = "Bill Gates";

2.2. JavaScript对象也是变量, 但是对象能够包含很多值。

2.3. JavaScript对象值按照名称 : 值对的形式编写(名称和值以冒号分隔)。

2.4. 实例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};

2.5. JavaScript对象是命名值的集合。

3. 创建JavaScript对象

3.1. 使用文本的方式创建单个对象。

3.2. 使用new Object()创建单个对象。

3.3. 定义对象构造器, 然后使用new关键字创建构造类型的对象。

3.4. 在ECMAScript 5中, 也可以通过函数Object.create()来创建对象。

4. 使用文本的方式创建对象

4.1. 文本的方式创建对象指的是花括号{}中的名称:值对。

4.2. 实例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};

4.3. 文本的方式是创建对象的最简单方法。

5. 使用new关键字创建对象

5.1. 使用new Object()创建对象:

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";

5.2. 上面的两个例子, 使用文本的方式和new关键字创建对象, 结果是一样的。

5.3. 出于简易性、可读性和执行速度的考虑, 请使用文本的方式创建对象。

6. 对象引用类型

6.1. 对象是通过引用来寻址, 而非值。

6.2. 有一个person对象, 下面的语句不会创建person的副本:

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};
var obj = person;

6.3. 对象obj并非person的副本, 它就是person。obj和person是同一个对象。

6.4. 对obj的任何改变都将改变person, 因为obj和person是相同的对象。

6.4. 实例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};
var obj = person;

var x = 5;
var y = x;

obj.age = 16; // 这将同时改变obj.age和person.age
y = 10; // x = 5, y = 10。改变y和x无关

7. 对象属性

7.1. JavaScript对象中的命名值, 被称为属性。

7.2. JavaScript对象是无序属性的集合。

7.3. 属性通常可以被修改、添加和删除, 但是某些属性是只读的。

8. 访问属性

8.1. 访问对象属性的语法是:

objectName.property           
或者:
objectName["property"] 
或者:
objectName[expression]

9. for...in循环遍历对象的属性

9.1. 可以使用for...in循环遍历对象的可枚举的属性。

9.2. 语法

for (variable in object) {
    要执行的代码
}

9.3. for...in循环中的代码块会为每个属性执行一次。

10. 添加、修改属性

10.1. 可以通过给对象新属性赋值的方式, 向对象添加属性。

10.2. 可以通过给对象已有属性赋值的方式, 修改属性。

10.3. 实例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};

person.nationality = "English"; // 添加属性
person.nationality = "Japanese"; // 修改属性

11. this关键词

11.1. 在JavaScript中, 被称为this的事物是代码的"拥有者"。

11.2. this的值, 在对象中使用时, 就是对象本身。

11.3. 在构造器函数和方法中, this是没有值的。它是新对象的替代物。当一个新对象被创建时, this的值会成为这个新对象。

11.4. 请注意this并不是变量。它是关键词。您无法改变this的值。

12. 对象方法

12.1. 方法是可以在对象上执行的动作。

12.2. 对象方法是包含函数定义的对象属性。

12.3. JavaScript对象是被称为属性和方法的命名值的容器。

12.4. 请使用如下语法创建对象方法:

methodName : function() { 代码行 }

13. 添加、修改方法

13.1. 同样可以通过给对象新属性赋值的方式, 向对象添加方法, 只不过属性的值是方法。

13.2. 同样可以通过给对象已有方法赋值的方式, 修改方法。

// 添加方法
person.fullName = function () {
    return this.firstName + " " + this.lastName;
};
// 修改方法
person.fullName = function () {
    return (this.firstName + ' ' + this.lastName).toUpperCase();
};

14. 访问对象方法

14.1. 请通过如下语法来访问对象方法:

objectName.methodName()

14.2. fullName属性在被通过()调用后会以函数形式执行。您通常会把fullName()描述为person对象的方法, 把fullName描述为属性。

person.fullName();

14.3. 如果您访问fullName属性时没有使用(), 则将返回函数定义。

person.fullName;

15. 删除属性和方法

15.1. delete关键词从对象中删除属性和方法:

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};
person.fullName = function () {
    return this.firstName + " " + this.lastName;
};

delete person.age;   // 或delete person["age"];
delete persion.fullName;

16. 例子

16.1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建对象
			var person = {
				firstName: 'Bill',
				lastName: 'Gates',
				fullName: function() {
					return this.firstName + ' ' + this.lastName;
				}
			};

			for(let item in person){
				if ((typeof person[item]) == 'function') {
					document.write(person[item]() + '<br />');
				} else {
					document.write(person[item] + '<br />');
				}
			}
			document.write('<hr />');


			// 给对象添加新属性
			person.id = 1001;

			// 给对象添加方法
			person.toUpperFullName = function() {
				return (this.firstName + ' ' + this.lastName).toUpperCase();
			};

			for(let item in person){
				if ((typeof person[item]) == 'function') {
					document.write(person[item]() + '<br />');
				} else {
					document.write(person[item] + '<br />');
				}
			}
			document.write('<hr />');


			// 修改属性
			person.firstName = 'zhang';
			person.lastName = 'san';
			person.toUpperFullName = function() {
				return '名字大写: ' + (this.firstName + ' ' + this.lastName).toUpperCase();
			};
			// 删除属性
			delete person.id;
			delete person.fullName;
			for(let item in person){
				if ((typeof person[item]) == 'function') {
					document.write(person[item]() + '<br />');
				} else {
					document.write(person[item] + '<br />');
				}
			}
			document.write('<hr />');

			document.write(person.toUpperFullName + '<br />');
		</script>
	</body>
</html>

16.2. 效果图

17. 对象的键

17.1. 对象键通常我们使用: 数字字面量(可以定义类数组对象)、标识符和字符串。

17.2. 使用数组可以通用访问这三种键。

17.3. 使用数组可以使用表达式动态生成键。

17.4. 例子

17.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>对象的键数字字面量、标识符和字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var obj = {0: 100001, age: 18, "name": 'zhangsan'};
			
			// 数字字面量键只能用数组访问
			document.write('id: ' + obj[0] + '<br />');

			// 标识符键可以通过数组和.key方式访问
			document.write('age: ' + obj["age"] + '<br />');
			document.write('age: ' + obj.age + '<br />');

			// 字符串键可以通过数组和.key方式访问
			document.write('name: ' + obj["name"] + '<br />');
			document.write('name: ' + obj.name + '<br />');
			// 使用表达式键
			document.write('name: ' + obj["na" + "me"] + '<br />');
		</script>
	</body>
</html>

17.4.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
038_JavaScript对象

1. JavaScript对象1.1. 对象包含很多值的变量。1.2. 值按照名称 : 值对的形式编写(名称和值以冒号分隔)。1.3. JavaScript对象是命名值的集合。2. 使用对象字面量2.1. 使用对象文字, 您可以在一条语句中定义和创建对象。对象文字指的是花括号{}中的名称:值对(比如 age:62)。2.2. 下面的例子创建带有四个属性的新的JavaScript对象:var person = {firstName:"Bill", lastName:"Gates"
复制链接

扫一扫

专栏目录