検索
ホームページウェブフロントエンドjsチュートリアル毎日学ばなければならないJavaScriptのカプセル化_JavaScriptスキル

こんにちは、JavaScript の基本についてはすでに説明しました。ここでは、OOP (オブジェクト指向プログラミング) について少しずつ説明していきます。 OOP を言語として使用するプログラマーは、OOP が何なのかさえ知らない、または OOP について聞いたことがあるだけで理解できておらず、オブジェクト指向のコードを書くことができない場合、プログラミングを学ぶ必要はありません。 , オブジェクト指向とは何か、プロセス指向とは何かについて詳しく紹介します。オブジェクト指向を理解するには、まずプロセス指向について知る必要があります。プロセスの方向性を理解した後は、OOP のためにやみくもに OOP を実行することはできません。それは、ほとんどの場合、小さな問題を解決するためだけにコードを作成するためです。 OOP を記述する必要はなく、プロセス指向のコードを記述するだけで済みます。「ローカルの状況に対策を適応する」という言葉を使用してください。

まずはプロセス指向から始めましょう。まず、私たちが通常「プログラム」と呼んでいるものは、実際にはプロセスを意味します。 、そのプロセスは、9時に定刻に会社に到着し、完了すべきいくつかのことを行い、結果が何であれ、午後6時に出勤するプロセスが完了します。会社を退職する場合、これがプロセスです。より具体的な例を挙げてみましょう。退会の場合、実行プロセスをより明確に記述します。

1. キャッシュカードを ATM に持って行きます

2. 銀行カードを挿入します

3. パスワードを入力します

4. 出金金額を入力します

5. ATM がお金を吐き出す

6. お金をポケットに入れてください

6. 希望の番号がない場合は、ステップ 4 に戻ります

7. 領収書を印刷する場合は、[領収書を印刷] をクリックします。印刷したくない場合は、この手順をスキップします。

8. 返却カード

9. 手続き完了

上記のステップから、最初のステップから最後のステップまでが実行シーケンスであり、ステップ 4 から 6 が循環プロセス、ステップ 7 が分岐プロセス、つまり、プログラム。コードを記述する目的は、いくつかの動作プロセスをシミュレートし、コンピューターの高速コンピューティング特性を利用して私たちの生活に役立てることです。

引き出しを関数にカプセル化し、必要に応じてこの関数を呼び出して作業の必要を完了することができます。以下では、最も単純なプログラム プロセスを表現するために最も単純な例を使用します。 >

function KissWife(whoseWife){
 console.log(whoseWife+"把脸凑过来");
 console.log("我把嘴唇印上去");
 console.log("木啊一声");
 console.log("亲"+whoseWife+"一次完成");
}

KissWife("我老婆");


看图说话,在合适的时候,我们调用KissWife函数,输入合适参数,我们执行完一个过程了。

  OOP的目的就是提高代码的重用率,用最少的代码干尽量多的事,使用参数,也是面向对象编程的一种体现,我们来举个反例,如果我们在不使用参数的情况下,我们在想亲别人老婆的时候,就要重新写一个KissWife函数,这样,我们就写了大量重复的代码,不方便代码管理,诸多不便,方法不顺溜,就算在亲别人老婆的时候被发现的机率就大大增加了,带来了一些不必要的麻烦。

这时候有同学想问了,我觉得,我觉得我不习惯使用参数,就是不想传递参数,代码管理哪里会出现不方便管理呢?好,这个问题问得相当的到位。

我来解释一下吧,如果在这个过程执行过程中,我们发现有不合理的地方,需要修改,例如,我还想伸个舌头啥的,我们就要在亲自己老婆的函数中修改(麻烦),还要在亲别人老婆的函数中修改(麻烦+1),当我们有很多个类似的函数的时候,是不是要全部做修改(麻烦+n);第二个坏处就是修改次数多了,你能保证一次性全部修改都不会出错吗(容易失误),这就能体现出了,如果我们只是完全写一些重复性的代码,工作效率大打折扣。

  通过上面的讲解,其实新手读者们还是没能理解什么是OOP(面向对象编程),我们现在就从对象(object)开始讲解,这里的对象,不能单纯地理解成谈恋爱时所处的男女朋友,对象是指世间的万事万物,太阳,大海,人,宠物……;每一种我们可以想得到的事物,每一个对象都有自己的属性,行为。

