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