第JavaScript的面向?qū)ο竽懔私鈫崮夸?.面向?qū)ο缶幊探榻B1.1兩大編程思想1.2面向過程編程POP（Process-oriented-programming）1.3面向?qū)ο缶幊蘋OP（Object-Oriented-Programming）1.4面向過程和面向?qū)ο蟮膶?duì)比2.ES6中的類和對(duì)象2.1對(duì)象2.2類class2.3創(chuàng)建類2.4類constructor構(gòu)造函數(shù)2.5類添加方法3.類的繼承3.1繼承3.2super關(guān)鍵字4.三個(gè)注意點(diǎn)：總結(jié)

1.面向?qū)ο缶幊探榻B

1.1兩大編程思想

面向過程面向?qū)ο?/p>

1.2面向過程編程POP（Process-oriented-programming）

面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn)，使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了。

舉個(gè)例子：將大象裝進(jìn)冰箱，面向過程做法。

1.打開冰箱

2.大象裝進(jìn)去

3.關(guān)上冰箱門

面向過程，就是按照我們分析了的步驟，按照步驟解決問題。

1.3面向?qū)ο缶幊蘋OP（Object-Oriented-Programming）

面向?qū)ο笫前咽聞?wù)分解成為一個(gè)個(gè)對(duì)象，然后由對(duì)象之間分工與合作。

舉個(gè)例子：將大象裝進(jìn)冰箱，面向?qū)ο笞龇ā?/p>

先找出對(duì)象，并寫出這些對(duì)象的功能：

大象對(duì)象進(jìn)去冰箱對(duì)象打開關(guān)閉使用大象和冰箱的功能

面向?qū)ο笫且詫?duì)象功能來劃分問題，而不是步驟。

在面向?qū)ο蟪绦蜷_發(fā)思想中，每一個(gè)對(duì)象都是功能中心，具有明確分工。

