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. 效果图