直擊JavaScript之面向?qū)ο?/h1>

發(fā)布時(shí)間：2020-08-08 01:55:38 來源：網(wǎng)絡(luò) 閱讀：136 作者：qq593e097eaab3c 欄目：web開發(fā)

有時(shí)候，我們使用電腦的時(shí)候，并不知道它的原理是什么，但是就是會(huì)使用他，這就是面向?qū)ο蟆Ｍ瑯拥模贘avaScript中也可使用這種原理，接下來就隨我一起探索一下關(guān)于JavaScript面向?qū)ο蟮膬?nèi)容吧。

面向過程和面向?qū)ο缶幊谈攀?br/>面向過程編程就是分析出解決問題的步驟，然后使用函數(shù)把這些步驟一步步實(shí)現(xiàn)，重心放在完成的每個(gè)過程上。
面向?qū)ο髣t是以封裝的思想，將問題分析得到的數(shù)據(jù)封裝成一個(gè)個(gè)的對(duì)象，然后通過對(duì)對(duì)象的操作來完成相應(yīng)的功能。
舉個(gè)栗子：廚師炒菜
以面向過程的思想來分析應(yīng)該分為下面幾個(gè)步驟：
? 1.檢查食材是否齊全 2.如果不不夠，去菜市場(chǎng)買菜 3.洗菜 4.開火 5.按炒菜（按順序放入相應(yīng)的食材，調(diào)料等） 6.出鍋裝盤
以面向?qū)ο蟮乃枷敕治鰟t是這樣的：
? 1.廚師，檢查食材，炒菜 2.采購員，去菜市場(chǎng)買菜 3.墩子，洗菜，切菜，備菜
? 通過調(diào)用上面對(duì)象中的行為方法即可完成炒菜的整個(gè)過程
從上面的例子可以看出，面向?qū)ο蠛兔嫦蜻^程最大的不同在于，面向?qū)ο箨P(guān)心的是由哪些對(duì)象，每個(gè)對(duì)象應(yīng)該有哪些功能，而面向過程關(guān)心的是實(shí)現(xiàn)過程中的每個(gè)步驟。
那么這兩種思想到底孰優(yōu)孰劣呢？從表面上看，貌似面向?qū)ο蟾?，為什么呢？因?yàn)樗耆衔覀兊恼Ｋ季S方式，所以在接受度方面，面向?qū)ο蟮乃枷肟隙ㄊ歉?。但是面向過程也有他的優(yōu)勢(shì)，就是靈活便捷，而面向?qū)ο笙鄬?duì)來說會(huì)更耗資源，更慢一點(diǎn)。
所以，至于以后使用哪一種，這就需要看我們的具體需求，根據(jù)不同的需求做不同的選擇。
面向?qū)ο缶幊痰南嚓P(guān)概念
通過上面的分析，我們知道面向?qū)ο蟮闹攸c(diǎn)在于功能分析和對(duì)象的封裝上，那么最終我們得到的對(duì)象的結(jié)構(gòu)是怎樣的，我們繼續(xù)往下學(xué)習(xí)。
比如，我通過對(duì)人的分析得到，每個(gè)人都有姓名，年齡，性別等屬性，同時(shí)也有吃飯睡覺等行為，那么用JS可以做如下的封裝：
var p = {
name : “xiao song”,
age : 10,
sex : 1,
eat : function () {
console.log(“吃飯”);
},
sleep : function () {
console.log(“睡覺”);
}
}console.log(p.name);//訪問對(duì)象的屬性
p.eat();//訪問對(duì)象的方法
上面的p則表示一個(gè)對(duì)象，其中的name / age / sex稱之為對(duì)象的屬性，eat / sleep 稱之為對(duì)象的方法，我們通過訪問該對(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") 訪問元素的屬性：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

使用constructor屬性可以獲取到創(chuàng)建對(duì)象使用的構(gòu)造器函數(shù)對(duì)象，所以我們可以通過判斷構(gòu)造器的類型來得知?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)鍵字可以直接用來判斷對(duì)象的類型，如果是指定的類型，返回true，反之返回false。
構(gòu)造函數(shù)的調(diào)用和命名
在學(xué)習(xí)了構(gòu)造函數(shù)之后，有的同學(xué)對(duì)于它和普通函數(shù)的區(qū)別還是不太清楚，這里我們就再對(duì)構(gòu)造函數(shù)做一個(gè)說明。

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

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

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

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編程的過程中發(fā)現(xiàn)，我們大量使用到this關(guān)鍵字，用好了this，能讓我們的代碼更加優(yōu)雅。
   this總是執(zhí)行一個(gè)對(duì)象（引用類型），但是具體執(zhí)行誰，需要根據(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)建出來的新對(duì)象
在開發(fā)中，我們也可以使用call或者apply函數(shù)修改this的執(zhí)行，這一點(diǎn)我們?cè)诤竺胬^續(xù)說明。
自定義構(gòu)造函數(shù)存在的問題
自定義構(gòu)造函數(shù)可以解決工廠函數(shù)帶來的對(duì)象類型不確定的問題，在開發(fā)中用得非常多，那么目前我們的自定義構(gòu)造函數(shù)又是否存在問題呢？先來看看下面的對(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問一下細(xì)節(jié)