面向?qū)ο缶幊叹哂徐`活、代碼可復(fù)用、容易維護(hù)和開發(fā)的優(yōu)點(diǎn)，更適合多人合作的大型軟件項(xiàng)目。

面向?qū)ο蟮奶匦裕?/p>

封裝性繼承性多態(tài)性

1.4面向過程和面向?qū)ο蟮膶?duì)比

面向過程

優(yōu)點(diǎn)：性能比面向?qū)ο蟾?，適合跟硬件聯(lián)系很緊密的東西。例如：?jiǎn)纹瑱C(jī)就采用的面向過程編程。缺點(diǎn)：沒有面向?qū)ο笠拙S護(hù)，易復(fù)用、易擴(kuò)展。

面向?qū)ο螅?/p>

優(yōu)點(diǎn)：易維護(hù)、易復(fù)用，由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性，可以設(shè)計(jì)出低耦合的系統(tǒng)，使系統(tǒng)更加靈活，更加易于維護(hù)。缺點(diǎn)：性能比面向過程低。

2.ES6中的類和對(duì)象

面向?qū)ο?/p>

面向?qū)ο蟾N近我們的實(shí)際生活，可以使用面向?qū)ο竺枋霈F(xiàn)實(shí)世界事物，但是事物分為具體的事物和抽象的事物。

面向?qū)ο蟮乃季S特點(diǎn)：

抽?。ǔ橄螅?duì)象共用的屬性和行為組織（封裝）成一個(gè)類（模板）對(duì)類進(jìn)行實(shí)例化，獲取類的對(duì)象

面向?qū)ο缶幊涛覀兛紤]的是有哪些對(duì)象，按照面向?qū)ο蟮乃季S特點(diǎn)。不斷的創(chuàng)建對(duì)象，使用對(duì)象，指揮對(duì)象做事情。

2.1對(duì)象

現(xiàn)實(shí)生活中：萬物皆對(duì)象，對(duì)象是一個(gè)具體的事物，看得見摸得著的事物。例如：一本書、一輛汽車、一個(gè)人可以是對(duì)象,一個(gè)數(shù)據(jù)庫，一個(gè)網(wǎng)頁、一個(gè)遠(yuǎn)程服務(wù)器的連接也可以是對(duì)象。

在JavaScript中，對(duì)象是一組無序的相關(guān)屬性和方法的集合，所有的事物都是對(duì)象。例如：字符串、數(shù)值、數(shù)組、函數(shù)等。

對(duì)象是由屬性和方法組成的：

屬性：事物的特性，在對(duì)象中用屬性來表示（常用名詞）方法：事物的行為，在對(duì)象中用方法來表示（常用動(dòng)詞）

2.2類class

在ES6中新增加了類的概念，可以使用class關(guān)鍵字聲明一個(gè)類，之后以這個(gè)類來實(shí)例化對(duì)象。

類抽象了對(duì)象的公共部分，它泛指某一大類（class）

對(duì)象特指某一個(gè)，通過類實(shí)例化一個(gè)具體的對(duì)象

2.3創(chuàng)建類

語法：

classStar{//classbody}

創(chuàng)建實(shí)例：

varxx=newStar();

注意：類必須使用new實(shí)例化對(duì)象

2.4類constructor構(gòu)造函數(shù)

constructor()方法是類的構(gòu)造函數(shù)（默認(rèn)方法），用于傳遞參數(shù)，返回實(shí)例對(duì)象，通過new命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。如果沒有顯示定義，類內(nèi)部會(huì)自動(dòng)給我們創(chuàng)建一個(gè)constructor()。

script

//1.創(chuàng)建類class創(chuàng)建一個(gè)明星類

classStar{

constructor(uname,age){

this.uname=uname;

this.age=age;

//2.利用類創(chuàng)建對(duì)象new

varldh=newStar("劉德華",18);

varzxy=newStar("張學(xué)友",20);

console.log(ldh);

console.log(zxy);

//(1)通過class關(guān)鍵字創(chuàng)建類類名我們還是習(xí)慣性定義首字母大寫

//(2)類里面有個(gè)constructor函數(shù)，可以接受傳遞過來的參數(shù)同時(shí)返回實(shí)例對(duì)象

//(3)constructor函數(shù)只要new生成實(shí)例對(duì)象，就會(huì)自動(dòng)調(diào)用這個(gè)函數(shù)，如果我們不寫這個(gè)函數(shù)，類會(huì)也會(huì)自動(dòng)生成這個(gè)函數(shù)

//(4)生成實(shí)例new不能省略

//(5)最后注意語法規(guī)范，創(chuàng)建類類名后面不要加小括號(hào)，生成實(shí)例類名后面加小括號(hào)構(gòu)造函數(shù)不需要加function

/script

2.5類添加方法

語法：

classPerson{

constructor(name,age){

//構(gòu)造器或者構(gòu)造函數(shù)

=name;

this.age=age;

say(){

console.log(+"您好");

script

//1.創(chuàng)建類class創(chuàng)建一個(gè)明星類

classStar{

constructor(uname,age){

this.uname=uname;

this.age=age;

sing(song){

//console.log("我唱歌");

console.log(this.uname+song);

//(1)我們類里面所有的函數(shù)需要寫function

//(2)多個(gè)函數(shù)方法之間不需要添加逗號(hào)分割

//2.利用類創(chuàng)建對(duì)象new

varldh=newStar("劉德華",18);

varzxy=newStar("張學(xué)友",20);

console.log(ldh);

console.log(zxy);

ldh.sing("冰雨");

zxy.sing("哈哈");

/script

3.類的繼承

3.1繼承

現(xiàn)實(shí)中的繼承：子繼承父業(yè)，比如我們都繼承了父親的姓。

程序中的繼承：子類可以繼承父類的一些屬性和方法。

語法：

script

classFather{

//父類

classSonextendsFather{

//子類繼承父類

/script

3.2super關(guān)鍵字

super關(guān)鍵字用于訪問和調(diào)用對(duì)象父類上的函數(shù)，可以調(diào)用父類的構(gòu)造函數(shù)，也可以調(diào)用父類的普通函數(shù)。

語法：

script

classFather{

constructor(x,y){

this.x=x;

this.y=y;

sum(){

console.log(this.x+this.y);

classSonextendsFather{

constructor(x,y){

super(x,y);//調(diào)用了父類里面的構(gòu)造函數(shù)

varson=newSon(1,2);

varson1=newSon(11,22);

son.sum();//3

son1.sum();//33

/script

script

classFather{

say(){

return"我是爸爸";

classSonextendsFather{

say(){

//console.log("我是兒子");

console.log(super.say()+"的兒子");

//super.say()就是調(diào)用父類中的普通函數(shù)say()

varson=newSon();

son.say();

//繼承中的屬性或者方法查找原則：就近原則

//1.繼承中，如果實(shí)例化子類輸出一個(gè)方法，先看子類有沒有這個(gè)方法，如果有就先執(zhí)行子類的方法

//2.繼承中，如果子類里面沒有，就去查找父類有沒有這個(gè)方法，如果有，就執(zhí)行父類的這個(gè)方法(就近原則)

/script

語法：

script

classFather{

constructor(x,y){

this.x=x;

this.y=y;

sum(){

console.log(this.x+this.y);

//子類繼承父類加法方法同時(shí)擴(kuò)展減法方法

classSonextendsFather{

constructor(x,y){

//利用super調(diào)用父類的構(gòu)造函數(shù)

//super必須在字類this之前調(diào)用

super(x,y);

this.x=x;

this.y=y;

sub(){

console.log(this.x-this.y);

varson=newSon(5,3);

son.sum();

son.sub();

/script

注意：子類在構(gòu)造函數(shù)中使用super，必須放到this前面（必須先調(diào)用父級(jí)的構(gòu)造方法，在使用子類的構(gòu)造方法）

4.三個(gè)注意點(diǎn)：

1.在ES6中類沒有變量提升，所以必須先定義類，才能通過類實(shí)例化對(duì)象

2.類里面的共有屬性和方法一定要加this使用

3.類里面的this指向問題

4.constructor里面的的this指向?qū)嵗龑?duì)象，方法里面的this指向這個(gè)方法的調(diào)用者

body

button按鈕/button

/body

script

varthat;

var_that;

classStar{

constructor(uname,age){

//constructor里面的this指向的是創(chuàng)建的實(shí)例對(duì)象

that=this;

this.uname=uname;

this.age=age;

//this.sing();

this.btn=document.querySelector("button");

this.btn.onclick=this.sing;

sing(){

//這個(gè)sing方法里面的this指向的是btn這個(gè)按鈕，因?yàn)檫@個(gè)按鈕調(diào)用了這個(gè)函數(shù)

console.log(this);

console.log(that.uname);

dance(){

//console.log(this);

//