偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

代碼詳解：使用JavaScript進(jìn)行面向?qū)ο缶幊痰闹改?/h1>

作者：讀芯術(shù)
開(kāi)發(fā) 前端
一切都從對(duì)象開(kāi)始。對(duì)象，即我們相互交流的一個(gè)載體，有其屬性和方法。對(duì)象是面向?qū)ο缶幊痰暮诵模粌H用于JavaScript，而且還適用于Java、C語(yǔ)言、C++等。不再考慮單個(gè)變量和函數(shù)，而選擇自給型的對(duì)象

 一切都從對(duì)象開(kāi)始。

[[282731]]

對(duì)象，即我們相互交流的一個(gè)載體，有其屬性和方法。對(duì)象是面向?qū)ο缶幊痰暮诵模粌H用于JavaScript，而且還適用于Java、C語(yǔ)言、C++等。不再考慮單個(gè)變量和函數(shù)，而選擇自給型的對(duì)象。

以下是在討論面向?qū)ο缶幊?OOP)時(shí)最常用到的概念：

  • 對(duì)象，屬性，方法
  • 類
  • 封裝
  • 抽象
  • 復(fù)用/繼承
  • 多態(tài)性
  • 關(guān)聯(lián)
  • 聚合
  • 組合

1. 對(duì)象，屬性，方法

1.1 對(duì)象字面量(Objectliteral)

在大括號(hào)中設(shè)置屬性，從而在JavaScript中創(chuàng)建一個(gè)新對(duì)象。對(duì)象字面量屬性值可以是任何數(shù)據(jù)類型，如函數(shù)字面量、數(shù)組、字符串、數(shù)字或布爾值。

下面創(chuàng)建一個(gè)命名圖書(shū)的對(duì)象，其屬性包括作者、出版年份、標(biāo)題和方法。

  1. — summary. 
  2.  
  3. constbook = { 
  4. title: "Hippie", 
  5. author: "Paulo Coelho", 
  6. year: "2018" 
  7. } 

對(duì)象創(chuàng)建完成后，可以使用點(diǎn)記法獲取值。例如，可以使用book.title.獲取標(biāo)題的值，還可以使用方括號(hào)book[‘title’]訪問(wèn)屬性。

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ù)非常有用。

  1. constbook = { 
  2.  
  3. title: "Hippie", 
  4.  
  5. author: "Paulo Coelho", 
  6.  
  7. year: "2018" 
  8.  
  9. }const book1 = { 
  10.  
  11. title: "The Alchemist", 
  12.  
  13. author: "Paulo Coelho", 
  14.  
  15. year: "1988", 
  16.  
  17. } 

如果要?jiǎng)?chuàng)建多個(gè)書(shū)籍(book)對(duì)象，必須為每本書(shū)復(fù)制代碼?？梢岳^續(xù)創(chuàng)建 book對(duì)象，但這有點(diǎn)麻煩——不過(guò)對(duì)象構(gòu)造函數(shù)有助于再次使用對(duì)象字面量。

  1. functionBook(title, author, year) { 
  2.  
  3. this.title = title; 
  4.  
  5. this.author = author; 
  6.  
  7. this.year = year; 
  8.  
  9. }const book1 = new Book ('Hippie', 'Paulo Coelho', 
  10.  
  11. '2018'); 
  12.  
  13. console.log(book1); 
  14.  
  15. > Book { 
  16.  
  17. title: "Hippie", 
  18.  
  19. author: "Paulo Coelho", 
  20.  
  21. year: "2018" 
  22.  
  23. }// if we want to create more than onebook just we call 
  24.  
  25. function book with new keyword.const book2 
  26.  
  27. = new Book ('TheAlchemist', 'Paulo Coelho', '1988'); 

book1 和 book2創(chuàng)建 Book的實(shí)例并將其分配給變量。想知道一個(gè)對(duì)象是否是另一個(gè)對(duì)象的實(shí)例?？梢杂胕nstanceof。

  1. book1 instanceof Book 
  2.  
  3. > true 

