學習目標：能夠說出為什么需要物件
能夠使用字面量創建物件
能夠使用建構式創建物件
能夠說出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)進行回圈遍歷物件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79790.html
標籤：JavaScript
上一篇：DOM 事件與事件委托
下一篇：nuxt中使用Vuex