技术交流QQ群:1027579432,欢迎你的加入!
1.对象
- 对象是一个具体的事物,看得见摸得着的实物。
- 在JS中,对象是一组无序的相关属性和方法的集合。所有的事物都是对象,例如字符串、数值、数组、函数等。
- 对象是由属性和方法组成。
- 属性:事物的特征,在对象中用属性来表示(常用名词);
- 方法:事物的行为,在对象中用方法来表示(常用动词);
2.为什么需要对象?
- 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。JS中的对象表达结构更清晰、更强大。
3.创建对象的三种方法
- 在JS中,现阶段可以采用三种方式创建对象:
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象
- 3.1 利用字面量创建对象
- 对象字面量:花括号{}中包含了表达这个事物(对象)的属性和方法。
- 里面的属性或方法采用键值对的形式。键(属性名): 值;
- 多个属性或者方法中间用逗号隔开;
- 方法中冒号后面跟的是一个匿名函数;
// 1.利用对象字面量创建对象 var obj = {}; // 创建了一个空对象 var player = { name: 'curry', age: '32', gender: 'male', sayHi: function() { console.log('Hi, Curry'); } }
- 使用对象:
- 调用对象的属性时,采用对象名.属性名;
- 调用对象的属性另外一种方法是对象名['属性名'];
// 使用对象的属性----两种方法 console.log(player.name); console.log(player['age']);
- 调用对象的方法,采用对象名.方法名;
// 使用对象的方法 player.sayHi();
- 变量、属性、函数、方法总结
- 变量和属性的相同点:它们都是用来存储数据的;
var num = 10; var obj = { age: 18; }
- 变量和属性的不同点:变量单独声明并赋值,使用时直接写变量名;属性是在对象中的,不需要声明。使用时必须是对象名.属性;
console.log(obj.age); console.log(age); // 错误!
- 函数和方法的相同点:它们都是实现某种功能,做某件事情;
// 方法 fn: function() { console.log(666); } // 函数 function fn() { console.log(666); } fn();
- 函数和方法的不同点:函数是单独声明并且调用函数名(),单独存在;方法在对象中,调用是采用对象名.方法名();
- 变量和属性的相同点:它们都是用来存储数据的;
- 3.2 利用new Object创建对象
- 利用等号赋值的方法来添加对象的属性和方法;
- 每个属性和方法之间用分号隔开;
// 2.利用new Object创建对象 var zsf = new Object(); // 创建了一个空对象 zsf.name = '库里'; zsf.age = 32; zsf.sex = 'man'; zsf.sayhi = function() { console.log('Hello Curry!'); } console.log(zsf.name); console.log(zsf['sex']); zsf.sayhi();
- 3.3 利用构造函数创建对象
- 因为前面介绍的两种方法,一次创建一个对象,里面很多的属性和方法是大量相同的,我们只能复制。因此,可以利用函数的方法,重复这些相同的代码。于是,将这个函数称为构造函数。
- 因为这个函数不一样,封装的不是普通的代码,而是对象。构造函数就是把对象中一些相同的属性和方法抽象出来封装到函数中。
- 构造函数:是一种特殊的函数,主要用来初始化对象。即为对象成员变量赋初始值,它总与new运算符在一起使用。可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数中。
- 构造函数的语法格式:
function 构造函数名() { this.属性 = 值; this.方法 = function() {} } // 调用构造函数 new 构造函数名();
- 构造函数的注意点:
- 构造函数的名字首字母要大写!
- 构造函数不需要return语句,就能返回结果;
- 调用构造函数,必须使用new运算符!
- 只要new 构造函数名()调用构造函数就创建了一个对象。
- 构造函数中的属性和方法必须添加this!
- 实例如下:
function Star(name, age, sex) { // 属性 this.name = name; this.age = age; this.sex = sex; // 方法 this.song = function(music) { console.log('四大天王构造函数中的方法'); console.log(this.name + '是四大天王之一, 他的年龄是' + this.age + '岁, 他演唱了歌曲《' + music + '》'); } } // 调用构造函数 var ldh = new Star('刘德华', 55, '男'); // 调用构造函数,返回的是一个对象 console.log(ldh.name); console.log(ldh.age); console.log(ldh['sex']); ldh.song('冰雨'); console.log(typeof ldh); var zxy = new Star('张学友', 58, '男'); zxy.song('吻别');
4.构造函数和对象的关系
- 对象是特指一个具体的事物;构造函数是泛指某一大类。它类似于C++中的类class。
- 构造函数,例如上例中的Star(),抽象了对象的公共部分,封装到了函数中,它泛指某一大类。
- 创建对象,如new Star(),特指某一个,通过new关键字创建对象的过程也称为对象的实例化。
- 利用构造函数创建对象的过程也称为对象的实例化。
5.new关键字的执行过程
- (1).new构造函数可以在内存中创建一个空的对象;
- (2).让this指针就会指向创建的空对象;
- (3).执行构造函数中的代码,给这个空对象添加属性和方法;
- (4).返回这个对象,所以构造函数中不需要return语句;
6.遍历对象
- for...in语句用于对数组或对象的属性进行循环操作。
- 语法格式:
for (变量 in 对象) { }
- 具体实例:
var gg = { name: 'curry', age: 32, sex: 'man' } for(var k in gg) { console.log(k); // k是变量,得到的是属性名 console.log(gg[k]); // gg[k]得到的是属性值 }
- 注意:for...in语句中的变量,一般写成k或者key!