使用JavaScript进行面向对象编程的指南

简介: 使用JavaScript进行面向对象编程的指南
  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() 方法进行详细介绍。

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

可以使用类的关键字和名称。语法与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"

  1. 封装(Encapsulation)

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

constBook = function(t, a) {
let title = t;
let author = a;
return {
summary : function() {
console.log(${title} written by${author}.);
}
}
}
//代码效果参考:http://www.zidongmutanji.com/bxxx/48896.html

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

book1.summary();

Hippie written by Paulo Coelho.

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

  1. 抽象

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

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."

  1. 复用/继承

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

相关文章
|
7月前
|
存储 前端开发 JavaScript
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
|
7月前
|
前端开发 JavaScript 开发者
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
|
7月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
7月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
2月前
|
JavaScript 前端开发 Java
JavaScript中的面向对象编程(OOP) - 终极指南
本文介绍了 JavaScript 的面向对象编程 (OOP) 概念,包括继承、多态、封装和抽象等关键要素,并通过代码示例帮助开发者理解和应用 OOP 思维。
42 5
|
7月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
JavaScript 前端开发 Java
js面向对象编程|24
js面向对象编程|24
|
6月前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
49 2
|
6月前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
59 0
|
7月前
|
JavaScript 前端开发
【JavaScript技术专栏】JavaScript中的面向对象编程
【4月更文挑战第30天】本文介绍了JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法(字面量、构造函数、Object.create()和ES6的class)及继承机制(原型链和ES6的class继承)。面向对象编程通过抽象为对象,实现了代码复用和模块化,提高了程序的可读性和可维护性。
33 0