Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >代码详解:使用JavaScript进行面向对象编程的指南

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

作者头像
木禾wen
修改于 2019-11-19 09:31:46
修改于 2019-11-19 09:31:46
8050
举报
文章被收录于专栏:信息化运维信息化运维

一切都从对象开始。

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

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

· 对象,属性,方法

· 类

· 封装

· 抽象

· 复用/继承

· 多态性

· 关联

· 聚合

· 组合

1. 对象,属性,方法

1.1 对象字面量(Objectliteral)

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

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

— summary.

constbook = {

title: "Hippie",

author: "Paulo Coelho",

year: "2018"

}

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

1.2 对象构造函数(Objectconstructor)

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

constbook = {

title: "Hippie",

author: "Paulo Coelho",

year: "2018"

}const book1 = {

title: "The Alchemist",

author: "Paulo Coelho",

year: "1988",

}

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

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

> true

1.3 Object.create()方法

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

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

Object.create(proto,[propertiesObject])

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

下面举个简单的例子:

constBook = {

summary : function() {

console.log(`${this.title} iswritten by ${this.author}.`)

}

}const book1 = Object.create(Book);

book1.author = "Paulo Coelho";

book1.title = "Hippie";console.log(book1.summary());

> Hippie is written by Paulo Coelho.

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

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

2. 类

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

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

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

let Book= function(name) {

this.name = name

}let newBook = function(name) {

Book.call(this, name)

} newBook.prototype = Object.create(Book.prototype);

const book1 = new newBook("The Alchemist");

此例使用了ES6类语法:

classBook {

constructor(name) {

this.name = name

}

}class newBook extends Book {

constructor(name) {

super(name);

}

}const book1 = new newBook("The Alchemist");

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

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)

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

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.

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

4. 抽象

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

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. 复用/继承

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

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

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

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');

原型继承

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

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

6. 多态

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

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

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

7. 关联

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

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

= book1

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

8. 聚合

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

functionBook(title, author) {

this.title = title;

this.author = author;

}

const book1 = new Book ('Hippie', 'Paulo Coelho');

const book2 = new Book ('TheAlchemist', 'Paulo Coelho');

let publication = {

"name": "new publicationInc",

"books": []

}publication.books.push(book1);

publication.books.push(book2);

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

9. 组合

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

let Book= {

"title": "TheAlchemist",

"author": "PauloCoelho",

"publication": {

"name": "newpublication Inc",

"address":"chennai"

}

}

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

重组合轻继承

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

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

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,

autho

}

return Object.assign({},

getTitle(data),

getAuthor(data),

getSummary()

)

}let book1 = Book('The Alchemist', 'Paulo Coelho');

book1.title();

