2023學年完整公開課版JS對象進階

《物聯(lián)網(wǎng)Web前端開發(fā)基礎》課程

JS對象進階【任務8-3】JavaScript構造函數(shù)需求分析構造函數(shù)是JavaScript創(chuàng)建對象的另外一種方式。相對于字面量“{}”的方式，構造函數(shù)可以創(chuàng)建出一些具有相同特征的對象。“水果”構造函數(shù)

蘋果、香蕉、橘子創(chuàng)建對象【任務8-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法構造函數(shù)主要用來創(chuàng)建對象，并為對象的成員賦初始值。function構造函數(shù)名(){//函數(shù)體}【任務8-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法構造函數(shù)名稱推薦首字母大寫。如：Person、Apple、Student【任務8-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法使用構造函數(shù)創(chuàng)建對象的語法：在小括號中可以傳遞參數(shù)給構造函數(shù)。如果沒有參數(shù)，小括號可以省略。varobj=new構造函數(shù)名();【任務8-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法在構造函數(shù)中，使用this表示新創(chuàng)建出來的對象，通過this來為新創(chuàng)建出來的對象添加屬性或方法。function構造函數(shù)名(){this.屬性=屬性;this.方法=function(){//方法體

};}【任務8-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法利用構造函數(shù)可以很方便地創(chuàng)建同一類對象，在創(chuàng)建時，只需將不同對象的屬性值通過參數(shù)傳進去即可?！救蝿?-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法JavaScript中的構造函數(shù)類似于傳統(tǒng)面向對象語言（如Java）中的類（class）。在JavaScript中也可以使用面向對象編程中的一些術語?！救蝿?-3】JavaScript構造函數(shù)知識儲備——構造函數(shù)的基本語法抽象：將一類對象的共同特征提取出來，編寫成一個構造函數(shù)（類）的過程。實例化：利用構造函數(shù)（類）創(chuàng)建對象的過程。實例：如果p1對象是由Person構造函數(shù)創(chuàng)建出來的，則p1對象稱為Person構造函數(shù)

