【JavaScript对象】

1 本节目标

• 说出为什么需要对象
• 使用字面量创建对象
• 使用构造函数创建对象
• 说出new的执行过程
• 遍历对象

2 对象

2.1 什么是对象

• 对象是一个具体的事物。
• 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
• 对象是由属性和方法组成的。
  1>属性：事物的特征，在对象中用属性来表示(常用名词)
  2>方法：事物的行为，在对象中用方法来表示(常用动词)

2.2 为什么需要对象

• 保存一个值时，可以使用变量，保存多个值(一组值)时，可以使用数组.
• 若要保存一个人的完整信息，如使用数组：var arr = ['张三疯', '男', 128, 154];。JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

// 张三疯.姓名 = '张三疯';
person.name = '张三疯';
// 张三疯.性别 = '男';
person.sex = '男';
// 张三疯.年龄 = 128;
person.age = 128;
// 张三疯.身高 = 154;
person.height = 154;

3 创建对象的三种方式

• 在JavaScript中，现阶段我们可以采用三种方式创建对象(object)：
  1>利用字面量创建对象
  2>利用new Object创建对象
  3>利用构造函数创建对象

3.1 利用字面量创建对象

• 对象字面量：就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。

// 第一步：创建对象
// var obj = {}; // 创建了一个空的对象
var obj = {
	uname:'张三疯',
	age: 18,
	sex: '男',
	sayHi: function() {
		console.log('hi~');
	}
}

• 注意：
  1>里面的属性或者方法我们采取键值对的形式(键 属性名 : 值 属性值)。
  2>多个属性或者方法中间用逗号隔开。
  3>方法冒号后面跟的是一个匿名函数。

// 第二步：使用对象
// 调用对象的属性方法一：我们采取的是：对象名.属性名
console.log(obj.uname);
// 调用对象的属性方法二：我们采取的是：对象名['属性名']
console.log(obj['age']);
// 调用对象的方法sayHi：我们采取的是：对象名.方法名() 千万别忘记加小括号
obj.sayHi();

3.2 利用new Object创建对象

var obj = new Object(); // 创建了一个空的对象
// 追加对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
	console.log('hi~');
}

• 注意：
  1>我们是利用等号赋值的方式添加对象的属性和方法。
  2>每个属性和方法之间用分号结束。

// 第二步：使用对象
// 调用对象的属性方法一：我们采取的是：对象名.属性名
console.log(obj.uname);
// 调用对象的属性方法二：我们采取的是：对象名['属性名']
console.log(obj['age']);
// 调用对象的方法sayHi：我们采取的是：对象名.方法名() 千万别忘记加小括号
obj.sayHi();

3.3 利用构造函数创建对象

• 之所以使用构造函数，就是因为前面两种创建对象的方式一次只能创建一个对象。要创建多个对象，里面很多的属性和方法是大量相同的，用前两种方法，我们只能复制。因此我们可以利用函数的方法，重复这些相同的代码，我们把这个函数称为构造函数。
• 又因为这个函数不一样，里面封装的不是普通代码，而是对象，因此构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。
• 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，他总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

// 构造函数的语法格式：
function 构造函数名() {
	this.属性 = 值;
	this.方法 = function() {}
}
new 构造函数名();

// 举例：
// 我们需要创建四大天王的对象  相同的属性有：名字 年龄 性别   相同的方法：唱歌
function Star(uname,age,sex) {
	this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
		console.log(sang);
    }
}
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
console.log(ldh.name);
console.log(ldh['age']);
ldh.sing('冰雨');
var zxy = new Star ('张学友',19,'男');

• 注意：
  1>构造函数名字的首字母要大写。
  2>构造函数不需要return就可以返回结果。
  3>调用构造函数，必须使用new。
  4>我们只要new Star()调用函数，就创建了一个对象 ldh{}。
  5>属性和方法前必须添加this。

3.4 变量、属性、函数、方法总结

• 变量和属性的相同点：

// 他们都是来存储数据的
var num = 10; // 变量
var obj = {
	age = 18; // 属性
}
console.log(obj.age);

• 变量和属性的不同点：
  1>变量：单独声明并赋值，使用时直接写变量名(单独存在)
  2>属性：在对象里面的，不需要声明，使用的时候必须是对象.属性
• 函数和方法的相同点：都是实现某种功能，做某件事。

var obj = {
	// 方法
	fn: function() {

	}
}
// 函数
function fn() {

}
fn();

• 函数和方法的不同点：
  1>函数是单独声明并且调用的
  2>方法在对象里面，调用的时候是对象.方法()

3.5 构造函数和对象

// 1.构造函数 明星 泛指的某一大类 类似于java语言里面的 类(class)
function Star(uname,age,sex) {
	this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
		console.log(sang);
    }
}
// 2.对象 特指 是一个具体的事物 刘德华 == {name: '刘德华', age: 18, sex: '男', sing: ƒ}
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
console.log(ldh);
// 3.我们利用构造函数创建对象的过程,我们也称为对象的实例化

• 构造函数，如Star()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类(class)。
• 创建对象，如new Star()，特指某一个，通过new关键字创建对象的过程我们也可以称为对象实例化。
  

4 new关键字

• new关键字执行过程：
  1> new 构造函数可以在内存中创建一个空的对象。
  2> this 就会指向刚才创建的空对象。
  3> 执行构造函数里面的代码，给空的对象里面添加属性和方法。
  4>返回这个对象(所以构造函数里面不需要return)。
  

5 遍历对象属性

• for...in语句用于对数组或者对象的属性进行循环操作。
• 语法格式：

for ( 变量 in 对象) {
            
}

• 举例：

var obj = {
	name: '小王同学',
	age: 18,
	sex: '女'
	fn: function() {}
}
/* console.log(obj.name);
console.log(obj.age);
console.log(obj.sex); */

for(var k in obj) {
	console.log(k); // 输入k变量 得到的是属性名 name age sex
	console.log(obj[k]); // 输入obj[k] 得到的是属性值  小王同学 18 女
}

• 我们使用for in里面的变量，我们喜欢写k或者key。