站長資訊網
在es6中，由類直接調用的屬性和方法叫靜態成員。在類里面對變量、函數加static關鍵字，那它就是靜態成員；靜態成員不會被實例化成為新對象的元素。靜態成員和實例成員的區別：1、實例成員屬于具體的對象，而靜態成員為所有對象共享；2、靜態成員是通過類名或構造函數訪問，實例成員是通過實例化的對象訪問。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
面向對象
面向對象的主要思想就是把需要解決的問題分解成一個個對象，建立對象不是為了實現一個步驟，而是為了描述每個對象在解決問題中的行為，面向對象的核心是對象。
面向對象的優勢：
- 模塊化更深，封裝性強
- 更容易實現復雜的業務邏輯
- 更易維護、易復用、易擴展
面向對象的特征：
- 封裝性: 對象是屬性和行為的結合體
- 多態性: 同一消息被不同的對象接收后 會產生不同的效果
- 繼承性: 子類可以繼承父類的信息
ES6面向對象語法
ES6：ES是ECMAScript的簡寫，它是JavaScript的語法規范。ES6是在ES5基礎上擴展，增加了面向對象編程的相關技術以及類的概念。
類和對象
類：具有相同屬性和行為的集合稱為類(類是對象的抽象)，類中的大多數數據只能用本類的方法進行處理。
對象：是類的實例(是類的具體化)
class關鍵字：用來定義類的
class 類名{// "類名"是一個用戶標識符 通常建議首字母大寫 屬性; 函數; }
構造函數
在ES6中使用constructor()來定義構造函數，作用是初始化對象的屬性(成員變量)，構造函數不是必須的，若用戶沒有定義構造函數，系統會生成一個默認的、無參的構造函數。
普通的成員函數
函數名([參數]){ 函數體語句 }
變量名 = function([參數]){ 函數體語句 }
class Person{ constructor(name,age,sex){// 構造函數 初始化對象的成員 this.name = name;// this指向構造函數新創建的對象 this.age = age; this.sex = sex; } tt = function(){ //普通的成員函數 console.log(this.name); console.log(this.age); console.log(this.sex); } } var p = new Person('李相赫',25,'男')// p1是一個對象 通過調用構造函數對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());
結果如下：
// 用類實現簡單的四則運算 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中，繼承用來表示兩個類之間的關系，子類可以繼承父類的一些屬性和方法，在繼承以后還可以增加自己獨有的屬性和方法。
語法：
class 子類名 extends 父類名{ 函數體語句; };
關于繼承需要注意：
- 父類必須已經定義
- 子類又稱為派生類 可以繼承父類的屬性和函數
- 子類不能繼承父類的構造函數
super關鍵字
子類不可以繼承父類的構造函數，如果要調用父類的構造函數可以使用super關鍵字。
**注意：**在子類的構造函數中使用super調用父類的構造函數，則調用語句必須作為子類構造函數的第一條語句
調用父類構造函數
super([參數])
調用普通成員函數
super.函數名([參數])
方法覆蓋
若子類中定義的函數與父類中的函數同名，子類函數覆蓋父類中的函數，可以在子類中調用父類的同名的普通成員函數來解決
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); //調用父類的構造函數 要放在首位 this.weight = weight; }; show(){ super.show();// 調用父類的普通成員函數 console.log('重量：'+this.weight); }; other(){ return '子類的其他方法'; }; }; var s1 = new Son('iPhone 12','黑色','3000g');//s1為子類的實例 s1.show(); console.log(s1.other());
靜態成員和實例成員
靜態成員：通過類名或構造函數訪問的成員
實例成員：通過實例對象訪問的成員稱為實例成員
區別：
- 實例成員屬于具體的對象，而靜態成員為所有對象共享
- 靜態成員是通過類名或構造函數訪問，實例成員是通過實例化的對象訪問
在ES5中定義靜態屬性
function Student(name,age,sex){ Student.school = '西安郵電大學';// school是靜態成員 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中靜態屬性定義
1、先創建類
2、在類的外部定義靜態屬性：類名.靜態屬性名
class Foo{ constructor(){ this.color = '紅色';// color是實例成員 } } Foo.prop = 45;// prop是靜態成員 var f1 = new Foo(); console.log('靜態屬性：'+Foo.prop);// 45 console.log(f1.prop);// undefined
在ES7中靜態屬性定義
在類定義時 使用static關鍵字定義靜態屬性
class Foo{ static prop = 45; //prop是靜態成員 constructor(){ this.color = '紅色'; } } var f2 = new Foo(); console.log('靜態屬性：'+Foo.prop);// 45 console.log(f2.prop);// undefined
類和構造函數的區別
類中的成員方法是定義在類中的，使用類創建對象后，這些對象的方法都是引用了同一個方法，這樣可以節省內存空間。
class Person { sing(){ console.log('hello'); } } var p1 = new Person(); var p2 = new Person(); console.log(p1.sing === p2.sing); // 輸出結果：true
【
