站長(zhǎng)資訊網(wǎng)
在es6中，由類直接調(diào)用的屬性和方法叫靜態(tài)成員。在類里面對(duì)變量、函數(shù)加static關(guān)鍵字，那它就是靜態(tài)成員；靜態(tài)成員不會(huì)被實(shí)例化成為新對(duì)象的元素。靜態(tài)成員和實(shí)例成員的區(qū)別：1、實(shí)例成員屬于具體的對(duì)象，而靜態(tài)成員為所有對(duì)象共享；2、靜態(tài)成員是通過(guò)類名或構(gòu)造函數(shù)訪問(wèn)，實(shí)例成員是通過(guò)實(shí)例化的對(duì)象訪問(wèn)。
前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
面向?qū)ο?/strong>
面向?qū)ο?/strong>的主要思想就是把需要解決的問(wèn)題分解成一個(gè)個(gè)對(duì)象，建立對(duì)象不是為了實(shí)現(xiàn)一個(gè)步驟，而是為了描述每個(gè)對(duì)象在解決問(wèn)題中的行為，面向?qū)ο蟮暮诵氖?strong>對(duì)象。
面向?qū)ο蟮膬?yōu)勢(shì)：
- 模塊化更深，封裝性強(qiáng)
- 更容易實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯
- 更易維護(hù)、易復(fù)用、易擴(kuò)展
面向?qū)ο蟮奶卣鳎?/strong>
- 封裝性: 對(duì)象是屬性和行為的結(jié)合體
- 多態(tài)性: 同一消息被不同的對(duì)象接收后 會(huì)產(chǎn)生不同的效果
- 繼承性: 子類可以繼承父類的信息
ES6面向?qū)ο笳Z(yǔ)法
ES6：ES是ECMAScript的簡(jiǎn)寫(xiě)，它是JavaScript的語(yǔ)法規(guī)范。ES6是在ES5基礎(chǔ)上擴(kuò)展，增加了面向?qū)ο缶幊痰南嚓P(guān)技術(shù)以及類的概念。
類和對(duì)象
類：具有相同屬性和行為的集合稱為類(類是對(duì)象的抽象)，類中的大多數(shù)數(shù)據(jù)只能用本類的方法進(jìn)行處理。
對(duì)象：是類的實(shí)例(是類的具體化)
class關(guān)鍵字：用來(lái)定義類的
class 類名{// "類名"是一個(gè)用戶標(biāo)識(shí)符 通常建議首字母大寫(xiě) 屬性; 函數(shù); }
構(gòu)造函數(shù)
在ES6中使用constructor()來(lái)定義構(gòu)造函數(shù)，作用是初始化對(duì)象的屬性(成員變量)，構(gòu)造函數(shù)不是必須的，若用戶沒(méi)有定義構(gòu)造函數(shù)，系統(tǒng)會(huì)生成一個(gè)默認(rèn)的、無(wú)參的構(gòu)造函數(shù)。
普通的成員函數(shù)
函數(shù)名([參數(shù)]){ 函數(shù)體語(yǔ)句 }
變量名 = function([參數(shù)]){ 函數(shù)體語(yǔ)句 }
class Person{ constructor(name,age,sex){// 構(gòu)造函數(shù) 初始化對(duì)象的成員 this.name = name;// this指向構(gòu)造函數(shù)新創(chuàng)建的對(duì)象 this.age = age; this.sex = sex; } tt = function(){ //普通的成員函數(shù) console.log(this.name); console.log(this.age); console.log(this.sex); } } var p = new Person('李相赫',25,'男')// p1是一個(gè)對(duì)象 通過(guò)調(diào)用構(gòu)造函數(shù)對(duì)p1的三個(gè)屬性進(jìn)行了初始化 p.fun();
class Circle{// 定義類Circlie constructor(r){ this.radius = r; }; area(){ // 計(jì)算圓的面積 var s = Math.PI*this.radius**2; return s; }; // 計(jì)算圓的周長(zhǎng) CircleLength = function(){ return 2*Math.PI*this.radius; }; }; var c1 = new Circle(5); console.log('半徑為5的圓的面積='+c1.area()); console.log('半徑為5的圓的周長(zhǎng)='+c1.Circle_length());
結(jié)果如下：
// 用類實(shí)現(xiàn)簡(jiǎn)單的四則運(yùn)算 class Number{// 定義類Number constructor(n1,n2){ this.n1=n1; this.n2=n2; }; add(){ var sum = this.n1+this.n2; return sum; }; sub(){ var sum1 = this.n1-this.n2; return sum1; }; mut(){ var sum2 = this.n1*this.n2; return sum2; }; p(){ if(this.n2!=0){ var sum3 = this.n1/this.n2; return sum3; } } } var p1 = new Number(12,21); console.log(p1.add()); console.log(p1.sub()); console.log(p1.mut()); console.log(p1.p());
ES6中類的繼承
在JavaScript中，繼承用來(lái)表示兩個(gè)類之間的關(guān)系，子類可以繼承父類的一些屬性和方法，在繼承以后還可以增加自己獨(dú)有的屬性和方法。
語(yǔ)法：
class 子類名 extends 父類名{ 函數(shù)體語(yǔ)句; };
關(guān)于繼承需要注意：
- 父類必須已經(jīng)定義
- 子類又稱為派生類 可以繼承父類的屬性和函數(shù)
- 子類不能繼承父類的構(gòu)造函數(shù)
super關(guān)鍵字
子類不可以繼承父類的構(gòu)造函數(shù)，如果要調(diào)用父類的構(gòu)造函數(shù)可以使用super關(guān)鍵字。
**注意：**在子類的構(gòu)造函數(shù)中使用super調(diào)用父類的構(gòu)造函數(shù)，則調(diào)用語(yǔ)句必須作為子類構(gòu)造函數(shù)的第一條語(yǔ)句
調(diào)用父類構(gòu)造函數(shù)
super([參數(shù)])
調(diào)用普通成員函數(shù)
super.函數(shù)名([參數(shù)])
方法覆蓋
若子類中定義的函數(shù)與父類中的函數(shù)同名，子類函數(shù)覆蓋父類中的函數(shù)，可以在子類中調(diào)用父類的同名的普通成員函數(shù)來(lái)解決
class Father{ //父類(基類或超類) constructor(type,color){ this.type = type; this.color = color; } money(){ console.log(100); } show(){ console.log('類型：'+this.type); console.log('顏色：'+this.color); } } class Son extends Father{ //Son是子類(又稱派生類) constructor(type,color,weight){ super(type,color); //調(diào)用父類的構(gòu)造函數(shù) 要放在首位 this.weight = weight; }; show(){ super.show();// 調(diào)用父類的普通成員函數(shù) console.log('重量：'+this.weight); }; other(){ return '子類的其他方法'; }; }; var s1 = new Son('iPhone 12','黑色','3000g');//s1為子類的實(shí)例 s1.show(); console.log(s1.other());
靜態(tài)成員和實(shí)例成員
靜態(tài)成員：通過(guò)類名或構(gòu)造函數(shù)訪問(wèn)的成員
實(shí)例成員：通過(guò)實(shí)例對(duì)象訪問(wèn)的成員稱為實(shí)例成員
區(qū)別：
- 實(shí)例成員屬于具體的對(duì)象，而靜態(tài)成員為所有對(duì)象共享
- 靜態(tài)成員是通過(guò)類名或構(gòu)造函數(shù)訪問(wèn)，實(shí)例成員是通過(guò)實(shí)例化的對(duì)象訪問(wèn)
在ES5中定義靜態(tài)屬性
function Student(name,age,sex){ Student.school = '西安郵電大學(xué)';// school是靜態(tài)成員 this.name = name; this.age = age; this.sex = sex;// name age sex都是實(shí)例成員 this.show = function(){ console.log('姓名：'+this.name); console.log('年齡：'+this.age); console.log('性別：'+this.sex); }; }; var f = new Student('李相赫',23,'男'); f.show(); console.log(Student.school);// 西安郵電大學(xué) console.log(f.school);// undefined
在ES6中靜態(tài)屬性定義
1、先創(chuàng)建類
2、在類的外部定義靜態(tài)屬性：類名.靜態(tài)屬性名
class Foo{ constructor(){ this.color = '紅色';// color是實(shí)例成員 } } Foo.prop = 45;// prop是靜態(tài)成員 var f1 = new Foo(); console.log('靜態(tài)屬性：'+Foo.prop);// 45 console.log(f1.prop);// undefined
在ES7中靜態(tài)屬性定義
在類定義時(shí) 使用static關(guān)鍵字定義靜態(tài)屬性
class Foo{ static prop = 45; //prop是靜態(tài)成員 constructor(){ this.color = '紅色'; } } var f2 = new Foo(); console.log('靜態(tài)屬性：'+Foo.prop);// 45 console.log(f2.prop);// undefined
類和構(gòu)造函數(shù)的區(qū)別
類中的成員方法是定義在類中的，使用類創(chuàng)建對(duì)象后，這些對(duì)象的方法都是引用了同一個(gè)方法，這樣可以節(jié)省內(nèi)存空間。
class Person { sing(){ console.log('hello'); } } var p1 = new Person(); var p2 = new Person(); console.log(p1.sing === p2.sing); // 輸出結(jié)果：true
【
