學習目標:能夠說出為什麼需要對象 能夠使用字面量創建對象 能夠使用構造函數創建對象 能夠說出new的執行過程 能夠遍歷對象 1.對象 1.1萬物皆對象,對象是一個具體的事物 在程式裡面,一個伺服器,一張網頁,一個遠程伺服器的連接也可以是對象。 Javascript中對象是一組無序的相關屬性和方法的集 ...
學習目標:能夠說出為什麼需要對象
能夠使用字面量創建對象
能夠使用構造函數創建對象
能夠說出new的執行過程
能夠遍歷對象
1.對象
1.1萬物皆對象,對象是一個具體的事物 在程式裡面,一個伺服器,一張網頁,一個遠程伺服器的連接也可以是對象。
Javascript中對象是一組無序的相關屬性和方法的集合,所有事物都是對象,例如字元串,數值,數組,函數。
對象是由屬性和方法組成的
屬性:事物的特征,在對象中用屬性來表示。(常用名詞)
方法: 是事物的行為,在對象中用方法來表示 (常用動詞)
1.2為什麼需要對象
保存一個值,可以使用變數,保存多個值(一組值),可以使用數組,如果要保存一個人的完整信息呢?
js二點對象表達結構更清晰,更強大。張三峰的個人信息再對象中表達結構如下:
張三峰.姓名 = '張三峰';
張三峰.性別 = ’男‘;
張三峰.年齡 = 128;
張三峰.身高 = 154;
2.創建對象的三種方法:(object):
利用字面量創建對象: 花括弧{ }表達了具體事物(對象)的屬性和方法
利用 new object創建對象
利用構造函數創建對象
字面量創建對象實例:
var obj = { uname:'張三峰', age: 18, sex: '男', sayHi: function(){ console.log('hi-'); } }
New Object 創建對象
<script> //利用NewObject創建對象 var obj = new Obeject(); //創建了一個空的對象。 obj.uname = '張三峰'; obj.age = 18 ; obj.sex = '男'; obj.sayHi = function(){ console.log('hi-'); } //(1)我們利用等號 = 賦值的方法 添加對象的屬性和方法 //(2)每個屬性和方法之間用分號結束 console.log(obj.uname); console.log(obj[uname]); var obj1 = new Object(); obj1.name = '鳴人'; obj1.sex = '男'; obj.age = '19歲'; obj.skill = function(){ console.log('影分身術'); } </script>
我們為什麼需要構造函數?
<script> //我們為什麼需要構造函數 //就是因為我們前面兩種創建對象的方式只能創建一個對象 var ldh = { uname: '劉德華', age: 55, sing: function(){ console.log('冰雨'); } } //因為我們一次創建一個函數,裡面很多的屬性和方法是大量相同的 我們只能複製 //因此我們可以利用函數的方法 重覆這些相同的代碼 我們就把這個函數稱為構造函數 //又因為這個函數不一樣 里賣弄封裝的不是普通代碼 而是 對象 //構造函數 就是把我們對象裡面的一些相同的屬性和方法抽象出來封裝到函數裡面 </script>
3.利用構造函數創建對象
<script> //構造幻術的基本格式 //四大天王的對象 相同的屬性:名字,年齡,性別 相同的特點:唱歌 // function 構造函數名(){ // this.屬性 = 值; // this.方法 = function(){} // } //new 構造函數名(); function Star(uname,age,sex){ this.uname =uname; this.age = age; this.sex = sex; this.sing = function(sang){ console.log(sang); } } var ldh = new Star('劉德華',18,'男') //調用函數返回的是一個對象 ldh.sing('冰雨'); //console.log(typeof ldh) console.log(ldh.uname); console.log(ldh['sex']); var zxy = new Star('張學友',20 ,'男'); console.log(zxy.uname); console.log(zxy.age); //1.構造函數的名字首字母要大寫 //1.構造函數首字母要大寫 //2.我們構造函數不需要return就可以返回結果 //3.我們調用構造函數 必須適應 new //4.只要我們new star() 調用函數就創建一個對象lbw {} //5.我們的屬性和方法前面必須添加this function Hero(name,type,blood){ this.name = name; this.type = type; this.blood = blood; this.attack = function(fangshi){ console.log(fangshi); } } var lianpo = new Hero('廉頗','力量型','500血量'); lianpo.attack('近戰'); console.log(lianpo.name); var houyi = new Hero('後裔','射手型','100血量'); console.log(houyi.name); houyi.attack('遠程'); </script>
4.構造函數和對象的相互聯繫
<script> //構造函數和對象 //1.構造函數 明星 泛指的某一大類 它類似於java語言的類(class) function Hero(name,type,blood){ this.name = name; this.type = type; this.blood = blood; this.attack = function(fangshi){ console.log(fangshi); } } //2.對象 特指某一個 是一個具體的事物 劉德華 var lianpo = new Hero('廉頗','力量型','500血量'); lianpo.attack('近戰'); console.log(lianpo.name); //3.我們利用構造函數創建對象的過程我們也稱為對象的實例化 構造函數也可以創建對象。 </script>
5.new對象的執行過程
<script> //new 關鍵詞的執行過程 //1.new 構造函數可以在記憶體中創建一個空對象 //2.this 就會指向剛纔創建的空對象 //3.執行構造函數裡面的代碼 給這個空對象添加屬性和方法 //4.返回這個對象(所以構造函數不需要return) function Hero(name,type,blood){ this.name = name; this.type = type; this.blood = blood; this.attack = function(fangshi){ console.log(fangshi); } } var lianpo = new Hero('廉頗','力量型','500血量'); lianpo.attack('近戰'); console.log(lianpo.name); </script>
6.javascript 遍歷對象屬性
for (var k in obj){
console.log(k); //k 變數 ,輸出得到的是屬性名
console.log(obj[k]); //obj[k]得到的是屬性值 obj[k]
}
<script> //遍歷對象 var obj = { name: '原雪峰', age: '18', sex: '男', fn: function(){ console.log('fff'); } } console.log(obj.name); console.log(obj.age); console.log(obj.sex); //如何一次性列印?SSS // for in 遍歷我們的對象 /* for (變數 in 對象) { } */ for (var k in obj){ console.log(k); //k 變數 ,輸出得到的是屬性名 console.log(obj[k]); //obj[k]得到的是屬性值 obj[k] } //我們使用for in 裡面的變數 我們喜歡 k 或者 key </script>
7.JavaScript小結:
1.對象可以讓代碼結構更清晰
2.對象複雜數據類型object
3.本質:對象就是一組無序的相關屬性和方法的集合
4.構造函數泛指一大類,比如蘋果,不管紅色青色 都是蘋果
5.對象特指一個實例
6.for (var k in object)進行迴圈遍歷對象