1.3 Object.create()方法

JavaScript中的每個(gè)對(duì)象都將從主對(duì)象創(chuàng)建。任何時(shí)候使用大寫(xiě)字母“O”時(shí)，指的都是主對(duì)象。我們可以在console控制臺(tái)中打印主對(duì)象。主對(duì)象有很多方法，下面來(lái)看object.create()方法。

代碼詳解：使用JavaScript進(jìn)行面向?qū)ο缶幊痰闹改? src=

Object.create()創(chuàng)建法使用現(xiàn)有對(duì)象作為原型來(lái)創(chuàng)建新對(duì)象?；菊Z(yǔ)法如下：

  1. Object.create(proto,[propertiesObject]) 

proto是新建對(duì)象的原型。 propertiesObject是一個(gè)可選項(xiàng)。

下面舉個(gè)簡(jiǎn)單的例子：

  1. constBook = { 
  2.  
  3. summary : function() { 
  4.  
  5. console.log(`${this.title} iswritten by ${this.author}.`) 
  6.  
  7. } 
  8.  
  9. }const book1 = Object.create(Book); 
  10.  
  11. book1.author = "Paulo Coelho"; 
  12.  
  13. book1.title = "Hippie";console.log(book1.summary()); 
  14.  
  15. > Hippie is written by Paulo Coelho. 

以上的例子創(chuàng)建了一個(gè)原始對(duì)象book1，并為作者和標(biāo)題賦值?？梢钥吹皆紝?duì)象中的匯總函數(shù)：

代碼詳解：使用JavaScript進(jìn)行面向?qū)ο缶幊痰闹改? src=

下面將Object.create() 方法進(jìn)行詳細(xì)介紹。

2. 類

類不是對(duì)象，它是對(duì)象的藍(lán)本，是特殊函數(shù)?？梢允褂煤瘮?shù)的表達(dá)式和聲明來(lái)定義函數(shù)，也可以這樣定義類。藍(lán)本可用來(lái)表示對(duì)象的數(shù)量。

可以使用類的關(guān)鍵字和名稱。語(yǔ)法與Java相似。

類語(yǔ)法是使用面向?qū)ο缶幊毯凸芾碓偷囊粋€(gè)好途徑：

  1. let Book= function(name) { 
  2.  
  3. this.name = name 
  4.  
  5. }let newBook = function(name) { 
  6.  
  7. Book.call(this, name) 
  8.  
  9. } newBook.prototype = Object.create(Book.prototype); 
  10.  
  11. const book1 = new newBook("The Alchemist"); 

此例使用了ES6類語(yǔ)法：

  1. classBook { 
  2.  
  3. constructor(name) { 
  4.  
  5. this.name = name 
  6.  
  7. } 
  8.  
  9. }class newBook extends Book { 
  10.  
  11. constructor(name) { 
  12.  
  13. super(name); 
  14.  
  15. } 
  16.  
  17. }const book1 = new newBook("The Alchemist"); 

類語(yǔ)法是語(yǔ)法糖(syntactical sugar)—而場(chǎng)景背后它仍然使用基于原型的模型。類是函數(shù)，而函數(shù)是JavaScript中的對(duì)象。

  1. classBook { 
  2.  
  3. constructor(title, author){ 
  4.  
  5. this.title = title; 
  6.  
  7. this.author = author; 
  8.  
  9. } 
  10.  
  11. summary() { 
  12.  
  13. console.log(`${this.title} writtenby ${this.author}`); 
  14.  
  15. } 
  16.  
  17. }const book1 = new Book("", ""); 
  18.  
  19. console.log(typeof Book); 
  20.  
  21. > "function"console.log(typeof book1); 
  22.  
  23. > "object" 

3. 封裝(Encapsulation)

