2016年4月28日javascript進(jìn)階第4天js4案例筆記

JavaScript進(jìn)4（6班級(jí)：前端2期日期：2016630E-mail:JavaScript進(jìn) 一、JavaScript對(duì) 對(duì)象的字面量和JSON的關(guān) 說說 方 二、構(gòu)造函 三、原 proto屬 四、上升到面向?qū)? 一、JavaScript對(duì)對(duì)象是屬性的無序集k-v對(duì)兒之間用逗號(hào)隔開。正如字符串的界定符是””，數(shù)組的界定符是[]function(){}11varobj=2name小明3age:124男5對(duì)象就是屬性的無序集合、正如我們剛才定義的一個(gè)obj這個(gè)對(duì)象一樣，這個(gè)obj里面有name、age 、對(duì)象可以通過“打點(diǎn)”他的屬性 也就是說，對(duì)象就是屬性的封裝，對(duì)象內(nèi)部除了屬性什么都沒有11varobj=2name小明3age:124男56o:console.log("你好，我是，今年this.age歲了7}8看上面這個(gè)obj，我們?cè)黾恿艘粋€(gè)say vararr=["小明12180,"男 //對(duì)象的字面量和JSON的關(guān)一句話：JSON要求所有的鍵必須有引號(hào)，而對(duì)象字面量不要求JSONJavaScriptObjectNotationJavaScript合標(biāo)識(shí)符要求的時(shí)候（可以有英語(yǔ)字母、數(shù)字、_、$，不能以數(shù)字開頭），此時(shí)必須用雙引號(hào)引上：11varobj=2"yuwen-score100 3"shuxue-score":456console.log(obj["shuxue-score"]);11varobj=2"yuwen-score":1003"shuxue-score":80456$:99 _8*8,//b3: 789JSON已經(jīng)超脫了對(duì)象字面量的含義，已經(jīng)成為交換語(yǔ)言了，PHP工程師、JavaJSON，和我們JS交換數(shù)據(jù)使用（Ajax課程大量用到）。說說ok，我們先來研究研究什么是thisJavaScriptthis11<script23window對(duì)象，window正如你所見，無論我們的代碼多么長(zhǎng)、多么復(fù)雜，只要這個(gè)語(yǔ)句不是在函數(shù)中寫的，那么這個(gè)語(yǔ)句上下文一定window對(duì)象所以我們現(xiàn)在要把注意力放到函數(shù)里面的this是誰(shuí)函數(shù)里面的this是誰(shuí)，不是看這個(gè)函數(shù)如何定義，而是看這個(gè)函數(shù)如何調(diào)用當(dāng)函數(shù)用()運(yùn)算符來調(diào)用的時(shí)候，函數(shù)里面的this指的是window對(duì) 11function23}45fun();當(dāng)函數(shù)被當(dāng)做DOM元素 處理程序的時(shí)候，函數(shù)里面的this是觸 的DOM元 11function23}45varbox 6box.onclick //box這個(gè)對(duì) ppp111varps 23for(vari=0;i<ps.length;4ps[i].onclick=5//此處this就是點(diǎn)擊的p元6var_this=78//此處的this是window對(duì)象了??！所以要用外部的this，就是9_this.style.background=}}當(dāng)函數(shù)被當(dāng)做某個(gè)對(duì)象屬性被調(diào)用的時(shí)候，此時(shí)這個(gè)函數(shù)里面的this指的是這個(gè)對(duì) 11varobj=234name:"小明:"男 :135haha:6}78 //obj對(duì)call和apply方法可以自由設(shè)置函數(shù)里面的this是 call表示呼叫，在JS中可以讓任何一個(gè)函數(shù)調(diào)用call方法，里面的參數(shù)是對(duì)象 此時(shí)表示函數(shù)立即運(yùn)行！且函數(shù)內(nèi)部的this指向?qū)ο骯pply表示應(yīng)用，在JS中可以讓任何一個(gè)函數(shù)調(diào)用apply方法，里面的參數(shù)是對(duì) 此時(shí)表示函數(shù)立即運(yùn)行！且函數(shù)內(nèi)部的this指向?qū)ο?1function23}45varobj=67name小明age:8}9fun.call(obj);//小fun.apply(obj);//小fun會(huì)被以obj的去調(diào)用。所謂的指的是this指向誰(shuí)11functionsum(a,b,2this.zongfen=a+b+3}apply、callsum函數(shù)的時(shí)候，其實(shí)也可以傳入?yún)?shù)。callapply就出現(xiàn)了芝 //call sum.apply(obj[88,44,33]);apply function2//這函數(shù)本身需要的是逗號(hào)隔開的參數(shù)。功能就是無論傳進(jìn)來多少參數(shù)，都能返回他們的和3for(vari=0,sum=0;i<arguments.length;4sum+=5}6return 8 vararr=//這里我們想計(jì)算arr所有項(xiàng)的和，但是sum需要的是逗號(hào)隔開的參數(shù)列表，此時(shí)可以雞賊的使用方法，此時(shí)arr的參數(shù)就會(huì)自動(dòng)變?yōu)槎禾?hào)隔開的形式了方this11varxiaoming=2name小明3age:4zhangda:56}78xiaoming.zhangda();9xiaoming.zhangda();xiaoming.zhangda();xiaoming.age66;//人工干預(yù)了屬性xiaoming.zhangda();xiaoming.zhangda();xiaoming.zhangda(); console.log(xiaoming.age);//this，因?yàn)橐僮髯约旱膶傩浴５悄阋欢ㄒ涀。藭r(shí)不一定只有方二、構(gòu)造函 box.onclick= 我們來學(xué)習(xí)第6種函數(shù)調(diào)用的方式！用new關(guān)鍵字來調(diào)用函數(shù)11）2）12123小明";this.age=11;4 男5}67varxiaoming=new8new是一種新的調(diào)用函數(shù)的方式！此時(shí)這個(gè)函數(shù)里面的this指的是系統(tǒng)新創(chuàng)建的空對(duì)象。會(huì)依次執(zhí)行里面new會(huì)誕生一個(gè)新對(duì)象，英語(yǔ)里面“newnew關(guān)鍵字調(diào)用的函數(shù)，這個(gè)函數(shù)通過“四步走”能夠返回指定屬性的對(duì)象。一些編程語(yǔ)言中，管這個(gè)東西叫做“類”，JS中沒有類，只有構(gòu)造函數(shù)！構(gòu)造函數(shù)由于要被new關(guān)鍵字調(diào)用，有特殊性，所以我們約定這個(gè)函數(shù)的首字母要大寫 functionPeople(name,=3this.age=4=; newname、age、屬性，他們有相同的屬性群，所以別的編程語(yǔ)言中，把People叫做我們發(fā)現(xiàn)xiaoming和xiaohong都是具有相同屬性群的對(duì)象，都有name屬性、age屬性、 我們xiaomingxiaohongPeople“類”的“．”varvarxiaomingnewPeople("小明12男varxiaohongnewPeople("小紅6女new來調(diào)用，此時(shí)返回的對(duì)象都擁有相同的屬性群。6box.onclick=new三、原原型的定JavaScriptprototype112//人的構(gòu)造函數(shù)。大寫P暗示我們一會(huì)要用new關(guān)鍵字來調(diào)//會(huì)返回一個(gè)新對(duì)象，所謂人類對(duì)象的實(shí)例3functionPeople(name,=5this.age=6=;7}8//我們給構(gòu)造函數(shù)添加9Ptotype=school愛前端teacher考拉}//實(shí)例化了一個(gè)People“類”的對(duì)varxiaomingnewPeople("小明12男//控制臺(tái)輸出小明的scholl屬prototype當(dāng)當(dāng)某一個(gè)實(shí)例比如xiaoming打點(diǎn)調(diào)用自己的屬性的時(shí)候，如果這個(gè)屬性自身沒有，那么系統(tǒng)將會(huì)在這個(gè)構(gòu)造函數(shù)的原型(totype)上去尋找這個(gè)屬性，如果找到了，也被視為這個(gè)對(duì)象proto屬這個(gè)屬性不是W3C的屬性，是Chrome瀏覽器為了方便初學(xué)者學(xué)習(xí)，自定義的一個(gè)屬性。實(shí)例對(duì)象（xiaoming）的proto屬性指向自己的構(gòu)造函數(shù)的原型。實(shí)際上，xiaomingconstructorxiaomingconstructor屬性呢？因Ptotype.schoolPtotype.school愛前端Ptotype.teacher考拉和 Ptotype=23school愛前端teacher考拉 原型的用11functionDog(name,type,2=3this.type=4this.age=556this.wangwang=7alert("汪汪！我是，我是8}9}varxiaobainewDog("小白京巴 varsnoopynewDog("史努比斑點(diǎn)狗 alert(xiaobai.wangwang==snoopy.wangwang);但是調(diào)用的函數(shù)，是兩個(gè)不同的函數(shù)！我們做==false。因?yàn)檫@兩個(gè)函數(shù)位于內(nèi)存中不同的地方，都是xiaobai、snoopy 和 在調(diào)用不同的函數(shù)??！只不過他們的業(yè)務(wù)一樣，我們感覺是同一個(gè)函數(shù)，但是確實(shí)位于內(nèi)存中的不同地樣。functionDog(name,type,//構(gòu)造函數(shù)里面只=this.type=this.age= //所有的方法要寫在原型里面！為//因?yàn)榉椒ǘ际呛瘮?shù)，而函數(shù)天生要被復(fù)用，只有寫在原型里面的方法，才能被9Dtotype.wangwang=alert("汪汪！我是，我是 Dtotype.chifan=alert("miamiamia， varxiaobainewDog("小白京巴varsnoopynewDog("史努比斑點(diǎn)狗alert(xiaobai.wangwangsnoopy.wangwang);//truealert(xiaobai.chifansnoopy.chifan);//truexiaobaisnoopy構(gòu)造函數(shù)里面定義屬性，構(gòu)造函數(shù)的原型定義方法 function2//構(gòu)造函數(shù)里面定義屬 //構(gòu)造函數(shù)的原型定義Btotype.yundong=6 varb=new四、上升到面向?qū)avaScript是基于對(duì)象的語(yǔ)言，而不是面向?qū)ο蟮恼Z(yǔ)言。因?yàn)槊嫦驅(qū)ο蟮恼Z(yǔ)言要求有“繼承、多態(tài)、封裝”