當(dāng)你在使用手機(jī)的時(shí)候，你會(huì)發(fā)現(xiàn)，你并不懂得其中的原理就會(huì)操作了，其實(shí)這就是面向?qū)ο蟮乃枷?。面向?qū)ο筮€有很多地方都會(huì)運(yùn)用到。JavaScript也不例外，現(xiàn)在跟隨我的腳步，來(lái)學(xué)習(xí)一下吧。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括沾化網(wǎng)站建設(shè)、沾化網(wǎng)站制作、沾化網(wǎng)頁(yè)制作以及沾化網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，沾化網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到沾化省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
面向過(guò)程和面向?qū)ο缶幊谈攀?br/>面向過(guò)程編程就是分析出解決問(wèn)題的步驟，然后使用函數(shù)把這些步驟一步步實(shí)現(xiàn)，重心放在完成的每個(gè)過(guò)程上。
面向?qū)ο髣t是以封裝的思想，將問(wèn)題分析得到的數(shù)據(jù)封裝成一個(gè)個(gè)的對(duì)象，然后通過(guò)對(duì)對(duì)象的操作來(lái)完成相應(yīng)的功能。
舉個(gè)栗子：廚師炒菜
以面向過(guò)程的思想來(lái)分析應(yīng)該分為下面幾個(gè)步驟：
? 1.檢查食材是否齊全 2.如果不不夠，去菜市場(chǎng)買菜 3.洗菜 4.開(kāi)火 5.按炒菜（按順序放入相應(yīng)的食材，調(diào)料等） 6.出鍋裝盤
以面向?qū)ο蟮乃枷敕治鰟t是這樣的：
? 1.廚師，檢查食材，炒菜 2.采購(gòu)員，去菜市場(chǎng)買菜 3.墩子，洗菜，切菜，備菜
? 通過(guò)調(diào)用上面對(duì)象中的行為方法即可完成炒菜的整個(gè)過(guò)程
從上面的例子可以看出，面向?qū)ο蠛兔嫦蜻^(guò)程最大的不同在于，面向?qū)ο箨P(guān)心的是由哪些對(duì)象，每個(gè)對(duì)象應(yīng)該有哪些功能，而面向過(guò)程關(guān)心的是實(shí)現(xiàn)過(guò)程中的每個(gè)步驟。
那么這兩種思想到底孰優(yōu)孰劣呢？從表面上看，貌似面向?qū)ο蟾?，為什么呢？因?yàn)樗耆衔覀兊恼Ｋ季S方式，所以在接受度方面，面向?qū)ο蟮乃枷肟隙ㄊ歉?。但是面向過(guò)程也有他的優(yōu)勢(shì)，就是靈活便捷，而面向?qū)ο笙鄬?duì)來(lái)說(shuō)會(huì)更耗資源，更慢一點(diǎn)。
所以，至于以后使用哪一種，這就需要看我們的具體需求，根據(jù)不同的需求做不同的選擇。
面向?qū)ο缶幊痰南嚓P(guān)概念
通過(guò)上面的分析，我們知道面向?qū)ο蟮闹攸c(diǎn)在于功能分析和對(duì)象的封裝上，那么最終我們得到的對(duì)象的結(jié)構(gòu)是怎樣的，我們繼續(xù)往下學(xué)習(xí)。
比如，我通過(guò)對(duì)人的分析得到，每個(gè)人都有姓名，年齡，性別等屬性，同時(shí)也有吃飯睡覺(jué)等行為，那么用JS可以做如下的封裝：
var p = {
name : “xiao song”,
age : 10,
sex : 1,
eat : function () {
console.log(“吃飯”);
},
sleep : function () {
console.log(“睡覺(jué)”);
}
}console.log(p.name);//訪問(wèn)對(duì)象的屬性
p.eat();//訪問(wèn)對(duì)象的方法
上面的p則表示一個(gè)對(duì)象，其中的name / age / sex稱之為對(duì)象的屬性，eat / sleep 稱之為對(duì)象的方法，我們通過(guò)訪問(wèn)該對(duì)象的屬性或者方法達(dá)到相應(yīng)的目的即可。
DOM操作相關(guān)知識(shí)點(diǎn)復(fù)習(xí)
在學(xué)習(xí)了html之后我們發(fā)現(xiàn)，html文檔中的內(nèi)容其實(shí)就是由一堆的標(biāo)簽組成，由于在后面的課程中需要使用到html，所以我們先大致的回顧一下它的結(jié)構(gòu)。
H5-JS面向?qū)ο?/p>
div h4：元素節(jié)點(diǎn) id class：屬性節(jié)點(diǎn) H5-JS面向?qū)ο螅何谋竟?jié)點(diǎn) 一個(gè)html文檔主要由這三部分組成，DOM（文檔對(duì)象模型）是對(duì)操作這些元素的屬性或者方法進(jìn)行了封裝，從而達(dá)到方便快捷的操作html的目的。 獲取元素對(duì)象：document.getElementById("div1") 訪問(wèn)元素的屬性：div1.className 訪問(wèn)元素的文本內(nèi)容：div1.innerText 增刪改元素：div1.appendChild(newNode) 下面，我們就通過(guò)這些API來(lái)講解說(shuō)明面向?qū)ο笙嚓P(guān)的內(nèi)容。 創(chuàng)建并設(shè)置標(biāo)簽（面向過(guò)程） 需求1：創(chuàng)建三個(gè)div元素，并設(shè)置邊框，背景色，文本及字體顏色 for (var i = 0; i < 3; i++) { var div = document.createElement("div"); div.innerText="div"+i; div.style.backgroundColor="green"; div.style.border="1px solid #000"; div.style.color="white"; document.body.appendChild(div); }
需求2：為頁(yè)面中存在的三個(gè)P元素設(shè)置邊框，背景色，文本及字體顏色
我是P1
我是P2
我是P3
.setStype(ps,"green");vartests=.getElementsByClassName(“test”);
.setStype(tests,"red");后面如果我們還都需要封裝其他功能，可以直接在
.setStype(tests,"red");后面如果我們還都需要封裝其他功能，可以直接在這個(gè)對(duì)象中添加即可
如，根據(jù)元素的id屬性獲取元素，并未其設(shè)置樣式
getElementById:function (eleId) {
return [document.getElementById(eleId)];
}
需要注意的是，在設(shè)置樣式方法中，我們默認(rèn)是將傳遞進(jìn)來(lái)的元素當(dāng)做數(shù)組進(jìn)行處理的，所以，在這里，我們?cè)趃etElementById方法中，手動(dòng)將獲取到的元素添加到數(shù)組中返回。
通過(guò)觀察，在$對(duì)象中，存在三個(gè)獲取元素的方法，這里我們最好將其按照下面的方式來(lái)歸類
var $ = {
getElements:{
byTagName: function (tagName) {
return document.getElementsByTagName(tagName);
},
byClassName:function (className) {
return document.getElementsByClassName(className);
},
byId:function (eleId) {
return [document.getElementById(eleId)];
}
},
setStype:function (eles,bgcolor) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.backgroundColor=bgcolor;
eles[i].style.border=“1px solid #000”;
eles[i].style.color=“white”;
}
}
}
將獲取元素的方法封裝到$對(duì)象的getElements屬性中，今后如果還有其他獲取元素的方法，都應(yīng)該是添加到getElements屬性中，其他類型的方法也應(yīng)該按照這種思想進(jìn)行封裝。
面向?qū)ο缶幊痰娜筇匦?br/>面向?qū)ο蟮奶匦裕?br/>封裝
作用：復(fù)用和信息隱藏
封裝，也就是把客觀事物封裝成抽象的類，并且類可以把自己的數(shù)據(jù)和方法只讓可信的類或者對(duì)象操作，對(duì)不可信的進(jìn)行信息隱藏。
繼承
它可以使用現(xiàn)有類的所有功能，并在無(wú)需重新編寫原來(lái)的類的情況下對(duì)這些功能進(jìn)行擴(kuò)展。
通過(guò)繼承創(chuàng)建的新類稱為“子類”或“派生類”。
被繼承的類稱為“基類”、“父類”或“超類”。
繼承的過(guò)程，就是從一般到特殊的過(guò)程。
多態(tài)
當(dāng)存在繼承關(guān)系時(shí),允許將父類對(duì)象看成為和它的一個(gè)或多個(gè)子類對(duì)象等同.
這樣,可以根據(jù)當(dāng)前賦給父類對(duì)象的子對(duì)象的具體特性以不同的方式進(jìn)行運(yùn)行.
用字面量方式創(chuàng)建對(duì)象
直接使用字面量方式創(chuàng)建對(duì)象比較方面，以鍵值對(duì)的格式來(lái)定義數(shù)據(jù)
var book1 = {
name:“JavaScript權(quán)威指南”,
price:100,
author:“tim”,
showInfo:function () {
console.log(this.name,this.price,this.author);
}
}console.log(book1);
上面定義了一個(gè)書(shū)對(duì)象，并為其添加了屬性和方法，我們也可以直接訪問(wèn)其中的屬性和方法。
這種方式的弊端是，如果需要?jiǎng)?chuàng)建多個(gè)類似的對(duì)象，就顯得不太方便了，會(huì)出現(xiàn)大量的重復(fù)代碼。
也就是說(shuō)，這種方式不適合創(chuàng)建大量的相同或相似的對(duì)象。
內(nèi)置構(gòu)造函數(shù)和簡(jiǎn)單工廠創(chuàng)建對(duì)象
使用new關(guān)鍵字+內(nèi)置的構(gòu)造函數(shù)創(chuàng)建對(duì)象
var book2 = new Object();
book2.name=“JS”;
book2.price=10;
book2.author=“作者”;
book2.showInfo=function () {
console.log(this.name,this.price,this.author);
}
book2.showInfo();
這種方式和字面量方式創(chuàng)建對(duì)象存在的問(wèn)題差不多，在大量創(chuàng)建對(duì)象的時(shí)候都會(huì)存在大量重復(fù)的代碼。
那么，利用前面的封裝的思想，我們應(yīng)該可以想到，當(dāng)有重復(fù)代碼的時(shí)候，我們可以將這些重復(fù)代碼抽取到函數(shù)中來(lái)解決。
function createBook(name, price, author) {
var book = new Object();
book.name=name;
book.price=price;
book.author=author;
book.showInfo=function () {
console.log(this.name,this.price,this.author);
}
return book;
}var book3 = createBook(“bookName1”,10,“author1”);var book4 = createBook(“bookName2”,10,“author2”);console.log(book3);console.log(book4);
我們將創(chuàng)建book對(duì)象的代碼封裝到createBook函數(shù)中，當(dāng)需要?jiǎng)?chuàng)建一個(gè)book對(duì)象的時(shí)候，直接調(diào)用該函數(shù)，將函數(shù)需要的參數(shù)傳遞過(guò)去即可。
那么，相同的思想，如果我們需要?jiǎng)?chuàng)建其他的對(duì)象，一樣可以使用封裝函數(shù)的方法來(lái)解決，這是沒(méi)問(wèn)題的。
function createPerson(name, age) {
var p = new Object();
p.name = name;
p.age = age;
return p;
}console.log(createPerson(“Neld”, 10))
利用上面的函數(shù)，我們可以創(chuàng)建一個(gè)Person對(duì)象出來(lái)，但是通過(guò)打印對(duì)比，我們無(wú)法通過(guò)創(chuàng)建出來(lái)的對(duì)象判斷該對(duì)象的類型，而在實(shí)際開(kāi)發(fā)中，判斷對(duì)象的類型是我們經(jīng)常需要執(zhí)行的，所以我們繼續(xù)看下面的自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象。
自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象
構(gòu)造函數(shù)和普通的函數(shù)的定義方式完全一樣，如下，我們定義一個(gè)創(chuàng)建Person的構(gòu)造函數(shù)
function createPerson(name, age, sex) {
this.name=name;
this.age=age;
this.sex=sex;
}var p = new createPerson(“Neld”, 10, 1);var p2 = new createPerson(“Song”, 12, 0);console.log§;console.log(p2);
自定義函數(shù)和工廠函數(shù)非常相似，但是還是存在很大的區(qū)別
構(gòu)造函數(shù)名的首字母要求大寫
需要使用new關(guān)鍵字和構(gòu)造函數(shù)一起創(chuàng)建對(duì)象
在函數(shù)中，不需要手動(dòng)創(chuàng)建對(duì)象進(jìn)行數(shù)據(jù)封裝，會(huì)自動(dòng)創(chuàng)建并封裝數(shù)據(jù)
在函數(shù)最后，不需要手動(dòng)返回創(chuàng)建好的對(duì)象，會(huì)自動(dòng)返回
到這里，大家肯定會(huì)有疑問(wèn)，自定義構(gòu)造函數(shù)到底是如何創(chuàng)建并封裝對(duì)象呢？
在函數(shù)內(nèi)部默認(rèn)會(huì)創(chuàng)建一個(gè)空對(duì)象 var obj = new Object();
默認(rèn)把創(chuàng)建好的對(duì)象賦值給this this = obj;
默認(rèn)設(shè)置this的原型對(duì)象為當(dāng)前構(gòu)造函數(shù)的原型對(duì)象
通過(guò)this添加屬性和方法
默認(rèn)會(huì)把內(nèi)部創(chuàng)建的對(duì)象返回 return this;
通過(guò)上面的分析，相信大家已經(jīng)能夠理解自定義構(gòu)造函數(shù)的基本使用以及基本的原理了。
構(gòu)造函數(shù)創(chuàng)建對(duì)象的返回值
默認(rèn)情況下，構(gòu)造函數(shù)內(nèi)部會(huì)返回新創(chuàng)建好的對(duì)象（this）
主動(dòng)返回：
如果返回值類型的數(shù)據(jù)，仍然返回創(chuàng)建好的對(duì)象（this），不做任何修改
如果返回引用類型的數(shù)據(jù)，則返回指定的數(shù)據(jù)，不再返回this。
函數(shù)作為構(gòu)造函數(shù)參數(shù)使用
在JS世界里，函數(shù)屬于一等公民，擁有最高特權(quán)，在使用過(guò)程中可以作為變量賦值，可以作為參數(shù)傳遞，也可以作為函數(shù)的返回值，下面我們具體來(lái)看看他的使用。
函數(shù)作為參數(shù)使用
function f1(name,age,fn) {
console.log(“name:”,name,“age:”,age);
fn();
}function fn(){
console.log(“Hello H5”);
}
f1(“Neld”, 10, fn);
輸出結(jié)果：
? name: Neld age: 10
? Hello H5
在上面的代碼中，我們將函數(shù)fn作為參數(shù)傳遞給了函數(shù)f1,并且在函數(shù)f1中調(diào)用，得到的相應(yīng)的打印輸出。
函數(shù)作為返回值使用
function f1(name,age,fn) {
console.log(“name:”,name,“age:”,age);
return fn;
}function fn(){
console.log(“Hello H5”);
}var retFun = f1(“Neld”, 10, fn);
retFun();
在函數(shù)f1中將傳遞進(jìn)來(lái)的fn作為返回值返回，接收到調(diào)用f1之后的返回值得到的是返回的函數(shù)，然后在調(diào)用retFun得到打印結(jié)果。
此時(shí)的f1為高階函數(shù)，即參數(shù)中有一個(gè)或多個(gè)函數(shù)，并且把函數(shù)作為返回值。
此時(shí)的fn為回調(diào)函數(shù)，fn作為參數(shù)傳遞給函數(shù)f1,在f1內(nèi)部調(diào)用。
函數(shù)作為構(gòu)造函數(shù)的參數(shù)使用
function createPerson(name, age, sex, say) {
this.name=name;
this.age=age;
this.sex=sex;
this.say=say;
}var p = new createPerson(“Neld”, 10, 1, function () {
console.log(“say hello”);
});var p2 = new createPerson(“Song”, 12, 0,function () {
console.log(“say bye”);
});
p.say();
p2.say();
在構(gòu)造函數(shù)中也可以對(duì)方法進(jìn)行封裝，如果方法的實(shí)現(xiàn)是由調(diào)用者決定的，那么可以在構(gòu)造函數(shù)中接收一個(gè)函數(shù)對(duì)象，然后在構(gòu)造函數(shù)中進(jìn)行封裝。
如上面的函數(shù)say，在創(chuàng)建p和p2對(duì)象的時(shí)候傳遞并賦值給形參say，然后在構(gòu)造函數(shù)中賦值給當(dāng)前對(duì)象。
構(gòu)造器屬性
前面說(shuō)到工廠函數(shù)創(chuàng)建對(duì)象是比較方便的，但是存在一個(gè)問(wèn)題就是無(wú)法得知?jiǎng)?chuàng)建出來(lái)的對(duì)象的類型，所以我們選擇使用自定義的構(gòu)造函數(shù)來(lái)創(chuàng)建，構(gòu)造函數(shù)創(chuàng)建對(duì)象我們已經(jīng)會(huì)使用了，那么如何通過(guò)他得知?jiǎng)?chuàng)建對(duì)象的類型呢？這里我們提供兩種方式。
constructor屬性
function Person(name) {
this.name = name;
}function Dog(name) {
this.name = name;
}var p = new Person(“p”);var d = new Dog(“d”);console.log(p.constructor);//打印得到Person函數(shù)對(duì)象console.log(d.constructor);//打印得到Dog函數(shù)對(duì)象if(p.constructor == Person){
console.log(“是Person對(duì)象”);
}if(d.constructor == Dog){
console.log(“是Dog對(duì)象”);
}
instanceof關(guān)鍵字
function Person(name) {
this.name = name;
}function Dog(name) {
this.name = name;
}var p = new Person(“p”);var d = new Dog(“d”);console.log(p instanceof Person);//trueconsole.log(d instanceof Person);//false
instanceof關(guān)鍵字可以直接用來(lái)判斷對(duì)象的類型，如果是指定的類型，返回true，反之返回false。
構(gòu)造函數(shù)的調(diào)用和命名
在學(xué)習(xí)了構(gòu)造函數(shù)之后，有的同學(xué)對(duì)于它和普通函數(shù)的區(qū)別還是不太清楚，這里我們就再對(duì)構(gòu)造函數(shù)做一個(gè)說(shuō)明。
構(gòu)造函數(shù)和普通函數(shù)在定義語(yǔ)法上沒(méi)有任何區(qū)別
function 函數(shù)名（參數(shù)列表）{代碼塊；}
為了和普通函數(shù)區(qū)分開(kāi)，我們約定將構(gòu)造函數(shù)的名稱首字母大寫
構(gòu)造函數(shù)一樣可以直接調(diào)用，此時(shí)內(nèi)部的this執(zhí)行window，這種方式不安全，有可能會(huì)在函數(shù)內(nèi)部修改當(dāng)前的全局變量，不建議使用，而且這樣做也不能創(chuàng)建對(duì)象
想要?jiǎng)?chuàng)建對(duì)象，必須使用new和構(gòu)造函數(shù)一起使用
函數(shù)上下文和this指針
在JS編程的過(guò)程中發(fā)現(xiàn)，我們大量使用到this關(guān)鍵字，用好了this，能讓我們的代碼更加優(yōu)雅。
this總是執(zhí)行一個(gè)對(duì)象（引用類型），但是具體執(zhí)行誰(shuí)，需要根據(jù)我們?cè)谀睦锸褂胻his有關(guān)。這里主要分為下面幾種情況：
函數(shù)外部
函數(shù)外部的作用域是全局作用域（window），所以，在全局作用域中使用的this指向window
普通函數(shù)內(nèi)部
函數(shù)內(nèi)部的作用域是局部的，屬于調(diào)用當(dāng)前函數(shù)的對(duì)象，所以this執(zhí)向調(diào)用當(dāng)前函數(shù)的對(duì)象
構(gòu)造函數(shù)內(nèi)部
在構(gòu)造函數(shù)中，this直接執(zhí)行當(dāng)前創(chuàng)建出來(lái)的新對(duì)象
在開(kāi)發(fā)中，我們也可以使用call或者apply函數(shù)修改this的執(zhí)行，這一點(diǎn)我們?cè)诤竺胬^續(xù)說(shuō)明。
自定義構(gòu)造函數(shù)存在的問(wèn)題
自定義構(gòu)造函數(shù)可以解決工廠函數(shù)帶來(lái)的對(duì)象類型不確定的問(wèn)題，在開(kāi)發(fā)中用得非常多，那么目前我們的自定義構(gòu)造函數(shù)又是否存在問(wèn)題呢？先來(lái)看看下面的對(duì)象內(nèi)存結(jié)構(gòu)分析。
function Person(name, age, say) {
this.name = name;
this.age = age;
this.say = function(){
console.log(“say hello”);
}
}var p = new Person(“zs”, 10, say);console.log§;
上面創(chuàng)建的p對(duì)象的內(nèi)存結(jié)構(gòu)圖：
http://weahome.cn/article/jjpehd.html
重慶分公司
重慶分公司
