有時(shí)候，我們使用電腦的時(shí)候寺滚，并不知道它的原理是什么，但是就是會(huì)使用他屈雄，這就是面向?qū)ο蟠迨印Ｍ瑯拥模贘avaScript中也可使用這種原理酒奶，接下來就隨我一起探索一下關(guān)于JavaScript面向?qū)ο蟮膬?nèi)容吧蓖议。
面向過程和面向?qū)ο缶幊谈攀?br>
面向過程編程就是分析出解決問題的步驟，然后使用函數(shù)把這些步驟一步步實(shí)現(xiàn)讥蟆，重心放在完成的每個(gè)過程上勒虾。
面向?qū)ο髣t是以封裝的思想，將問題分析得到的數(shù)據(jù)封裝成一個(gè)個(gè)的對象瘸彤，然后通過對對象的操作來完成相應(yīng)的功能修然。
舉個(gè)栗子：廚師炒菜
以面向過程的思想來分析應(yīng)該分為下面幾個(gè)步驟：
? 1.檢查食材是否齊全 2.如果不不夠，去菜市場買菜 3.洗菜 4.開火 5.按炒菜（按順序放入相應(yīng)的食材质况，調(diào)料等） 6.出鍋裝盤
以面向?qū)ο蟮乃枷敕治鰟t是這樣的：
? 1.廚師愕宋，檢查食材，炒菜 2.采購員结榄，去菜市場買菜 3.墩子中贝，洗菜，切菜臼朗，備菜
? 通過調(diào)用上面對象中的行為方法即可完成炒菜的整個(gè)過程
從上面的例子可以看出邻寿，面向?qū)ο蠛兔嫦蜻^程最大的不同在于蝎土，面向?qū)ο箨P(guān)心的是由哪些對象，每個(gè)對象應(yīng)該有哪些功能绣否，而面向過程關(guān)心的是實(shí)現(xiàn)過程中的每個(gè)步驟誊涯。
那么這兩種思想到底孰優(yōu)孰劣呢？從表面上看蒜撮，貌似面向?qū)ο蟾帽┕梗瑸槭裁茨兀恳驗(yàn)樗耆衔覀兊恼Ｋ季S方式段磨，所以在接受度方面取逾，面向?qū)ο蟮乃枷肟隙ㄊ歉谩５敲嫦蜻^程也有他的優(yōu)勢苹支，就是靈活便捷菌赖，而面向?qū)ο笙鄬碚f會(huì)更耗資源，更慢一點(diǎn)沐序。
所以，至于以后使用哪一種堕绩，這就需要看我們的具體需求策幼，根據(jù)不同的需求做不同的選擇。
面向?qū)ο缶幊痰南嚓P(guān)概念
通過上面的分析奴紧，我們知道面向?qū)ο蟮闹攸c(diǎn)在于功能分析和對象的封裝上特姐，那么最終我們得到的對象的結(jié)構(gòu)是怎樣的，我們繼續(xù)往下學(xué)習(xí)黍氮。
比如唐含，我通過對人的分析得到，每個(gè)人都有姓名沫浆，年齡捷枯，性別等屬性，同時(shí)也有吃飯睡覺等行為专执，那么用JS可以做如下的封裝：
var p = {
name : “xiao song”,
age : 10,
sex : 1,
eat : function () {
console.log(“吃飯”);
},
sleep : function () {
console.log(“睡覺”);
}
}console.log(p.name);//訪問對象的屬性
p.eat();//訪問對象的方法
上面的p則表示一個(gè)對象淮捆，其中的name / age / sex稱之為對象的屬性，eat / sleep 稱之為對象的方法本股，我們通過訪問該對象的屬性或者方法達(dá)到相應(yīng)的目的即可攀痊。
DOM操作相關(guān)知識點(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 h3：元素節(jié)點(diǎn) id class：屬性節(jié)點(diǎn) H5-JS面向?qū)ο螅何谋竟?jié)點(diǎn) 一個(gè)html文檔主要由這三部分組成躬审，DOM（文檔對象模型）是對操作這些元素的屬性或者方法進(jìn)行了封裝棘街，從而達(dá)到方便快捷的操作html的目的蟆盐。 獲取元素對象：document.getElementById("div1") 訪問元素的屬性：div1.className 訪問元素的文本內(nèi)容：div1.innerText 增刪改元素：div1.appendChild(newNode) 下面，我們就通過這些API來講解說明面向?qū)ο笙嚓P(guān)的內(nèi)容蹬碧。 創(chuàng)建并設(shè)置標(biāo)簽（面向過程） 需求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：為頁面中存在的三個(gè)P元素設(shè)置邊框誊稚，背景色，文本及字體顏色
我是P1
我是P2
我是P3
需求3：獲取頁面上三個(gè)class=“test”的元素罗心，設(shè)置邊框里伯，背景色，文本及字體顏色
我是標(biāo)題1
我是標(biāo)題2
我是標(biāo)題3
上面的代碼是以面向過程的思想完成的渤闷，可以看到疾瓮，兩個(gè)需求中的每個(gè)步驟都是我們一步一步完成的，問題很明顯飒箭，代碼大量的冗余狼电，這種代碼后期不好維護(hù)。
創(chuàng)建并設(shè)置標(biāo)簽（函數(shù)封裝）
對于上面重復(fù)的代碼弦蹂，我們可以使用函數(shù)對其進(jìn)行封裝
封裝了三個(gè)函數(shù)：
setStype(eles,bgcolor)：為元素設(shè)置樣式
eles：哪些元素
bgcolor：背景色
getElementsByTagName(tagName)：根據(jù)元素名稱獲取指定的元素
tagName：元素名
getElementsByClassName(className)：根據(jù)class屬性名獲取指定的元素
className：class屬性名
接下來就是調(diào)用三個(gè)方法完成了上面的需求肩碟，解決了第一種方式中大量的重復(fù)代碼的問題。
但是凸椿，這種方式仍然存在問題削祈。在前面JS基礎(chǔ)中說過，我們應(yīng)該盡量避免大量使用全局變量脑漫，這會(huì)降低程序的執(zhí)行效率髓抑，在上面的程序中，我們就出現(xiàn)了5個(gè)（包括函數(shù)）优幸。所以需要繼續(xù)優(yōu)化吨拍。
創(chuàng)建并設(shè)置標(biāo)簽（面向?qū)ο螅?br>
使用面向?qū)ο蟮乃枷雭斫鉀Q上面的問題，我們可以將上面的三個(gè)函數(shù)都裝到一個(gè)對象中
var .getElementsByTagName(“p”)
.setStype(ps,"green");vartests=
.setStype(ps,"green");vartests=.getElementsByClassName(“test”);
.setStype(tests,"red");后面如果我們還都需要封裝其他功能网杆，可以直接在
.setStype(tests,"red");后面如果我們還都需要封裝其他功能密末，可以直接在這個(gè)對象中添加即可
如，根據(jù)元素的id屬性獲取元素跛璧，并未其設(shè)置樣式
getElementById:function (eleId) {
return [document.getElementById(eleId)];
}
需要注意的是严里，在設(shè)置樣式方法中，我們默認(rèn)是將傳遞進(jìn)來的元素當(dāng)做數(shù)組進(jìn)行處理的追城，所以刹碾，在這里，我們在getElementById方法中座柱，手動(dòng)將獲取到的元素添加到數(shù)組中返回迷帜。
通過觀察物舒，在 = {
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”;
}
}
}
將獲取元素的方法封裝到$對象的getElements屬性中冠胯，今后如果還有其他獲取元素的方法，都應(yīng)該是添加到getElements屬性中锦针，其他類型的方法也應(yīng)該按照這種思想進(jìn)行封裝荠察。
面向?qū)ο缶幊痰娜筇匦?br>
面向?qū)ο蟮奶匦裕?br>
封裝
作用：復(fù)用和信息隱藏
封裝，也就是把客觀事物封裝成抽象的類奈搜，并且類可以把自己的數(shù)據(jù)和方法只讓可信的類或者對象操作悉盆，對不可信的進(jìn)行信息隱藏。
繼承
它可以使用現(xiàn)有類的所有功能馋吗，并在無需重新編寫原來的類的情況下對這些功能進(jìn)行擴(kuò)展焕盟。
通過繼承創(chuàng)建的新類稱為“子類”或“派生類”。
被繼承的類稱為“基類”宏粤、“父類”或“超類”脚翘。
繼承的過程，就是從一般到特殊的過程绍哎。
多態(tài)
當(dāng)存在繼承關(guān)系時(shí),允許將父類對象看成為和它的一個(gè)或多個(gè)子類對象等同.
這樣,可以根據(jù)當(dāng)前賦給父類對象的子對象的具體特性以不同的方式進(jìn)行運(yùn)行.
用字面量方式創(chuàng)建對象
直接使用字面量方式創(chuàng)建對象比較方面来农，以鍵值對的格式來定義數(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è)書對象，并為其添加了屬性和方法蛇摸，我們也可以直接訪問其中的屬性和方法。
這種方式的弊端是灿巧，如果需要?jiǎng)?chuàng)建多個(gè)類似的對象赶袄，就顯得不太方便了，會(huì)出現(xiàn)大量的重復(fù)代碼抠藕。
也就是說饿肺，這種方式不適合創(chuàng)建大量的相同或相似的對象。
內(nèi)置構(gòu)造函數(shù)和簡單工廠創(chuàng)建對象
使用new關(guān)鍵字+內(nèi)置的構(gòu)造函數(shù)創(chuàng)建對象
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)建對象存在的問題差不多盾似，在大量創(chuàng)建對象的時(shí)候都會(huì)存在大量重復(fù)的代碼敬辣。
那么，利用前面的封裝的思想零院，我們應(yīng)該可以想到溉跃，當(dāng)有重復(fù)代碼的時(shí)候，我們可以將這些重復(fù)代碼抽取到函數(shù)中來解決告抄。
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對象的代碼封裝到createBook函數(shù)中撰茎，當(dāng)需要?jiǎng)?chuàng)建一個(gè)book對象的時(shí)候，直接調(diào)用該函數(shù)打洼，將函數(shù)需要的參數(shù)傳遞過去即可龄糊。
那么逆粹，相同的思想，如果我們需要?jiǎng)?chuàng)建其他的對象炫惩，一樣可以使用封裝函數(shù)的方法來解決僻弹，這是沒問題的。
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對象出來蹋绽，但是通過打印對比，我們無法通過創(chuàng)建出來的對象判斷該對象的類型爸舒，而在實(shí)際開發(fā)中蟋字，判斷對象的類型是我們經(jīng)常需要執(zhí)行的，所以我們繼續(xù)看下面的自定義構(gòu)造函數(shù)創(chuàng)建對象扭勉。
自定義構(gòu)造函數(shù)創(chuàng)建對象
構(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)建對象
在函數(shù)中忠聚，不需要手動(dòng)創(chuàng)建對象進(jìn)行數(shù)據(jù)封裝，會(huì)自動(dòng)創(chuàng)建并封裝數(shù)據(jù)
在函數(shù)最后唱捣，不需要手動(dòng)返回創(chuàng)建好的對象两蟀，會(huì)自動(dòng)返回
到這里，大家肯定會(huì)有疑問震缭，自定義構(gòu)造函數(shù)到底是如何創(chuàng)建并封裝對象呢赂毯？
在函數(shù)內(nèi)部默認(rèn)會(huì)創(chuàng)建一個(gè)空對象 var obj = new Object();
默認(rèn)把創(chuàng)建好的對象賦值給this this = obj;
默認(rèn)設(shè)置this的原型對象為當(dāng)前構(gòu)造函數(shù)的原型對象
通過this添加屬性和方法
默認(rèn)會(huì)把內(nèi)部創(chuàng)建的對象返回 return this;
通過上面的分析，相信大家已經(jīng)能夠理解自定義構(gòu)造函數(shù)的基本使用以及基本的原理了拣宰。
構(gòu)造函數(shù)創(chuàng)建對象的返回值
默認(rèn)情況下党涕，構(gòu)造函數(shù)內(nèi)部會(huì)返回新創(chuàng)建好的對象（this）
主動(dòng)返回：
如果返回值類型的數(shù)據(jù)，仍然返回創(chuàng)建好的對象（this）巡社，不做任何修改
如果返回引用類型的數(shù)據(jù)膛堤，則返回指定的數(shù)據(jù)，不再返回this晌该。
函數(shù)作為構(gòu)造函數(shù)參數(shù)使用
在JS世界里肥荔，函數(shù)屬于一等公民，擁有最高特權(quán)朝群，在使用過程中可以作為變量賦值燕耿，可以作為參數(shù)傳遞，也可以作為函數(shù)的返回值姜胖，下面我們具體來看看他的使用缸棵。
函數(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)來的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ù)中也可以對方法進(jìn)行封裝圆雁，如果方法的實(shí)現(xiàn)是由調(diào)用者決定的忍级，那么可以在構(gòu)造函數(shù)中接收一個(gè)函數(shù)對象，然后在構(gòu)造函數(shù)中進(jìn)行封裝伪朽。
如上面的函數(shù)say轴咱，在創(chuàng)建p和p2對象的時(shí)候傳遞并賦值給形參say，然后在構(gòu)造函數(shù)中賦值給當(dāng)前對象烈涮。
構(gòu)造器屬性
前面說到工廠函數(shù)創(chuàng)建對象是比較方便的朴肺，但是存在一個(gè)問題就是無法得知?jiǎng)?chuàng)建出來的對象的類型，所以我們選擇使用自定義的構(gòu)造函數(shù)來創(chuàng)建坚洽，構(gòu)造函數(shù)創(chuàng)建對象我們已經(jīng)會(huì)使用了戈稿，那么如何通過他得知?jiǎng)?chuàng)建對象的類型呢？這里我們提供兩種方式讶舰。
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ù)對象console.log(d.constructor);//打印得到Dog函數(shù)對象if(p.constructor == Person){
console.log(“是Person對象”);
}if(d.constructor == Dog){
console.log(“是Dog對象”);
}
- 使用constructor屬性可以獲取到創(chuàng)建對象使用的構(gòu)造器函數(shù)對象鞍盗，所以我們可以通過判斷構(gòu)造器的類型來得知?jiǎng)?chuàng)建的對象的類型
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)鍵字可以直接用來判斷對象的類型，如果是指定的類型跳昼，返回true般甲，反之返回false。
構(gòu)造函數(shù)的調(diào)用和命名
在學(xué)習(xí)了構(gòu)造函數(shù)之后庐舟，有的同學(xué)對于它和普通函數(shù)的區(qū)別還是不太清楚欣除，這里我們就再對構(gòu)造函數(shù)做一個(gè)說明住拭。
構(gòu)造函數(shù)和普通函數(shù)在定義語法上沒有任何區(qū)別
function 函數(shù)名（參數(shù)列表）{代碼塊挪略；}
為了和普通函數(shù)區(qū)分開，我們約定將構(gòu)造函數(shù)的名稱首字母大寫
構(gòu)造函數(shù)一樣可以直接調(diào)用滔岳，此時(shí)內(nèi)部的this執(zhí)行window杠娱，這種方式不太安全，有可能會(huì)在函數(shù)內(nèi)部修改當(dāng)前的全局變量谱煤，不建議使用摊求，而且這樣做也不能創(chuàng)建對象
想要?jiǎng)?chuàng)建對象，必須使用new和構(gòu)造函數(shù)一起使用
函數(shù)上下文和this指針
在JS編程的過程中發(fā)現(xiàn)刘离，我們大量使用到this關(guān)鍵字室叉，用好了this睹栖，能讓我們的代碼更加優(yōu)雅。
this總是執(zhí)行一個(gè)對象（引用類型）茧痕，但是具體執(zhí)行誰野来，需要根據(jù)我們在哪里使用this有關(guān)。這里主要分為下面幾種情況：
函數(shù)外部
函數(shù)外部的作用域是全局作用域（window）踪旷，所以曼氛，在全局作用域中使用的this指向window
普通函數(shù)內(nèi)部
函數(shù)內(nèi)部的作用域是局部的，屬于調(diào)用當(dāng)前函數(shù)的對象令野，所以this執(zhí)向調(diào)用當(dāng)前函數(shù)的對象
構(gòu)造函數(shù)內(nèi)部
在構(gòu)造函數(shù)中舀患，this直接執(zhí)行當(dāng)前創(chuàng)建出來的新對象
在開發(fā)中，我們也可以使用call或者apply函數(shù)修改this的執(zhí)行气破，這一點(diǎn)我們在后面繼續(xù)說明聊浅。
自定義構(gòu)造函數(shù)存在的問題
自定義構(gòu)造函數(shù)可以解決工廠函數(shù)帶來的對象類型不確定的問題，在開發(fā)中用得非常多堵幽，那么目前我們的自定義構(gòu)造函數(shù)又是否存在問題呢狗超？先來看看下面的對象內(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對象的內(nèi)存結(jié)構(gòu)圖：
可以看出朴下，我們沒創(chuàng)建一個(gè)Person對象努咐，都會(huì)在內(nèi)存中分配如0x22和0x33這樣的內(nèi)存來存儲(chǔ)數(shù)據(jù)，但是通過觀察發(fā)現(xiàn)殴胧，0x33中存儲(chǔ)的是一個(gè)函數(shù)渗稍，而這個(gè)函數(shù)在每個(gè)對象中都是相同
所以從內(nèi)存資源分配考慮，我們無需為每個(gè)對象創(chuàng)建并分配一份新的函數(shù)對象（完全相同）团滥，這種函數(shù)大家最好共享同一份竿屹。
如何實(shí)現(xiàn)多個(gè)對象共享同一份數(shù)據(jù)呢，這就需要使用到原型相關(guān)的知識點(diǎn)了灸姊。
這些就是關(guān)于JavaScript面向?qū)ο蟮膬?nèi)容拱燃，當(dāng)然，這并不是全部力惯，JavaScript還有很多內(nèi)容等待著大家探索碗誉，后面還有很多需要學(xué)習(xí)的地方。如果你感興趣的話父晶，就跟隨我的腳步哮缺，繼續(xù)前進(jìn)！