封裝意為隱藏信息或數(shù)據(jù)。指對(duì)象在不向外部使用者透露任何執(zhí)行細(xì)節(jié)的情況下執(zhí)行其功能。換句話說(shuō)，就是其私有變量只對(duì)當(dāng)前函數(shù)可見(jiàn)，而對(duì)全局范圍或其他函數(shù)不可訪問(wèn)。

  1. constBook = function(t, a) { 
  2.  
  3. let title = t; 
  4.  
  5. let author = a; 
  6.  
  7. return { 
  8.  
  9. summary : function() { 
  10.  
  11. console.log(`${title} written by${author}.`); 
  12.  
  13. } 
  14.  
  15. } 
  16.  
  17. } 
  18.  
  19. const book1 = new Book('Hippie', 'Paulo Coelho'); 
  20.  
  21. book1.summary(); 
  22.  
  23. > Hippie written by Paulo Coelho. 

在上面的代碼中，標(biāo)題和作者只在函數(shù)Book 的范圍內(nèi)可見(jiàn)，方法summary對(duì)Book的使用者可見(jiàn)。所以書(shū)名和作者被封裝在Book中。

4. 抽象

抽象意為實(shí)現(xiàn)隱藏。它是一種隱藏實(shí)現(xiàn)細(xì)節(jié)的方法，只向使用者顯示基本特性。換句話說(shuō)，它隱藏了不相關(guān)的細(xì)節(jié)，只顯示了必須對(duì)外部世界顯示的。缺乏抽象會(huì)導(dǎo)致代碼出現(xiàn)可維護(hù)性問(wèn)題。

  1. constBook = function(getTitle, getAuthor) { 
  2.  
  3. // Private variables / properties 
  4.  
  5. let title = getTitle; 
  6.  
  7. let author = getAuthor;// Publicmethod 
  8.  
  9. this.giveTitle = function() { 
  10.  
  11. return title; 
  12.  
  13. } 
  14.  
  15. // Private method 
  16.  
  17. const summary = function() { 
  18.  
  19. return `${title} written by${author}.` 
  20.  
  21. }// Public method that has access toprivate method. 
  22.  
  23. this.giveSummary = function() { 
  24.  
  25. return summary() 
  26.  
  27. } 
  28.  
  29. }const book1 = new Book('Hippie', 'Paulo Coelho'); 
  30.  
  31. book1.giveTitle(); 
  32.  
  33. > "Hippie"book1.summary(); 
  34.  
  35. > Uncaught TypeError: book1.summary is not a 
  36.  
  37. functionbook1.giveSummary(); 
  38.  
  39. > "Hippie written by Paulo Coelho." 

5. 復(fù)用/繼承

JavaScript繼承是一種機(jī)制，允許我們使用現(xiàn)有的類創(chuàng)建一個(gè)新類。也就是子類繼承父類的所有屬性和行為。

一般來(lái)說(shuō)，JavaScript不是一種基于類的語(yǔ)言。關(guān)鍵字“類”是在ES6中引入的，但它是語(yǔ)法糖，JavaScript仍然是基于原型的。在JavaScript中，繼承是通過(guò)使用原型來(lái)實(shí)現(xiàn)的。這種模式稱為行為委托模式或原型繼承。

同樣可以通過(guò)book例子來(lái)體現(xiàn)：

  1. functionBook(title, author, year) { 
  2.  
  3. this.title = title; 
  4.  
  5. this.author = author; 
  6.  
  7. this.year = year; 
  8.  
  9. this.summary = function() { 
  10.  
  11. console.log(`${this.title} iswritten by ${this.author}.`) 
  12.  
  13. } 
  14.  
  15. } 
  16.  
  17. const book1 = new Book ('Hippie', 'Paulo Coelho', '2018'); 
  18.  
  19. const book2 = newBook ('The Alchemist', 'Paulo Coelho', 
  20.  
  21. '1988'); 

原型繼承

