建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“如何使用JavaScript進(jìn)行面向?qū)ο缶幊獭?，?nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用JavaScript進(jìn)行面向?qū)ο缶幊獭边@篇文章吧。
10多年的墨江網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整墨江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“墨江網(wǎng)站設(shè)計(jì)”,“墨江網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
1. 對(duì)象，屬性，方法
1.1 對(duì)象字面量(Objectliteral)
在大括號(hào)中設(shè)置屬性，從而在JavaScript中創(chuàng)建一個(gè)新對(duì)象。對(duì)象字面量屬性值可以是任何數(shù)據(jù)類型，如函數(shù)字面量、數(shù)組、字符串、數(shù)字或布爾值。
下面創(chuàng)建一個(gè)命名圖書的對(duì)象，其屬性包括作者、出版年份、標(biāo)題和方法。
— summary. constbook = { title: "Hippie", author: "Paulo Coelho", year: "2018" }對(duì)象創(chuàng)建完成后，可以使用點(diǎn)記法獲取值。例如，可以使用book.title.獲取標(biāo)題的值，還可以使用方括號(hào)book[‘title’]訪問屬性。
1.2 對(duì)象構(gòu)造函數(shù)(Objectconstructor)
對(duì)象構(gòu)造函數(shù)與常規(guī)函數(shù)相同。每次創(chuàng)建對(duì)象時(shí)都會(huì)用到?？蓪⑵渑c新關(guān)鍵字一起使用。當(dāng)需要?jiǎng)?chuàng)建具有相同屬性和方法的多個(gè)對(duì)象時(shí)，對(duì)象構(gòu)造函數(shù)非常有用。
constbook = { title: "Hippie", author: "Paulo Coelho", year: "2018" }const book1 = { title: "The Alchemist", author: "Paulo Coelho", year: "1988", }如果要?jiǎng)?chuàng)建多個(gè)書籍(book)對(duì)象，必須為每本書復(fù)制代碼?？梢岳^續(xù)創(chuàng)建 book對(duì)象，但這有點(diǎn)麻煩——不過對(duì)象構(gòu)造函數(shù)有助于再次使用對(duì)象字面量。
functionBook(title, author, year) { this.title = title; this.author = author; this.year = year; }const book1 = new Book ('Hippie', 'Paulo Coelho', '2018'); console.log(book1); > Book { title: "Hippie", author: "Paulo Coelho", year: "2018" }// if we want to create more than onebook just we call function book with new keyword.const book2 = new Book ('TheAlchemist', 'Paulo Coelho', '1988');book1 和 book2創(chuàng)建 Book的實(shí)例并將其分配給變量。想知道一個(gè)對(duì)象是否是另一個(gè)對(duì)象的實(shí)例?？梢杂胕nstanceof。
book1 instanceof Book > true
1.3 Object.create()方法
JavaScript中的每個(gè)對(duì)象都將從主對(duì)象創(chuàng)建。任何時(shí)候使用大寫字母“O”時(shí)，指的都是主對(duì)象。我們可以在console控制臺(tái)中打印主對(duì)象。主對(duì)象有很多方法，下面來看object.create()方法。
![如何使用JavaScript進(jìn)行面向?qū)ο缶幊?><br/></center><p>Object.create()創(chuàng)建法使用現(xiàn)有對(duì)象作為原型來創(chuàng)建新對(duì)象?；菊Z法如下：</p><pre>Object.create(proto,[propertiesObject])</pre><p>proto是新建對(duì)象的原型。 propertiesObject是一個(gè)可選項(xiàng)。</p><p>下面舉個(gè)簡(jiǎn)單的例子：</p><pre>constBook = { summary : function() { console.log(`${this.title} iswritten by ${this.author}.`) } }const book1 = Object.create(Book); book1.author =](/upload/otherpic68/453593.jpg)
Hippie is written by Paulo Coelho.以上的例子創(chuàng)建了一個(gè)原始對(duì)象book1，并為作者和標(biāo)題賦值。可以看到原始對(duì)象中的匯總函數(shù)：
此例使用了ES6類語法：
classBook { constructor(name) { this.name = name } }class newBook extends Book { constructor(name) { super(name); } }const book1 = new newBook("The Alchemist");類語法是語法糖(syntactical sugar)—而場(chǎng)景背后它仍然使用基于原型的模型。類是函數(shù)，而函數(shù)是JavaScript中的對(duì)象。
classBook { constructor(title, author){ this.title = title; this.author = author; } summary() { console.log(`${this.title} writtenby ${this.author}`); } }const book1 = new Book("", ""); console.log(typeof Book); > "function"console.log(typeof book1); > "object"3. 封裝(Encapsulation)
封裝意為隱藏信息或數(shù)據(jù)。指對(duì)象在不向外部使用者透露任何執(zhí)行細(xì)節(jié)的情況下執(zhí)行其功能。換句話說，就是其私有變量只對(duì)當(dāng)前函數(shù)可見，而對(duì)全局范圍或其他函數(shù)不可訪問。
constBook = function(t, a) { let title = t; let author = a; return { summary : function() { console.log(`${title} written by${author}.`); } } } const book1 = new Book('Hippie', 'Paulo Coelho'); book1.summary(); > Hippie written by Paulo Coelho.在上面的代碼中，標(biāo)題和作者只在函數(shù)Book 的范圍內(nèi)可見，方法summary對(duì)Book的使用者可見。所以書名和作者被封裝在Book中。
4. 抽象
抽象意為實(shí)現(xiàn)隱藏。它是一種隱藏實(shí)現(xiàn)細(xì)節(jié)的方法，只向使用者顯示基本特性。換句話說，它隱藏了不相關(guān)的細(xì)節(jié)，只顯示了必須對(duì)外部世界顯示的。缺乏抽象會(huì)導(dǎo)致代碼出現(xiàn)可維護(hù)性問題。
constBook = function(getTitle, getAuthor) { // Private variables / properties let title = getTitle; let author = getAuthor;// Publicmethod this.giveTitle = function() { return title; } // Private method const summary = function() { return `${title} written by${author}.` }// Public method that has access toprivate method. this.giveSummary = function() { return summary() } }const book1 = new Book('Hippie', 'Paulo Coelho'); book1.giveTitle(); > "Hippie"book1.summary(); > Uncaught TypeError: book1.summary is not a functionbook1.giveSummary(); > "Hippie written by Paulo Coelho."5. 復(fù)用/繼承
JavaScript繼承是一種機(jī)制，允許我們使用現(xiàn)有的類創(chuàng)建一個(gè)新類。也就是子類繼承父類的所有屬性和行為。
一般來說，JavaScript不是一種基于類的語言。關(guān)鍵字“類”是在ES6中引入的，但它是語法糖，JavaScript仍然是基于原型的。在JavaScript中，繼承是通過使用原型來實(shí)現(xiàn)的。這種模式稱為行為委托模式或原型繼承。
同樣可以通過book例子來體現(xiàn)：
functionBook(title, author, year) { this.title = title; this.author = author; this.year = year; this.summary = function() { console.log(`${this.title} iswritten by ${this.author}.`) } } const book1 = new Book ('Hippie', 'Paulo Coelho', '2018'); const book2 = newBook ('The Alchemist', 'Paulo Coelho', '1988');原型繼承
對(duì)于Book的每個(gè)實(shí)例，我們都在為基類中的方法重建內(nèi)存。這些方法必須在所有實(shí)例之間共享 — 不應(yīng)特定于個(gè)別實(shí)例中。圖中的原型是：
letCorebook = function(title) { this.title = title }Corebook.prototype.title = function() { console.log(`name of the book is${this.title}`); }Corebook.prototype.summary = function(author) { console.log(`${this.title} is writtenby ${this.author}`); }let Book = function(title, author) { Corebook.call(this, title, author) }Book.prototype = Object.create(Corebook.prototype); let book1 = new Book('TheAlchemist', 'Paulo Coelho');book1.title(); > name of the book is The Alchemistbook1.summary(); > The Alchemist is written by Paulo Coelho在上面的代碼中，Book 的實(shí)例有一個(gè)原型的副本，能夠鏈接到Book的原型，而Book的原型又鏈接到Corebook的原型。
6. 多態(tài)
在不同的對(duì)象上使用同一方法，并讓每個(gè)對(duì)象具有自己的表現(xiàn)形式或形態(tài)的能力，稱為多態(tài)。
letbook1 = function () {} book1.prototype.summary = function() { return "summary of book1" }let book2 = function() {} book2.prototype = Object.create(book1.prototype); book2.prototype.summary = function() { return "summary of book2" }let book3 = function() {} book3.prototype = Object.create(book1.prototype); book3.prototype.summary = function() { return "summary of book3" } var books = [new book1(), new book2(), new book3()]; books.forEach(function(book){ console.log(book.summary()); });> summary of book1 > summary of book2 > summary of book3對(duì)象之間的關(guān)系將由關(guān)聯(lián)、聚合和組合定義。
7. 關(guān)聯(lián)
關(guān)聯(lián)是兩個(gè)或多個(gè)對(duì)象之間的關(guān)系。每個(gè)對(duì)象都是獨(dú)立的。換句話說，關(guān)聯(lián)定義了對(duì)象之間的多重性：一對(duì)一、一對(duì)多、多對(duì)一、多對(duì)多。
functionBook(title, author) { this.title = title; this.author = author; } const book1 = new Book ('Hippie', 'Paulo Coelho'); const book2 = new Book ('TheAlchemist', 'Paulo Coelho'); book2.multiplicity = book1book1 賦值于book2的屬性多樣化，顯示對(duì)象book1 和 book2之間的關(guān)系。兩者都可以獨(dú)立添加和刪除。
book1 和 book2 被添加到對(duì)象publication下設(shè)的books中。如果在book1和book2 運(yùn)行之后刪除publication，則 Book和 publication 都將獨(dú)立運(yùn)行。
這里屬性publication與 Book 對(duì)象有嚴(yán)格的限制，publication不能沒有Book對(duì)象。如果Book的id被刪除，則publication也將被刪除。
重組合輕繼承
繼承指一個(gè)對(duì)象基于另一個(gè)對(duì)象的情況。例如，book1繼承了標(biāo)題、作者和結(jié)語等書籍的屬性和方法，所以它建立了book1 is-a Book關(guān)系。
組合是收集單一對(duì)象并將它們組合起來構(gòu)建更復(fù)雜的對(duì)象。為構(gòu)建book1，需要一些方法，比如紙和筆。因此book1 has-a paper and a pen關(guān)系隨之出現(xiàn)。
constgetTitle = (data) => ({ title : () => console.log(`title :${data.title}`) });const getAuthor = (data) => ({ author : () => console.log(`author:${data.author}`) });const getSummary = () => ({ summary :() => console.log(`booksummary need to update.`) });const Book = (title, author) => { const data = { title, author } return Object.assign({}, getTitle(data), getAuthor(data), getSummary() ) }let book1 = Book('The Alchemist', 'Paulo Coelho'); book1.title(); > "title : The Alchemist"以上是“如何使用JavaScript進(jìn)行面向?qū)ο缶幊獭边@篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：如何使用JavaScript進(jìn)行面向?qū)ο缶幊?
標(biāo)題來源：http://www.dlmjj.cn/article/poepsi.html
