es6中什麼是類的靜態成員

在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
登入後複製

【相關推薦：、】

以上就是es6中什麼是類的靜態成員的詳細內容，更多請關注TW511.COM其它相關文章！