對(duì)于Book的每個(gè)實(shí)例，我們都在為基類中的方法重建內(nèi)存。這些方法必須在所有實(shí)例之間共享 — 不應(yīng)特定于個(gè)別實(shí)例中。圖中的原型是：

  1. letCorebook = function(title) { 
  2.  
  3. this.title = title 
  4.  
  5. }Corebook.prototype.title = function() { 
  6.  
  7. console.log(`name of the book is${this.title}`); 
  8.  
  9. }Corebook.prototype.summary = function(author) { 
  10.  
  11. console.log(`${this.title} is writtenby ${this.author}`); 
  12.  
  13. }let Book = function(title, author) { 
  14.  
  15. Corebook.call(this, title, author) 
  16.  
  17. }Book.prototype = Object.create(Corebook.prototype); 
  18.  
  19. let book1 
  20.  
  21. = new Book('TheAlchemist', 'Paulo Coelho');book1.title(); 
  22.  
  23. > name of the book is The Alchemistbook1.summary(); 
  24.  
  25. > The Alchemist is written by Paulo Coelho 

在上面的代碼中，Book 的實(shí)例有一個(gè)原型的副本，能夠鏈接到Book的原型，而B(niǎo)ook的原型又鏈接到Corebook的原型。

6. 多態(tài)

在不同的對(duì)象上使用同一方法，并讓每個(gè)對(duì)象具有自己的表現(xiàn)形式或形態(tài)的能力，稱為多態(tài)。

  1. letbook1 = function () {} 
  2.  
  3. book1.prototype.summary = function() { 
  4.  
  5. return "summary of book1" 
  6.  
  7. }let book2 = function() {} 
  8.  
  9. book2.prototype = Object.create(book1.prototype); 
  10.  
  11. book2.prototype.summary = function() { 
  12.  
  13. return "summary of book2" 
  14.  
  15. }let book3 = function() {} 
  16.  
  17. book3.prototype = Object.create(book1.prototype); 
  18.  
  19. book3.prototype.summary = function() { 
  20.  
  21. return "summary of book3" 
  22.  
  23. } 
  24.  
  25. var books = [new book1(), new book2(), new book3()]; 
  26.  
  27. books.forEach(function(book){ 
  28.  
  29. console.log(book.summary()); 
  30.  
  31. });> summary of book1 
  32.  
  33. > summary of book2 
  34.  
  35. > 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ú)立的。換句話說(shuō)，關(guān)聯(lián)定義了對(duì)象之間的多重性：一對(duì)一、一對(duì)多、多對(duì)一、多對(duì)多。

  1. functionBook(title, author) { 
  2.  
  3. this.title = title; 
  4.  
  5. this.author = author; 
  6.  
  7. } 
  8.  
  9. const book1 = new Book ('Hippie', 'Paulo Coelho'); 
  10.  
  11. const book2 = new Book ('TheAlchemist', 
  12.  
  13. 'Paulo Coelho'); 
  14.  
  15. book2.multiplicity 
  16.  
  17. = book1 

book1 賦值于book2的屬性多樣化，顯示對(duì)象book1 和 book2之間的關(guān)系。兩者都可以獨(dú)立添加和刪除。

代碼詳解：使用JavaScript進(jìn)行面向?qū)ο缶幊痰闹改? src=

8. 聚合

聚合是關(guān)聯(lián)的特例。在兩個(gè)對(duì)象之間的關(guān)系中，一個(gè)對(duì)象可能比另一個(gè)更重要。換句話說(shuō)，當(dāng)一個(gè)對(duì)象比另一個(gè)擁有更多的所有權(quán)時(shí)，這就是聚合。對(duì)象所有者通常稱為聚合，被所有者稱為組件。聚合又叫“Has-a”關(guān)系。

  1. functionBook(title, author) { 
  2.  
  3. this.title = title; 
  4.  
  5. this.author = author; 
  6.  
  7. } 
  8.  
  9. const book1 = new Book ('Hippie', 'Paulo Coelho'); 
  10.  
  11. const book2 = new Book ('TheAlchemist', 'Paulo Coelho'); 
  12.  
  13. let publication = { 
  14.  
  15. "name": "new publicationInc", 
  16.  
  17. "books": [] 
  18.  
  19. }publication.books.push(book1); 
  20.  
  21. publication.books.push(book2); 

