2023學(xué)年完整公開課版JS對(duì)象進(jìn)階

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

JS對(duì)象進(jìn)階【任務(wù)8-3】JavaScript構(gòu)造函數(shù)需求分析構(gòu)造函數(shù)是JavaScript創(chuàng)建對(duì)象的另外一種方式。相對(duì)于字面量“{}”的方式，構(gòu)造函數(shù)可以創(chuàng)建出一些具有相同特征的對(duì)象?！八睒?gòu)造函數(shù)

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

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

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

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