JavaScript的面向对象的理解

JavaScript的面向对象的理解

最佳答案 53678位专家为你答疑解惑

JavaScript的面向对象的理解

0.前言

以前和大家分享的都是JavaScript的基础，现在就和大家分享的是比较有难度的知识点——对象。注意啊各位广大单身狗们，你们的福利来了，没有对象的人，现在可以“new”出来一个了。嘻嘻(o)/~

1.面向对象编程思想简介

不管是学习何种语言，都会学习到面向对象，当然c语言是面向过程的，这无疑加大了程序员的工作量，而且不利于维护。但是面向对象，则显得方便快捷，大大提高了程序员的工作效率。那么JavaScript的面向对象有事如何呢？我们一起来了解一下。

（1）什么是面向对象？

①把数据及对数据的操作方法放在一起，作为一个相互依存的整体——对象。②对同类对象抽象出其共性，形成类。③类中的大多数数据，只能用本类的方法进行处理。④类通过一个简单的外部接口与外界发生关系，对象与对象之间通过消息进行通信。⑤程序流程由用户在使用中决定。

（2）理解面向对象

①面向对象是相对面向过程而言②面向对象和面向过程都是一种思想③面向过程??强调的是功能行为??关注的是解决问题需要哪些步骤④面向对象??将功能封装进对象，强调具备了功能的对象??关注的是解决问题需要哪些对象⑤面向对象是基于面向过程的。

（3）面向对象的四大特性

多态性、 继承性、 抽象性、 封装性

（4）软件编程的实质

软件编程就是将我们的思维转变成计算机能够识别语言的一个过程。注意：面试的过程可能会被提到哦！！！

案例如图

捕获.PNG??从图中我们可以看到，要实现把大象关冰箱用面向过程和面向对象两种思想的事项方法。面向过程：如果用面向过程的方法实现的话，就是“自己”，注意是“自己”去把冰箱门打开，然后“自己”把大象装进冰箱，最后还是“自己”把把冰箱门关上。从始至终都是自己一个完成的。面向对象：就是“自己”去找一个人，注意是“去找一个人”让它去把冰箱门打开、把大象装进冰箱、把冰箱门关上。从始至终都是“自己”去命令别人去做的，自己没有动手完成。至于这个人是怎么完成的我们不用去关心，只要你能找到能把大象关进冰箱的这个人就行了。这就是面向对象的思想。可以总结出：面向过程时“自己”是执行者，面向对象时“自己”是指挥者。（5）面向的对象的特点

①是一种符合人们思考习惯的思想②可以将复杂的事情简单化③将程序员从执行者转换成了指挥者④完成需求时：??先要去找具有所需的功能的对象来用。??如果该对象不存在，那么创建一个具有所需功能的对象。

（6）JS中的面向对象（重点）

（1）Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类），注意是基于对象的语言，是一种弱类型语言（2）对象：属性与方法的集合

2.字面量方式创建对象并访问属性和方法

属性：是一个字符串。方法：是一个功能或者方法或者函数。（1）字面量法创建对象，空对象

var obj1={};console.log(obj1);console.log(typeof obj1);

结果：

捕获.PNG（2）字面量法创建对象，非空对象

var girlFriend={            //添加属性            //冒号左侧是属性名   冒号右侧是对应的属性值            name: "铁锤妹妹",            // "name": "二雷",            // 'name': "二雷",            // 以上写法都是可以的，一般我们不建议给属性名加引号。但是以下几种情况必须加引号            // 1、当属性名是JS中的保留字时必须加引号            // 2、当属性名中存在空格或者其他特殊字符串时必须加引号            // 3、当属性民以数字开头时必须加引号                        // "good man": 100,            // "%^&!": "no zuo no die",            // "1abc": "sha",                        height: 165,            weight:55,            age: 25,            //行为            eat: function(){                console.log("吃");            },            run: function(){                console.log("跑");            },            //带参数行为            sleep: function(hours) {                console.log("睡" + hours + "个小时");            },            //            say: function(){                console.log("身高:" + girlFriend.height);                //在对象内部，this代表当前对象本身                console.log("年龄:" + this.age);            },        };

结果：

捕获.PNG（3）访问对象的属性(属性值)

公式一：对象名["属性名"]

console.log(girlFriend["name"]);

结果：

捕获.PNG公式二：对象名 . 属性名,也叫点语法

console.log(girlFriend.height);

结果：

捕获.PNG（4）修改属性值

girlFriend.weight=180;console.log(girlFriend);

结果：

捕获.PNG（5）访问功能（函数）

公式一：对象名["功能属性名"]（参数列表）

girlFriend["eat"]();

公式二：对象名 . 功能属性名(参数列表)

girlFriend.run();girlFriend.sleep(10);girlFriend.say();

（6）动态给对象添加属性

注意：后期添加的属性，在这之前使用该对象也会有当前添加的属性

girlFriend.faceValue=100;console.log(girlFriend);

结果：

捕获.PNG（7）动态给对象添加方法

girlFriend.play=function(){    console.log("玩");};girlFriend.play();

（8）动态删除对象属性

delete girlFriend.weight;console.log(girlFriend.weight);

结果：

捕获.PNG（9）动态删除对象行为

delete girlFriend.eat;girlFriend.eat();

结果：

捕获.PNG

因为删除了eat()函数，所以才会报错，提示eat不是一个函数。

3.总结

今天就先介绍这一种方法吧，累死我了，本人已“事”，有事烧纸！！！！

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

全文共3525字，预计学习时长12分钟

图源：pexels

一切都从对象开始。

对象，即我们相互交流的一个载体，有其属性和方法。对象是面向对象编程的核心，不仅用于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 / propertieslet title=getTitle;let author=getAuthor;// Publicmethodthis.giveTitle=function() {return title;}// Private methodconst 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,author}return Object.assign({},getTitle(data),getAuthor(data),getSummary())}let book1=Book('The Alchemist', 'Paulo Coelho');

book1.title();> "title : The Alchemist"

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范