我们就可以像上图这样来理解,鸟就是一个对象,它有自己属性,有自己的行为,下面我们就用具体代码来封装一个关于鸟的类。(注:在javascript语言中function关键字中仅仅用来定义函数,也可以定义类,它不能像高级语言那样使用Class关键字,后面我们讲继承的时候,我们还会用特殊方法来实现继承)

//声明一个鸟类
function Bird(){
 this.name = "鸽子";
 this.color = "灰色";
 this.habitat = "笼子";
 this.weight = "500克";
}

//使用原型链的方式,来定义鸟的行,也可以用来定义属性,但是,属性一般用this关键字来声明
//行为和属性,其实同一个级别的,后面我们用for in来给大家验证

//鸣叫
Bird.prototype.Sing = function(){
 console.log("咕咕咕");
}
//进食
Bird.prototype.Eat = function(){
 console.log("吃了一粒玉米");
}
//飞翔
Bird.prototype.Fly = function(){
 console.log("在天空中飞翔着");
}
//孵蛋
Bird.prototype.Brood = function(){
 cossole.log("正在孵化鸽子蛋");
}

现在我们类已经声明好了,但是我们,怎么使用它呢?现在它只是一个类,还不是实例,就是我口头上所说的鸽子,实例,就是一只具体的鸽子,怎么才能得到一只具体的鸽子呢?看下面的代码

//用new 关键字来获得一个实例
var gezi = new Bird();

现在我们就可以调用它的属性,以及方法了

通过这样的方法我们所得到的每一个鸽子其实都是一样的,我们要怎么才得到有自己特征的鸽子呢?有自己独有特征,其实就是属性不一样,那们我们就来改造一下函数的声明

//其实我们只需要在这里小小地修改一下
function Bird(_color,_habitat,_weight){
 this.name = "鸽子";
 this.color = _color;
 this.habitat = _habitat;
 this.weight = _weight;
}

然后我们来看一下实例化一个鸽子的时候,怎么做

//我们现在就实例化了两个鸽子
var gezi_A = new Bird("白色","野外","300克");
var gezi_B = new Bird("灰白色","温室","550克");

这样,我们就可以构造出有自己特征的鸽子出来了,从上面的例子,我们其实已经不难看出,封装,其实就是把我们可以形容的对象用类来表示,我们就可通过new关键字来实例化出对象,这个对象就有自己独立的属性,行为,这样的一个对象,我们就可以方便的供我们操作,封装就是一种体现OOP的方法,我们先是封装一个类,然后,再new 出实例,这样写就比我们直接用代码来构造两次鸽子类少了很多的代码,如果我们还构造第3只鸽子,就再new 一次就可以了,构造对象的时候,就感觉一句代码的事。提高代码的重用率,OOP就这样体现出来了。

  这时候,有人问了,只是在说我们用OOP的好处 ,还没有看到不用OOP的代码到底怎么写,那们就来一个不用OOP的方式,同样以鸽子为例

//声明一个鸽子
function GeZi_C(){
 console.log("种类是鸽子");
 console.log("颜色是蓝色");
 console.log("住在树梢上");
 console.log("体重400克");
 console.log("在天空中飞翔着");
}
//执行一次
GeZi_C();

如果我们要再声明100个鸽子,是不是要写大量重复类似上面这样的代码呀,这就是面向过程的代码。相信新手朋友们已经有一个模糊的OOP概念了吧,慢慢体会,这种感觉不一两天就能弄明白的,一口吃不成大胖子,后面我们还会继续讲OOP思想的继承和多态。

继续先前在声明Bird类的时候,说的属性和行为是同一级别,而且是可以用两种方式来声明,属性在构造函数里面用 this 关键字声明,行为函数用 prototype 关键字来声明,prototype就是函数原型链的标准扩展,我们之所以这样来写,就是把javascript语言的使用代入高级语言的范畴,用来模拟高级语言的使用,扯远了,我们先来验证一下Bird实例对象中是不是拥有在同一级别的属性跟行为函数

//我们现在是用的前面的没有参数的Bird类
var obj = new Bird();

//逐一打印出来
for(var pro in obj){
  console.log(pro + " : " + obj[pro]);
}

看到了吧,for...in就作用就是用来循环遍历对象的属性以及数组的下标,行为函数的名称其实也是对象的属性,现在就验证了前面的说法,相信大家现在对OOP的封装思想有一定的认知了。

总结一下,今天我们所讲的东西其实就是把事物给抽象的拟态一下,然后,把这些属性行为给封装成一个类,使用new关键字实例化出具体对象,这样大大地提高了代码的使用率,提高了工作效率。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター