文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

代码详解:使用JavaScript进行面向对象编程的指南

2024-12-24 22:04

关注

[[282731]]

对象,即我们相互交流的一个载体,有其属性和方法。对象是面向对象编程的核心,不仅用于JavaScript,而且还适用于Java、C语言、C++等。不再考虑单个变量和函数,而选择自给型的对象。

以下是在讨论面向对象编程(OOP)时最常用到的概念:

1. 对象,属性,方法

1.1 对象字面量(Objectliteral)

在大括号中设置属性,从而在JavaScript中创建一个新对象。对象字面量属性值可以是任何数据类型,如函数字面量、数组、字符串、数字或布尔值。

下面创建一个命名图书的对象,其属性包括作者、出版年份、和方法。

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

对象创建完成后,可以使用点记法获取值。例如,可以使用book.title.获取的值,还可以使用方括号book[‘title’]访问属性。

1.2 对象构造函数(Objectconstructor)

对象构造函数与常规函数相同。每次创建对象时都会用到。可将其与新关键字一起使用。当需要创建具有相同属性和方法的多个对象时,对象构造函数非常有用。

  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.  

如果要创建多个书籍(book)对象,必须为每本书复制代码。可以继续创建 book对象,但这有点麻烦——不过对象构造函数有助于再次使用对象字面量。

  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创建 Book的实例并将其分配给变量。想知道一个对象是否是另一个对象的实例。可以用instanceof。

  1. book1 instanceof Book 
  2.  
  3. true 

1.3 Object.create()方法

JavaScript中的每个对象都将从主对象创建。任何时候使用大写字母“O”时,指的都是主对象。我们可以在console控制台中打印主对象。主对象有很多方法,下面来看object.create()方法。


Object.create()创建法使用现有对象作为原型来创建新对象。基本语法如下:

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

proto是新建对象的原型。 propertiesObject是一个可选项。

下面举个简单的例子:

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

以上的例子创建了一个原始对象book1,并为作者和赋值。可以看到原始对象中的汇总函数:


下面将Object.create() 方法进行详细介绍。

2. 类

类不是对象,它是对象的蓝本,是特殊函数。可以使用函数的表达式和声明来定义函数,也可以这样定义类。蓝本可用来表示对象的数量。

可以使用类的关键字和名称。语法与Java相似。

类语法是使用面向对象编程和管理原型的一个好途径:

  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类语法:

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

类语法是语法糖(syntactical sugar)—而场景背后它仍然使用基于原型的模型。类是函数,而函数是JavaScript中的对象。

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

3. 封装(Encapsulation)

封装意为隐藏信息或数据。指对象在不向外部使用者透露任何执行细节的情况下执行其功能。换句话说,就是其私有变量只对当前函数可见,而对全局范围或其他函数不可访问。

  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. const book1 = new Book('Hippie''Paulo Coelho'); 
  17.  
  18. book1.summary(); 
  19.  
  20. > Hippie written by Paulo Coelho. 

在上面的代码中,和作者只在函数Book 的范围内可见,方法summary对Book的使用者可见。所以书名和作者被封装在Book中。

4. 抽象

抽象意为实现隐藏。它是一种隐藏实现细节的方法,只向使用者显示基本特性。换句话说,它隐藏了不相关的细节,只显示了必须对外部世界显示的。缺乏抽象会导致代码出现可维护性问题。

  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. // Private method 
  15.  
  16. const summary = function() { 
  17.  
  18. return `${title} written by${author}.` 
  19.  
  20. }// Public method that has access toprivate method. 
  21.  
  22. this.giveSummary = function() { 
  23.  
  24. return summary() 
  25.  
  26.  
  27. }const book1 = new Book('Hippie''Paulo Coelho'); 
  28.  
  29. book1.giveTitle(); 
  30.  
  31. "Hippie"book1.summary(); 
  32.  
  33. > Uncaught TypeError: book1.summary is not a 
  34.  
  35. functionbook1.giveSummary(); 
  36.  
  37. "Hippie written by Paulo Coelho." 

5. 复用/继承

JavaScript继承是一种机制,允许我们使用现有的类创建一个新类。也就是子类继承父类的所有属性和行为。

一般来说,JavaScript不是一种基于类的语言。关键字“类”是在ES6中引入的,但它是语法糖,JavaScript仍然是基于原型的。在JavaScript中,继承是通过使用原型来实现的。这种模式称为行为委托模式或原型继承。

同样可以通过book例子来体现:

  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. const book1 = new Book ('Hippie''Paulo Coelho''2018'); 
  16.  
  17. const book2 = newBook ('The Alchemist''Paulo Coelho'
  18.  
  19. '1988'); 

原型继承

对于Book的每个实例,我们都在为基类中的方法重建内存。这些方法必须在所有实例之间共享 — 不应特定于个别实例中。图中的原型是:

  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 的实例有一个原型的副本,能够链接到Book的原型,而Book的原型又链接到Corebook的原型。

6. 多态

在不同的对象上使用同一方法,并让每个对象具有自己的表现形式或形态的能力,称为多态。

  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. var books = [new book1(), new book2(), new book3()]; 
  25.  
  26. books.forEach(function(book){ 
  27.  
  28. console.log(book.summary()); 
  29.  
  30. });> summary of book1 
  31.  
  32. > summary of book2 
  33.  
  34. > summary of book3 

对象之间的关系将由关联、聚合和组合定义。

7. 关联

关联是两个或多个对象之间的关系。每个对象都是独立的。换句话说,关联定义了对象之间的多重性:一对一、一对多、多对一、多对多。

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

book1 赋值于book2的属性多样化,显示对象book1 和 book2之间的关系。两者都可以独立添加和删除。


8. 聚合

聚合是关联的特例。在两个对象之间的关系中,一个对象可能比另一个更重要。换句话说,当一个对象比另一个拥有更多的所有权时,这就是聚合。对象所有者通常称为聚合,被所有者称为组件。聚合又叫“Has-a”关系。

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

book1 和 book2 被添加到对象publication下设的books中。如果在book1和book2 运行之后删除publication,则 Book和 publication 都将独立运行。


9. 组合

组合是聚合的一种特殊情况。一个对象包含另一个对象,并且被包含的对象脱离后无法生存。

  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.  

这里属性publication与 Book 对象有严格的限制,publication不能没有Book对象。如果Book的id被删除,则publication也将被删除。

重组合轻继承

继承指一个对象基于另一个对象的情况。例如,book1继承了、作者和结语等书籍的属性和方法,所以它建立了book1 is-a Book关系。

组合是收集单一对象并将它们组合起来构建更复杂的对象。为构建book1,需要一些方法,比如纸和笔。因此book1 has-a paper and a pen关系随之出现。

  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. return Object.assign({}, 
  25.  
  26. getTitle(data), 
  27.  
  28. getAuthor(data), 
  29.  
  30. getSummary() 
  31.  
  32.  
  33. }let book1 = Book('The Alchemist''Paulo Coelho'); 
  34.  
  35. book1.title(); 
  36.  
  37. "title : The Alchemist" 
来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