聚焦JavaScript面向?qū)ο蟮乃枷?/h1>

發(fā)布時(shí)間：2020-07-09 23:01:51 來(lái)源：網(wǎng)絡(luò) 閱讀：183 作者：qq593e097eaab3c 欄目：web開(kāi)發(fā)

面向?qū)ο笫且环N軟件開(kāi)發(fā)方法，是一種對(duì)現(xiàn)實(shí)世界理解和抽象的方法，是計(jì)算機(jī)編程技術(shù)發(fā)展到一定階段后的產(chǎn)物。隨著時(shí)代的發(fā)展，計(jì)算機(jī)被用于解決越來(lái)越復(fù)雜的問(wèn)題。一切事物皆對(duì)象，通過(guò)面向?qū)ο蟮姆绞?，將現(xiàn)實(shí)世界的事物抽象成對(duì)象。通過(guò)面向?qū)ο蟮姆椒?，更利于用人理解的方式?duì)復(fù)雜系統(tǒng)進(jìn)行分析、設(shè)計(jì)與編程，今天我們就來(lái)學(xué)習(xí)一下JavaScript面向?qū)ο蟮乃枷搿?/p>

面向過(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)買(mǎi)菜 3.洗菜 4.開(kāi)火 5.按炒菜（按順序放入相應(yīng)的食材，調(diào)料等） 6.出鍋裝盤(pán)
以面向?qū)ο蟮乃枷敕治鰟t是這樣的：
? 1.廚師，檢查食材，炒菜 2.采購(gòu)員，去菜市場(chǎng)買(mǎi)菜 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

使用constructor屬性可以獲取到創(chuàng)建對(duì)象使用的構(gòu)造器函數(shù)對(duì)象，所以我們可以通過(guò)判斷構(gòu)造器的類型來(lái)得知?jiǎng)?chuàng)建的對(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ō)明。

1. 構(gòu)造函數(shù)和普通函數(shù)在定義語(yǔ)法上沒(méi)有任何區(qū)別

2. function 函數(shù)名（參數(shù)列表）{代碼塊；}

4. 為了和普通函數(shù)區(qū)分開(kāi)，我們約定將構(gòu)造函數(shù)的名稱首字母大寫(xiě)

6. 構(gòu)造函數(shù)一樣可以直接調(diào)用，此時(shí)內(nèi)部的this執(zhí)行window，這種方式不安全，有可能會(huì)在函數(shù)內(nèi)部修改當(dāng)前的全局變量，不建議使用，而且這樣做也不能創(chuàng)建對(duì)象

8. 想要?jiǎng)?chuàng)建對(duì)象，必須使用new和構(gòu)造函數(shù)一起使用

9. 函數(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)圖：
向AI問(wèn)一下細(xì)節(jié)