取值函數(shù)和存值函數(shù);
和ES5一樣;同樣通過set和get關(guān)鍵字;對(duì)某個(gè)屬性進(jìn)行存和取得攔截
class MyClass{ constructon(){} get prop(){ return 'getter' } set prop(value){ return console.log('setter:'+value); } }
;
var inst=new MyClass();
inst.prop='123';
//setter:123
inst.prop
//getter;
上面代碼中prop對(duì)應(yīng)有相應(yīng)的取值函數(shù)和存值函數(shù);因此取存都被進(jìn)行自定義了;
存值和取值都是定義在Descriptor[描述]屬性上的;例如如下代碼
class CustomHtmlElement{
constructor(element){
this.element=element;
}
get html(){
return this.element.innerHTML;
}
set html(element){
this.element.innerHTML=value;
}
};
與函數(shù)一樣;類可以使用表達(dá)式的形式定義;
const MyClass=class Me{
getClassName(){
return Me.name;
}
};
這個(gè)類的名字是MyClass;不是Me;Me只是在類的內(nèi)部使用;代替當(dāng)前這個(gè)類;
let inst=new MyClass();
inst.getClassName();//Me;
Me.name//出錯(cuò);Me is not defined;
上面的代碼說明;Me只是在函數(shù)的內(nèi)部使用;如果內(nèi)部沒用的話;也可以直接省掉;
const MyClass=class{}
let person=new class{
constructon(name){
this.name=name;
}
sayName(){
console.log(this.name);
}
}('張三');
person.sayName();
上面代碼中粗蔚,person是一個(gè)立即執(zhí)行的類的實(shí)例。
**注意事項(xiàng):
類和模塊默認(rèn)為嚴(yán)格模式熔恢;所以不需要使用use strict;
不存在聲明提升鹰祸;
new Foo();//Error;
class Foo();
上面?zhèn)€的代碼中毁涉;Foo類使用在前;定義在后;這樣報(bào)錯(cuò)钾恢;ES6不會(huì)把類的聲明提升到頭部翘鸭。
{
let Foo=class{};
class Barextends Foo{
}
};
這樣代碼不會(huì)出錯(cuò)滴铅;如果存在變量提升就會(huì)出錯(cuò);因?yàn)閏lass被提升到代碼頭部就乓;而let不會(huì)汉匙;所以導(dǎo)致Bar繼承Foo的時(shí)候拱烁,F(xiàn)oo還沒有定義;name屬性
由于本質(zhì)上盹兢;ES6的類只是ES5的構(gòu)造函數(shù)的一層包裝邻梆;所以函數(shù)的許多特性都被class繼承,包括name屬性
class Point{};
Point.name//'Point'Generator方法绎秒;
如果某個(gè)方法之前加上了* 就表示Generator函數(shù)浦妄。
Class Foo{
constructor(...args){
this.args=args;
}
*Symbol.iterator{
for(let arg of this.args){
yield arg
}
}
}
for (let x of new Foo('hello','world')){
console.log(x);
};
//hello
//world;
上面代碼中Foo類的Symbol.iterator方法前面有個(gè)iterator前面有一個(gè)星號(hào)见芹;表示該方法是一個(gè)Generator函數(shù)剂娄;Symbol.iterator方法返回一個(gè)Foo類的默認(rèn)遍歷器;for...of循環(huán)會(huì)自動(dòng)調(diào)節(jié)用這個(gè)遍歷器玄呛;this的指向阅懦;
類的方法內(nèi)部如果含有this;它默認(rèn)只想這個(gè)類的實(shí)例;但是必須要非常小心徘铝;一旦單獨(dú)使用該方法耳胎,很可能報(bào)錯(cuò)
class Logger{
printName(name='there'){
tthis.print(hello ${name}
)
}
print(text){
console.log(text)
}
};
const logger = new Logger()
const {printName}=logger;
printName();//Type
2靜態(tài)方法;
類相當(dāng)于實(shí)例的原型惕它;所有在類中定義的方法怕午;都會(huì)被實(shí)例繼承;如果在一個(gè)方法前面加上static淹魄;就表示該方法郁惜;不會(huì)被實(shí)例繼承;而是只能通過類調(diào)用甲锡;這就稱為靜態(tài)方法兆蕉;
class Foo{
static classMethod(){
return 'hello'
}
};
Foo.classMethod();//hello;
var foo=new Foo();
foo.classMethod();
//TypeError:foo.classMethod is ot a function;
上面代碼中,F(xiàn)oo類的classMethod方法前面有static關(guān)鍵字缤沦;表明該方法虎韵;是一個(gè)靜態(tài)方法;可以直接調(diào)用缸废;不能繼承使用劝术;
父類的靜態(tài)方法;可以別子類繼承呆奕。
class Foo{
static classMethod(){
return 'hello'
}
}
class Bar extends Foo{
}
Bar.classMethod();//hello;
上面代碼中父類Foo有個(gè)靜態(tài)方法养晋;
this指代的是類而不是實(shí)例;
class Foo {
static bar() {
this.baz();
}
static baz() {
console.log('hello');
}
baz() {
console.log('world');
}
}
Foo.bar() // hello
上面代碼中梁钾,靜態(tài)方法bar調(diào)用了this.baz绳泉,這里的this指的是Foo類,而不是Foo的實(shí)例姆泻,等同于調(diào)用Foo.baz零酪。另外冒嫡,從這個(gè)例子還可以看出,靜態(tài)方法可以與非靜態(tài)方法重名四苇。
class Foo{
static classMethods(){
retutn 'hello'
}
}
class Bar extends Foo{
static class Method(){
return super.classMothod()+",too";
}
}
Bar.classMethod();//hello ,too;
3.實(shí)例屬性的新寫法孝凌;
實(shí)例屬性除了