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