您好,登錄后才能下訂單哦!
本篇內容主要講解“es6類的靜態成員是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“es6類的靜態成員是什么”吧!
在es6中,由類直接調用的屬性和方法叫靜態成員。在類里面對變量、函數加static關鍵字,那它就是靜態成員;靜態成員不會被實例化成為新對象的元素。靜態成員和實例成員的區別:1、實例成員屬于具體的對象,而靜態成員為所有對象共享;2、靜態成員是通過類名或構造函數訪問,實例成員是通過實例化的對象訪問。
面向對象的主要思想就是把需要解決的問題分解成一個個對象,建立對象不是為了實現一個步驟,而是為了描述每個對象在解決問題中的行為,面向對象的核心是對象。
面向對象的優勢:
模塊化更深,封裝性強
更容易實現復雜的業務邏輯
更易維護、易復用、易擴展
面向對象的特征:
封裝性: 對象是屬性和行為的結合體
多態性: 同一消息被不同的對象接收后 會產生不同的效果
繼承性: 子類可以繼承父類的信息
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());
在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類的靜態成員是什么”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。