對象
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.小結
- 對象可以讓代碼結構更清晰
- 對象複雜數據類型object
- 本質：對象就是一組無序的相關屬性和方法的集合
- 構造函數泛指某一大類，比如蘋果，不管是紅色蘋果還是綠色蘋果，都統稱爲蘋果
- 對象實例特指某一事物，比如這個蘋果，寫篇文章的我等
- for…in語句用於對對象的屬性進行循環操作