2016年4月28日javascript進階第4天js4案例筆記

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