> "title : The Alchemist"

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
万字长文深度剖析面向对象的javascript
本将会深入讲解面向对象在javascript中的应用,并详细介绍三种对象的生成方式:构造函数,原型链,类。
程序那些事
2020/12/14
3660
【译】理解JavaScript中的This,Bind,Call和Apply
this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中,this是一个对象的引用。this指向的对象可以是基于全局的,在对象上的,或者在构造函数中隐式更改的,当然也可以根据Function原型方法的bind,call和apply使用显示更改的。
Jimmy_is_jimmy
2019/11/14
8560
GraphQL入门之一对多关联查询
kongxx
2024/03/20
2630
JavaScript 高级程序设计(第 4 版)- 对象、类与面向对象编程
通过字面量来重写原型时,Person.prototype被设置为等于一个通过对象字面量创建的新对象,此时Person.prototype的constructor属性就不指向Person了
Cellinlab
2023/05/17
6930
JavaScript 高级程序设计(第 4 版)- 对象、类与面向对象编程
javaScript 的面向对象程序
数据属性(数据属性包含一个数据值的位置,这个位置可以读取和写入值,数据属性有4描述)
用户1197315
2019/12/30
1.2K0
深入理解JavaScript面向对象的程序设计(一)——对象的创建
类似Java等面向对象语言中创建对象的语法,在 JavaScript中可以通过执行 new操作符后跟要创建的对象类型的名称来创建。JavaScript中通过如下方式可以创建一个Object对象:
CherishTheYouth
2020/11/12
4630
深入理解JavaScript面向对象的程序设计(一)——对象的创建
JavaScript权威指南 - 对象
JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删。 JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。 JavaScript对象除了可以保持自有的属性外,还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式集成”是JavaScript的的核心特征。
Esofar
2018/09/05
1.2K0
面向对象编程
面向对象把构成问题的transaction分解成各个对象,而建立对象的目的也不是为了完成一个个步骤,而是为了描述某个事物在解决整个问题的过程中所发生的行为,意在写出通用代码,加强代码重用,屏蔽差异性。
子舒
2022/06/09
7370
面向对象编程
面向对象编程
面向对象对每一个程序员来说,非常熟悉,在C语言里,我们说它是面向过程,在java中我们熟悉的面向对象三大特征中封装、继承、多态,java是高级语言,在BS架构中,后端语言用java等语言运行在服务器上,而在离用户端最近的B端,js中也有面相对象。
Maic
2022/07/28
6630
面向对象编程
JavaScript面向对象精要(二)
构造函数就是用new创建对象时调用的函数。使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。
奋飛
2019/08/15
4640
JavaScript 面向对象
创建函数 Foo 的时候,就会有一个内置的 Foo.prototype 属性,并且这个属性是对象。
零式的天空
2022/03/02
2960
JavaScript入门笔记(6)标准对象面向对象编程
标准对象 正则对象 正则表达式是一种处理文本信息的神器,在JavaScript中可以方便的使用正则对象对文本进行处理。JavaScript中声明正则对象可以使用var name = /.../和var name = new RegExp("..."),第二种方法个人是不推荐的,要处理一系列的文本转义,正则表达式定以后可以使用.test()方法检验是否有匹配和.exec()方法分组 var re_test = /\w+@\w+\.\w+/ console.log(re_test) ///\w+@\w+\.\w
月见樽
2018/04/27
7950
详解JavaScript的Object对象
Object 是 JavaScript 的一种 数据类型 ,用于存储各种键值集合和更复杂的实体,几乎所有对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法,虽然大部分属性都会被覆盖(shadowed)或者说被重写了(overridden)。
Learn-anything.cn
2021/12/22
7120
【Python】教你彻底认识Python中的面向对象编程
面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它通过“对象”将数据和方法进行封装,以提高代码的可重用性和可维护性。Python是一种多范式的编程语言,它不仅支持面向过程编程,也支持面向对象编程。在这篇文章中,我们将深入探讨Python中的面向对象编程,包括其基本概念、类和对象的创建、继承、多态,以及一些实际应用示例。
E绵绵
2025/05/25
1580
【说站】JavaScript快速学习设计模式
设计模式是任何优秀软件的基础,JavaScript 也不例外,学习设计模式,对代码组织多一些思路,通过代码片段来学习编码思路对于开发者来说是比较容易理解的,本文继续通过代码片段简单展示常见的设计模式,但不深入设计模式本身。
很酷的站长
2022/11/24
1900
【说站】JavaScript快速学习设计模式
JavaScript设计模式总汇
来源 | http://www.fly63.com/article/detial/10063
前端达人
2021/01/27
6140
JavaScript设计模式总汇
JS面向对象编程
通过instanceof来判断当前的的对象是否是实例化出来的,如果是实例化出来的this指向实例化出来的对象,也就是这里的Person,否则作为普通函数来说当前的this指向window
小丞同学
2021/08/16
4.2K0
JavaScript 面向对象继承详解
由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,一般都是基于原型链的方式;
书童小二
2018/09/03
5410
JavaScript 面向对象继承详解
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
探索JavaScript面向对象编程的魅力与用途
在前端开发中,JavaScript是一门非常重要的语言。它不仅可以用于实现交互和动态效果,还可以通过面向对象编程的方式构建复杂的应用程序。本文将深入探索JavaScript面向对象编程的魅力和用途,帮助读者更好地理解和应用该编程思维方式。
李才哥
2023/06/23
2070
探索JavaScript面向对象编程的魅力与用途
推荐阅读
相关推荐
万字长文深度剖析面向对象的javascript
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档