的實例（或稱為實例對象）?！救蝿?-3】JavaScript構造函數(shù)知識儲備——靜態(tài)成員和實例成員在面向對象中有靜態(tài)成員和實例成員的概念。實例成員：實例對象的成員。靜態(tài)成員：通過類或構造函數(shù)訪問的成員，不需要創(chuàng)建實例對象就能訪問。【任務8-3】JavaScript構造函數(shù)知識儲備——靜態(tài)成員和實例成員functionPerson(uname){this.uname=uname;}Person.school='X大學'; //添加靜態(tài)屬性schoolPerson.sayHello=function(){ //添加靜態(tài)方法sayHelloconsole.log('Hello');};console.log(Person.school); //訪問靜態(tài)屬性，輸出結果：X大學Person.sayHello(); //訪問靜態(tài)方法，輸出結果：Hello【任務8-3】JavaScript構造函數(shù)知識儲備——靜態(tài)成員和實例成員在靜態(tài)方法中不能使用this訪問實例對象，在靜態(tài)方法中如果使用this，訪問到的是構造函數(shù)本身?！救蝿?-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型基本數(shù)據(jù)類型（如字符串型、數(shù)字型、布爾型、undefined、null）又稱為值類型，復雜數(shù)據(jù)類型（對象）又稱為引用類型。【任務8-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型引用類型的特點是，變量中保存的僅僅是一個引用的地址。//創(chuàng)建一個對象，并通過變量obj1保存對象的引用varobj1={name:'小明',age:18};//此時并沒有復制對象，而是obj2和obj1兩個變量引用了同一個對象varobj2=obj1;//比較兩個變量是否引用同一個對象console.log(obj2===obj1); //輸出結果：true//通過obj2修改對象的屬性='小紅';//通過obj1訪問對象的name屬性console.log(); //輸出結果：小紅【任務8-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型當對變量進行賦值時，并不是將對象復制了一份，而是將兩個變量指向了同一個對象的引用?！救蝿?-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型如果給其中一個變量obj1重新賦值為其他對象，或者重新賦值為其他值，則obj1將不再引用原來的對象，但obj2仍然在引用原來的對象。varobj1={name:'小明',age:18};varobj2=obj1;//obj1指向了一個新創(chuàng)建的對象obj1={name:'小紅',age:17};//obj2仍然指向原來的對象console.log(); //輸出結果：小明【任務8-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型當一個對象只被一個變量引用的時候，如果這個變量又被重新賦值，則該對象就會變成沒有任何變量引用的情況，這時候就會由JavaScript的垃圾回收機制自動釋放?！救蝿?-3】JavaScript構造函數(shù)知識儲備——值類型和引用類型當引用類型的變量作為函數(shù)的參數(shù)來傳遞時，其效果和變量之間的賦值類似。functionchange(obj){='小紅'; //在函數(shù)內修改了對象的屬性}varstu={name:'小明',age:18};change(stu);console.log(); //輸出結果：小紅【任務8-3】JavaScript構造函數(shù)知識儲備——原型對象在JavaScript中，每個構造函數(shù)都有一個原型對象存在，這個原型對象通過構造函數(shù)的prototype屬性來訪問。functionPerson(){} //定義函數(shù)console.log(Ptotype); //輸出結果：{constructor:?}console.log(typeofPtotype); //輸出結果：object【任務8-3】JavaScript構造函數(shù)知識儲備——原型對象利用原型對象，可以實現(xiàn)為所有的實例對象共享實例方法。原型對象其實就是所有實例對象的原型。【任務8-3】JavaScript構造函數(shù)知識儲備——原型對象functionPerson(uname){this.uname=uname;}Ptotype.sayHello=function(){console.log('你好，我叫'+this.uname);};varp1=newPerson('張三');varp2=newPerson('李四');console.log(p1.sayHello===p2.sayHello); //輸出結果：truep1.sayHello(); //輸出結果：你好，我叫張三p2.sayHello(); //輸出結果：你好，我叫李四【任務8-3】JavaScript構造函數(shù)知識儲備——this關鍵字函數(shù)內的this指向通常與以下3種情況有關。①構造函數(shù)內部的this指向新創(chuàng)建的對象，前面講過了。②直接通過函數(shù)名調用函數(shù)時，this指向的是全局對象window。③如果將函數(shù)作為對象的方法調用，this將會指向該對象?！救蝿?-3】JavaScript構造函數(shù)知識儲備——this關鍵字functionfoo(){returnthis;}varo={name:'Jim',func:foo};console.log(foo()===window); //對應第2種情況，輸出結果：trueconsole.log(o.func()===o); //對應第3種情況，輸出結果：true【任務8-3】JavaScript構造函數(shù)知識儲備——更改this指向JavaScript提供兩種方式手動更改this的指向：apply()

call()functionmethod(){console.log();}method.apply({name:'張三'}); //輸出結果：張三method.call({name:'李四'}); //輸出結果：李四【任務8-3】JavaScript構造函數(shù)知識儲備——更改this指向apply()第2個參數(shù)表示調用函數(shù)時傳入的參數(shù)，通過數(shù)組的形式傳遞；call()使用第2~N個參數(shù)來表示調用函數(shù)時傳入的參數(shù)。functionmethod(a,b){console.log(a+b);}method.apply({},['1','2']); //數(shù)組方式傳參，輸出結果：12method.call({},'3','4'); //參數(shù)方式傳參，輸出結果：34【任務8-3】JavaScript構造函數(shù)知識拓展——遍歷對象的屬性和方法使用for…in語法可以遍歷對象中的所有屬性和方法。//準備一個待遍歷的對象varobj={name:'小明',age:18,sex:'男'};//遍歷obj對象for(varkinobj){//通過k可以獲取遍歷過程中的屬性名或方法名console.log(k); //依次輸出：name、age、sexconsole.log(obj[k]); //依次輸出：小明、18、男}【任務8-3】JavaScript構造函數(shù)知識拓展——判斷對象成員是否存在使用in運算符判斷一個對象中的某個成員是否存在。