一、对象
1、引入对象
当一个函数参数特别多的话,这个时候我们就可以使用对象简化。
2、什么是对象
现实生活中:万物皆对象。对象是一个具体的事物,一个具体的事物就会有行为和特征。
Demo:
汽车是一类事物,门口停的那一辆车才是对象。
特征:蓝色、四个轮子,四个座位
行为:驾驶、刹车
二、JavaScript 中的对象
1、JavaScript 中的对象其实就是生活中对象一个抽象。
2、JavaScript 的对象是无序属性的集合。其属性可以包含基本值、对象或函数。
对象就是一组没有顺序的值,可以把 JavaScript 中的对象想象成键值对。其中值可以是数据和函数。
对象的行为和特征:
特征 —— 属性; 事物的特征在对象中用属性来表示。
行为 —— 方法; 事物的行为在对象中用方法来表示。
三、创建对象
1、对象字面量创建 (构造函数的简写)
定义格式:
var 对象名 = {
属性1:value1,
属性2:value2,
方法1:function(){
// 方法体
},
方法2:function(){
// 方法体
}
}
Demo:
1 // 定义一个英雄对象
2 var hero = {
3 name:'后羿',
4 age:23,
5 weapon:'逐日之弓',
6 equipment: ['头盔', '靴子', '盔甲'],
7 attack : function () {
8 console.log(this.name + ':射箭');
9 }
10 }
2、使用 new Object() 创建对象
-
- Object 是一个构造函数,new 的方式来调用构造函数;
- JavaScript 可以动态添加属性(动态特性);
- 构造函数会在内存中创建一个对象,并用引用变量指向该对象;
定义格式:
var 对象名 = new Object();
对象名.属性1 = value1;
对象名.属性2 = value2;
对象名.方法1 = function () {};
对象名.方法2 = function () {};
Demo:
1 var person = new Object();
2 person.name = 'Tom';
3 person.age = 25;
4 person.job = 'actor';
5 person.sayHi = function(){
6 console.log('Hello,World!');
7 }
3、工厂函数创建对象
定义格式:
function 函数名 (参数1,参数2,参数3){ // 定义一个创建对象的函数
var 对象名 = new Object();
对象名.属性1 = 参数1;
对象名.属性2 = 参数2;
对象名.属性3 = 参数3;
对象名.方法 = function () {
// 方法体
}
return 对象名;
}
var 对象名 = 函数名(参数1,参数2,参数3); // 调用创建对象函数,并传入参数,返回一个对象
Demo:
1 function createPerson(name, age, job) {
2 var person = new Object();
3 person.name = name;
4 person.age = age;
5 person.job = job;
6 person.sayHi = function(){
7 console.log('Hello,World!');
8 }
9 return person;
10 }
11 var p1 = createPerson('Tom', 25, 'actor');
4、自定义构造函数(帕斯卡命名:第一个单词的第一个字母大写(大驼峰命名))
定义格式:
function 构造函数名(参数1,参数2,参数3) {
this.属性1 = 参数1;
this.属性2 = 参数2;
this.属性3 = 参数3;
this.方法 = function() {
// 方法体
}
}
var 对象名 = new 构造函数(参数1,参数2,参数3);
Demo:
1 function Person(name,age,job){ // 定义构造函数
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 this.sayHi = function(){
6 console.log('Hello,World!');
7 }
8 }
9 var p1 = new Person('Tom', 25, 'actor'); // 调用构造函数
四、对象的属性和方法
1、如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征。
2、如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法一般是动词,用来描述事物的行为和功能。
扩展1:函数与对象的区别:
函数:用来封装一段可以重复利用的代码
对象:封装一组属性和方法
扩展2:函数与方法的区别:
函数:可以独立存在的函数
方法:属于对象的函数
五、new 关键字
构造函数:是一种特殊的函数。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与 new 运算符一起使用在创建对象的语句中。
1、构造函数用于创建一类对象,首字母要大写。
2、构造函数要和 new 一起使用才有意义。
new 在执行时会做四件事情:
-
- new 会在内存中创建一个新的空对象
- new 会让 this 指向这个新的对象
- 执行构造函数 目的:给这个新对象加属性和方法
- new 会返回这个新对象 return this
- new 会在内存中创建一个新的空对象
六、this 详解
this 关键字的特点:
1、函数在定义的时候 this 是不确定的,只有在调用的时候才可以确定;
2、this 出现在函数中 —— this 指向 window
3、this 出现在方法中 —— this 指向的是这个方法所属的对象
4、this 出现在构造函数中 —— this 就是构造函数创建的对象
七、对象的使用
1、访问属性和方法
格式:
// 访问属性
对象名.属性名;
对象名['属性名'];
// 访问方法
对象名.方法名
2、遍历对象的属性
通过 for..in 语法可以遍历一个对象
Demo:
1 var obj = {}; // 定义一个空对象
2 for (var i = 0; i < 10; i++) {
3 obj[i] = i * 2; // 给对象的每一项进行赋值
4 }
5 for(var key in obj) {
6 console.log(key + "==" + obj[key]); // 根据每一项的 key 输出对象的 value
7 }
3、删除对象的属性
通过 delete 关键字可以删除对象的属性。
Demo:
1 function Fun() { // 定义一个构造函数
2 this.name = 'mm';
3 }
4 var obj = new Fun(); // 创建一个对象
5 console.log(obj.name); // mm
6 delete obj.name; // 删除该对象的属性
7 console.log(obj.name); // undefined