JavaScript对象

目标：

能够说出为什么需要对象

能够使用字面量创建对象

能够使用构造函数创建对象

能够说出new的执行过程

能够遍历对象

学习内容：

1，对象

2，创建对象的三种方式

3，new关键字

4，遍历对象属性

一，对象

对象定义：

现实中：万物皆是对象，对象是一个具体的事物，看的见摸得着的实物。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如，数组，函数等。

对象是由属性和方法组成的

        属性：事物的特征，在对象中用属性来表示（常用名词）

        方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象：

保存一个值时可以使用变量，保存多个值（一组值）时，可以使用数组。

JS中对象表达结构更清晰，更强大

二，创建对象的三种方式

在Javascript中，现在我们介绍三种方式创建对象（object）:

2.1 用字面量创建对象

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

 例如：

<script>
	var obj = {};//创建了一个空对象
	var obj = {
		uname:'终会为一',
		age:19,
		sex:'男',
		sayHi:function(){
			console.log('hello word');
		}
	}
</script>

注意：

a.里面的属性或者方法我们采用键值对的形式  键   属性名：  值 属性值

b.对各属性或者方法使用逗号隔开

c.方法冒号后面跟的是一个匿名函数

对象调用

1.调用对象的属性 我们采用的是  对象名.属性名

<script>
	var obj = {};//创建了一个空对象
	var obj = {
		uname:'终会为一',
		age:19,
		sex:'男',
		sayHi:function(){
			console.log('hello word');
		}
	}
	console.log(obj.uname);
</script>

 2.第二种调用函数的方法  对象名 ['属性名']

<script>
	var obj = {};//创建了一个空对象
	var obj = {
		uname:'终会为一',
		age:19,
		sex:'男',
		sayHi:function(){
			console.log('hello word');
		}
	}
	console.log(obj['age']);
</script>

 3.调用对象的方法  sayHi   对象名.方法名 注意一定要添加小括号

<script>
	var obj = {
		uname:'终会为一',
		age:19,
		sex:'男',
		sayHi:function(){
			console.log('hello word');
		}
	}
	obj.sayHi();
</script>

2.2 利用new Object创建对象

注意：

1.我们是利用等号赋值的方法 添加对象的属性和方法

2.每个属性和方法之间用分号隔开

<script>
	var obj = new Object();//创建了一个空的对象
	obj.uname = '终会为一';
	obj.age = 19;
	obj.sex = '男';
	obj.sayHi = function(){
		console.log('hello word');
	}
</script>

对象调用

对象调用原理相同

<script>
	var obj = new Object();//创建了一个空的对象
	obj.uname = '终会为一';
	obj.age = 19;
	obj.sex = '男';
	obj.sayHi = function(){
		console.log('hello word');
	}
	console.log(obj.uname);
	console.log(obj['sex']);
	obj.sayHi();
</script>

2.3 利用构造函数创建对象

定义：

为什么需要使用构造函数；

就是应为前面2个的创建方式一次只能创建一个对象

因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数

又因为这个函数不一样，里面封装的不是普通代码，而是  对象

定义：构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

构造函数的语法格式和调用

1.构造函数名字是需要首字母大写

2.构造函数是不需要return 就可以返回结果

3.调用函数返回的是一个对象

4.我们调用构造函数 必须使用 new

5.我们的属性和方法前面必须添加 this 、

<script>
	function 构造函数名(){
		this.属性 = 值;
		this.方法 = function(){
		}
	}
	new 构造函数名();//调用
</script>

案例1

<script>
	function Zhwy(uname,age,sex){
		this.name = uname;
		this.age = age;
		this.sex = sex;
	}
	new Zhwy('终会为一',19,'男');
</script>

案例2

<script>
	function Zhwy(uname,age,sex){
		this.name = uname;
		this.age = age;
		this.sex = sex;
		this.sing = function(sang){
			console.log(sang);
		}
	}
	Zhwy,sing('终会为一')
</script>