book1 和 book2 被添加到對(duì)象publication下設(shè)的books中。如果在book1和book2 運(yùn)行之后刪除publication，則 Book和 publication 都將獨(dú)立運(yùn)行。

代碼詳解：使用JavaScript進(jìn)行面向?qū)ο缶幊痰闹改? src=

9. 組合

組合是聚合的一種特殊情況。一個(gè)對(duì)象包含另一個(gè)對(duì)象，并且被包含的對(duì)象脫離后無(wú)法生存。

  1. let Book= { 
  2.  
  3. "title": "TheAlchemist", 
  4.  
  5. "author": "PauloCoelho", 
  6.  
  7. "publication": { 
  8.  
  9. "name": "newpublication Inc", 
  10.  
  11. "address":"chennai" 
  12.  
  13. } 
  14.  
  15. } 

這里屬性publication與 Book 對(duì)象有嚴(yán)格的限制，publication不能沒(méi)有Book對(duì)象。如果Book的id被刪除，則publication也將被刪除。

重組合輕繼承

繼承指一個(gè)對(duì)象基于另一個(gè)對(duì)象的情況。例如，book1繼承了標(biāo)題、作者和結(jié)語(yǔ)等書(shū)籍的屬性和方法，所以它建立了book1 is-a Book關(guān)系。

組合是收集單一對(duì)象并將它們組合起來(lái)構(gòu)建更復(fù)雜的對(duì)象。為構(gòu)建book1，需要一些方法，比如紙和筆。因此book1 has-a paper and a pen關(guān)系隨之出現(xiàn)。

  1. constgetTitle = (data) => ({ 
  2.  
  3. title : () => console.log(`title :${data.title}`) 
  4.  
  5. });const getAuthor = (data) => ({ 
  6.  
  7. author : () => console.log(`author:${data.author}`) 
  8.  
  9. });const getSummary = () => ({ 
  10.  
  11. summary :() => console.log(`booksummary need to 
  12.  
  13. update.`) 
  14.  
  15. });const Book = (title, author) => { 
  16.  
  17. const data = { 
  18.  
  19. title, 
  20.  
  21. author 
  22.  
  23. } 
  24.  
  25. return Object.assign({}, 
  26.  
  27. getTitle(data), 
  28.  
  29. getAuthor(data), 
  30.  
  31. getSummary() 
  32.  
  33. ) 
  34.  
  35. }let book1 = Book('The Alchemist', 'Paulo Coelho'); 
  36.  
  37. book1.title(); 
  38.  
  39. > "title : The Alchemist" 
責(zé)任編輯：華軒 來(lái)源： 今日頭條
JavaScript面向?qū)ο蟪绦蚓幊?/a>Java
相關(guān)推薦

2012-01-17 09:34:52

JavaScript

2017-04-21 09:07:39

JavaScript對(duì)象編程

2010-11-17 11:31:22

Scala基礎(chǔ)面向?qū)ο?/a>Scala

2012-02-27 09:30:22

JavaScript

2023-12-11 15:32:30

面向?qū)ο缶幊?/a>OOPpython

2023-02-22 18:06:35

函數(shù)javascript面向?qū)ο缶幊?/a>

2011-05-25 10:21:44

Javascript

2011-05-25 10:59:26

Javascript繼承

2012-03-19 09:24:25

JavaScript

2011-05-25 11:15:02

Javascript繼承

2010-10-08 09:13:15

oop模式JavaScript

2011-06-28 14:11:33

JavaScript

2011-06-17 17:27:29

Objective-CCocoa蘋(píng)果

2021-10-21 18:47:37

JavaScript面向對(duì)象

2017-01-12 14:55:50

JavaScript編程

2011-08-04 11:04:14

Objective-C 面向?qū)ο? 繼承

2022-07-30 23:41:53

面向過(guò)程面向?qū)ο?/a>面向協(xié)議編程

2012-12-13 11:01:42

IBMdW

2010-07-20 09:33:14

Perl方法

2009-08-07 10:20:38

WebSphere A
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)