前端零基础入门学习 javascript 对象总结

1.对象

1.1 什么事对象？

对象是一个具体的事物
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等
对象是由属性和方法组成的

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

比如手机：
属性：大小、颜色、重量、屏幕尺寸、厚度
方法：打电话、发短信、玩游戏、砸核桃

1.2 什么需要对象？

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？
例如，将“五哥”的个人信息保存在数组中的方式：

var arr = ['五哥','男',29,174];

JS中对象表达结构更清晰，更强大。五哥的个人信息在对象中的表达结构如下

person.name = '五哥';
person.sex = '男';
person.age = 29;
person.height = '174';

2.创建对象的三种方式

在JavaScript中，现阶段可以采用三种方式创建对象（object）：

• 利用字面量创建对象
• 利用new Object创建对象
• 利用构造函数创建对象

2.1 利用字面量创建对象

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

//1.利用对象字面量创建对象 {}
//var obj =  {}; //创建了一个空的对象
var obj = {
	uname:'五哥',
	age:29,
	sayHi: function () {
		console.log('hi~');
	}
}
//(1)里面的属性或者方法我们采取键值对的形式  键 属性名 ：  值  属性值：
//(2)多个属性或者方法中间用逗号隔开的
//(3)方法冒号后面跟的是一个匿名函数
//2.使用对象
//(1)调用的属性还有一个方法  对象名.属性名  .理解为的
console.log(obj.uname);  //五哥
//(2)调用对象的属性  对象名['属性名']
console.log(obj['age']);  //29
//(3)调用对象的方法 sayHi   对象名.方法名
obj.sayHi();

对象的调用

• 对象里面的属性调用：对象.属性名，这个小点，理解为“的”
• 对象里面属性的另一种调用方式：对象[‘属性名’]，注意方括号里面的属性必须加引号
• 对象里面的方法调用：对象.方法名（），注意这个方法后面一定加括号

console.log(obj.uname);  //调用名字属性
console.log(obj['age']);  //调用名字属性
obj.sayHi();  //调用sayHi方法

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

• 变量：单独声明赋值，单独存在
• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
• 函数：单独存在的，通过“函数名（）”的方式就可以调用
• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名（）”的方式就可以调用，方法用来描述该对象额行为和功能

//变量、属性、函数、方法的区别
//1.变量和属性的相同的，他们都是用来存储数据的
var num = 10;
var obj = {
	age:18;
	fn:function(){}  //方法
}
function fn(){}  //函数
console.log(obj.age);
//变量，单独声明并赋值，使用的时候直接写变量名，单独存在
//属性，在对象里面的不需要声明的，使用的时候必须是，对象.属性
//2.函数和方法的相同点，都是实现某种功能，做某件事
//函数时单独声明，并且调用的，函数名（）单独存在的
//方法，在对象里面，调用的时候，对象.方法（）

2.2 利用new Object创建对象

• 变量：单独声明赋值，单独存在
• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
• 函数：单独存在的，通过“函数名（）”的方式就可以调用
• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名（）”的方式就可以调用，方法用来描述该对象额行为和功能

//利用new Object创建对象
var obj = new Object(); //创建了一个空对象
obj.name = '大傻子';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
		console.log('hi');
	}
	//(1)利用等号=赋值的方法，添加对象的属性和方法
	//(2)每个属性和方法之间用分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();

2.3 利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

//为什么需要使用构造函数
//前面两种创建对象的方式一次只能创建一个对象
var ldh = {
	uname:'刘德华';
	age:55;
	sing:function(){
		console.log('冰雨');
	}  
}
var zxy = {
	uname:'张学友';
	age:58;
	sing:function(){
		console.log('李香兰');
	}  
}

//利用构造函数创建对象
//创建四大天王的对象  相同的属性：名字 年龄 性别；相同的方法：唱歌
//构造函数的语法格式
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(typeof ldh); //检测是否是对象
console.log(ldh.name); 
console.log(ldh['sex']); 
ldh.sing('冰雨');
var zxy = new Star('张学友',19,'男');
console.log(zxy.name); 
console.log(zxy.age); 

//1.构造函数名字首字母要大写
//2.构造函数不需要return，就可以返回结果
//3.调用构造函数，必须使用new
//4.只要new Star（）调用函数就创建一个对象 ldh{}
//5.属性和方法前面必须添加this

2.4 构造函数和对象

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

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

3.new关键字

//new关键字执行过程
//1.new 构造函数可以在内存中创建一个空对象
//2.this 就会指向刚才创建的空对象
//3.执行构造函数里面的代码，给这个空对象添加属性和方法
//4.返回这个对象
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,'男');  //调用函数返回的是一个对象

4.遍历对象属性

for…in语句用于对数组或者对象的属性进行循环操作

//遍历对象
var obj = {
	name = 小可爱'';
	age = 18;
	sex = '女';
	fn:function(){}
}  
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
//for in 遍历我们的对象
//for （变量 in 对象）{} 
for(var k in obj){
	console.log(k);  //k 变量 输出 得到的是属性名
	console.log(obj[k]);  //obj[k]  得到的是属性值
}
//使用for in 里面的变量写k或者key

5.小结

1. 对象可以让代码结构更清晰
2. 对象复杂数据类型object
3. 本质：对象就是一组无序的相关属性和方法的集合
4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果
5. 对象实例特指某一事物，比如这个苹果，写篇文章的我等
6. for…in语句用于对对象的属性进行循环操作