es6中什麼是類別的靜態成員

在es6中，由類別直接呼叫的屬性和方法叫靜態成員。在類別裡面對變數、函數加static關鍵字，那它就是靜態成員；靜態成員不會被實例化成為新物件的元素。靜態成員和實例成員的區別：1、實例成員屬於特定的對象，而靜態成員為所有對象共享；2、靜態成員是透過類名或建構函數訪問，實例成員是透過實例化的對象訪問。

本教學操作環境：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

【相關推薦：javascript影片教學、web前端】

以上是es6中什麼是類別的靜態成員的詳細內容。更多資訊請關注PHP中文網其他相關文章！