ES6前端就业课第三课之class
生活随笔
收集整理的這篇文章主要介紹了
ES6前端就业课第三课之class
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ES6.Class
? 編程語言，都有關于類的定義和使用，java，C#，C++。使用class的關鍵字，js之前的版本，沒有用。保留字，ES6啟用了該關鍵字。
一.傳統方法
通過構造函數定義，并生成對象。
//定義傳統的類，js之前的寫法function Person(name,salary) {this.name=name;this.salary=salary;}//定義它的方法Person.prototype.toString=function () {return this.name+","+this.salary;}//如何來獲取let p1=new Person('張晨光',90000);console.log(p1.toString());//這時候，用的是function來定義一個類。和傳統面向對象語言，寫法差別很大，很難受。
接下來，看看ES6是如何寫的呢？
二.ES6類的定義：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>//使用ES6來定義類,啟用了之前的保留字classclass Person{//構造方法constructor(name,salary){this.name=name;this.salary=salary;}//其他方法toString(){return `${this.name}，${this.salary}`;}}//使用該類let p2=new Person('張晨光老師',100000);console.log(p2.toString());//這種方式，看起來就是面向對象，ES6更加面向對象;console.log(typeof(Person)); //輸出的是一個function//證明ES6，class對應了之前的functionlet result=(Person===Person.prototype.constructor);console.log(result);//證明類本身指向了構造方法.</script> </head> <body></body> </html>三.靜態方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>//class Person{}const Person=class{constructor(name,salary){this.name=name;this.salary=salary;}//自定義方法showName(){return `姓名:${this.name}`;}showSalary(){return `工資：${this.salary}`;}//靜態方法static isFee(salary){if(salary<5000)return '不用交稅';}} //類定義的結束//調用之let p3=new Person('張晨光',4500);console.log(p3.showName());console.log(p3.showSalary());//調用類的靜態方法;類名.靜態方法console.log(Person.isFee(4500));</script> </head> <body></body> </html>使用靜態方法的時候，語法
static 方法名(參數){}
調用的時候：類名.方法名()
四.繼承
基本語法
子類 extends 父類，在之前ES5通過修改原型鏈模式實現。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>//人的定義class Person{//構造方法的定義constructor(name,salary){this.name=name;this.salary=salary;}//自定義方法showName(){return `姓名:${this.name}`;}showSalary(){return `工資：${this.salary}`;}}//定義一個子類class YellowPerson extends Person{//子類如果沒有定義construtor,則該方法會默認添加上去，即任何子類都有constructor()//constructor(...args){ super(...args) }//這時候，子類需要針對父類進行加工處理constructor(name,salary,skin){super(name,salary);//super()使用，在子類構造方法最前面;this.skin=skin; //}//子類增加一個自己的方法;showInfo(){//通過super.方法，來調用父類的方法return super.showName()+","+super.showSalary()+",膚色："+this.skin;}}//調用之;let yp=new YellowPerson('張晨光',8888,'青銅色');//測試實例;//console.log(yp instanceof YellowPerson); //yp是不是子類的實例//console.log(yp instanceof Person); //yp是不是父類的實例console.log(yp.showInfo());</script> </head> <body></body> </html>總結：
1.ES6類定義的語法，使用class 類名{
? //構造方法
//自定義方法
}
2.ES6 靜態方法的定義和使用
3.ES6 子類繼承父類的語法和使用
總結
以上是生活随笔為你收集整理的ES6前端就业课第三课之class的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.Net第二章服务器端控件
- 下一篇： Oracle第三课之PLSQL