ES6-class

取值函數(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í)例屬性除了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市月腋,隨后出現(xiàn)的幾起案子蟀架,更是在濱河造成了極大的恐慌,老刑警劉巖榆骚,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件片拍,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡妓肢,警方通過查閱死者的電腦和手機(jī)捌省,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碉钠,“玉大人纲缓,你說我怎么就攤上這事『胺希” “怎么了色徘?”我有些...
    開封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)操禀。 經(jīng)常有香客問我,道長(zhǎng)横腿,這世上最難降的妖魔是什么颓屑? 我笑而不...
    開封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮耿焊,結(jié)果婚禮上揪惦,老公的妹妹穿的比我還像新娘。我一直安慰自己罗侯,他們只是感情好器腋,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钩杰,像睡著了一般纫塌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上讲弄,一...
    開封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天措左,我揣著相機(jī)與錄音,去河邊找鬼避除。 笑死怎披,一個(gè)胖子當(dāng)著我的面吹牛胸嘁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播凉逛,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼性宏,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了状飞?” 一聲冷哼從身側(cè)響起毫胜,我...
    開封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎昔瞧,沒想到半個(gè)月后指蚁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡自晰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年凝化,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酬荞。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡搓劫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出混巧,到底是詐尸還是另有隱情枪向,我是刑警寧澤,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布咧党,位于F島的核電站秘蛔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏傍衡。R本人自食惡果不足惜深员,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蛙埂。 院中可真熱鬧倦畅,春花似錦、人聲如沸绣的。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)屡江。三九已至芭概,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惩嘉,已是汗流浹背谈山。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宏怔,地道東北人奏路。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓畴椰,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鸽粉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子斜脂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1\class的簡(jiǎn)介:ES6 的類,完全可以看作構(gòu)造函數(shù)的另一種寫法触机。 class Point {// ...} ...
    燕_夢(mèng)閱讀 763評(píng)論 0 0
  • class的基本用法 概述 JavaScript語(yǔ)言的傳統(tǒng)方法是通過構(gòu)造函數(shù)帚戳,定義并生成新對(duì)象。下面是一個(gè)例子: ...
    呼呼哥閱讀 4,092評(píng)論 3 11
  • 簡(jiǎn)介 JavaScript 語(yǔ)言中儡首,生成實(shí)例對(duì)象的傳統(tǒng)方法是通過構(gòu)造函數(shù)片任。下面是一個(gè)例子。 上面這種寫法跟傳統(tǒng)的面...
    lhdoeo閱讀 512評(píng)論 0 1
  • 例子:class Bar{ constructor(x,y){ //構(gòu)造函數(shù) this.x = x; ...
    一川煙草i蓑衣閱讀 188評(píng)論 0 0
  • 原文es6 class class基本聲明 在說class之前蔬胯,想必大家肯定會(huì)想到constructor func...
    xiaohesong閱讀 503評(píng)論 0 3