摘要:創(chuàng)建自定義類(lèi)型看下面一段代碼上面代碼使用創(chuàng)建了一個(gè)自定義類(lèi)型,是這個(gè)類(lèi)的構(gòu)造器,是類(lèi)的公共方法。注意事項(xiàng)在使用類(lèi)繼承的實(shí)現(xiàn)中,需要注意的點(diǎn)是如果子類(lèi)沒(méi)有重寫(xiě)方法,默認(rèn)會(huì)調(diào)用父類(lèi)的構(gòu)造器方法。
es6 類(lèi)-class
與大多正規(guī)的面向?qū)ο缶幊陶Z(yǔ)言不同(比如java),js在創(chuàng)建之初就不支持類(lèi)。js的面向?qū)ο缶幊虒?shí)現(xiàn)方式是通過(guò)構(gòu)造函數(shù)和原型來(lái)實(shí)現(xiàn)的。
我之前以為es6引入類(lèi)的概念將會(huì)帶給這門(mén)語(yǔ)言極大的改變。后來(lái)才發(fā)現(xiàn)es6類(lèi)的特性只是一種語(yǔ)法糖,使得js創(chuàng)建自定義類(lèi)型和傳統(tǒng)的面向?qū)ο笳Z(yǔ)言語(yǔ)法上更為相似,其內(nèi)部機(jī)理和之前構(gòu)造函數(shù)-原型模式本質(zhì)上是一樣的。但是,es6 類(lèi)的特性依然是值得掌握的,它使得js語(yǔ)言更加的嚴(yán)謹(jǐn),消除了一些可能導(dǎo)致出錯(cuò)的狀況。
語(yǔ)法類(lèi)的創(chuàng)建依賴(lài)于class和constructor兩個(gè)關(guān)鍵字,下面介紹下類(lèi)創(chuàng)建的語(yǔ)法。
創(chuàng)建自定義類(lèi)型看下面一段代碼:
class Person{ constructor(name, age){ this.name = name; this.age = age; } sayName(){ console.log(this.name); } }
上面代碼使用class創(chuàng)建了一個(gè)自定義類(lèi)型Person,constructor是這個(gè)類(lèi)的構(gòu)造器,sayName是類(lèi)的公共方法。它和下面一段代碼是等價(jià)的。
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayName = function(){ console.log(this.name); }
二者在使用上完全相同,比如:創(chuàng)建一個(gè)Person的實(shí)例 new Person("icode007")等。一些小的差別主要有下面幾點(diǎn):
使用class創(chuàng)建的類(lèi)只能使用new來(lái)調(diào)用,而后者可以作為普通函數(shù)調(diào)用。
class沒(méi)有聲明提升,后者作為函數(shù)會(huì)有聲明提升。
類(lèi)聲明中的代碼自動(dòng)運(yùn)行在嚴(yán)格模式下。
類(lèi)的所有方法都是不可枚舉的。
類(lèi)表達(dá)式與函數(shù)類(lèi)似,類(lèi)也具有兩種形式,類(lèi)聲明和類(lèi)表達(dá)式。
let Person = class{ constructor(name, age){ this.name = name; this.age = age; } sayName(){ console.log(this.name); } } let person = new Person("icode007");
類(lèi)表達(dá)式在使用上與類(lèi)聲明幾乎沒(méi)有區(qū)別。
類(lèi)的訪問(wèn)器屬性使用get和set關(guān)鍵字可以為類(lèi)定義訪問(wèn)器屬性。
let Person = class{ constructor(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; } get fullname(){ return this.firstname + this.lastname; } set fullname(name){ var arr = name.split(" "); this.firstname = arr[0]; this.lastname = arr[arr.length - 1]; } } let person = new Person("nicholas", "zakas"); console.log(person.fullname);類(lèi)的靜態(tài)成員
要定義類(lèi)的靜態(tài)方法,只需要在公共方法定義前加static關(guān)鍵字即可。如:
let Person = class{ constructor(firstname, lastname){ this.firstname = firstname; this.lastname = lastname; } static getFullname(){ return this.firstname + this.lastname; } }
要使用該靜態(tài)方法,需要直接在類(lèi)上調(diào)用,比如Person.getFullname()。
類(lèi)的繼承es6的類(lèi)使用extends來(lái)實(shí)現(xiàn)繼承。例如:
class Rectangle{ constructor(length,width){ this.length = length; this.width = width; } getArea(){ return this.length * this.width; } } class Square extends Rectangle { constructor(length){ super(length, length); } getPerimeter(){ return this.length * 4; } } var sqr = new Square(5); console.log(sqr.getArea()
上面代碼中,類(lèi)Square繼承了Rectangle類(lèi),所以實(shí)例sqr同樣具有g(shù)etArea()方法。 同時(shí)sqr添加了自己的getPerimeter方法。并重寫(xiě)了構(gòu)造器constructor。
注意事項(xiàng)在使用類(lèi)繼承的實(shí)現(xiàn)中,需要注意的點(diǎn)是:
如果子類(lèi)沒(méi)有重寫(xiě)constructor方法,默認(rèn)會(huì)調(diào)用父類(lèi)的構(gòu)造器方法。
如果重寫(xiě)了constructor方法,那么需要顯式的調(diào)用父類(lèi)的構(gòu)造器方法,即super(arg...),并且super()調(diào)用一定要放到構(gòu)造器的最前面(準(zhǔn)確的說(shuō)是在使用this前需要調(diào)用super)。
父類(lèi)的靜態(tài)成員同樣會(huì)被繼承到子類(lèi)上。
最佳實(shí)踐es6的類(lèi)的語(yǔ)法比較易于掌握,推薦在實(shí)際開(kāi)發(fā)中,多使用class來(lái)創(chuàng)建自定義類(lèi)型。 首先會(huì)使關(guān)于類(lèi)的信息都包裹在一個(gè)class{}中,也會(huì)使得js中的類(lèi)與其他語(yǔ)言的類(lèi)的語(yǔ)法更加的統(tǒng)一。
更多關(guān)于es6的內(nèi)容,可以關(guān)注右側(cè)專(zhuān)欄 - 學(xué)習(xí)ES6。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/93351.html
摘要:的類(lèi)使用熟悉的關(guān)鍵字指定類(lèi)繼承的函數(shù),并且可以通過(guò)方法訪問(wèn)父類(lèi)的構(gòu)造函數(shù)。例如繼承一個(gè)的類(lèi)繼承了,術(shù)語(yǔ)上稱(chēng)為基類(lèi),為派生類(lèi)。例如注意到上例中,不僅是派生類(lèi)的實(shí)例,也是派生類(lèi)的實(shí)例,內(nèi)建對(duì)象繼承的實(shí)用之處是改變返回對(duì)象的類(lèi)型。 和其它面向?qū)ο缶幊陶Z(yǔ)言一樣,ES6 正式定義了 class 類(lèi)以及 extend 繼承語(yǔ)法糖,并且支持靜態(tài)、派生、抽象、迭代、單例等,而且根據(jù) ES6 的新特性衍...
摘要:一步,一步前進(jìn)一步深入淺出之。是構(gòu)造函數(shù),可在里面初始化我們想初始化的東西。類(lèi)靜態(tài)方法大多數(shù)情況下,類(lèi)是有靜態(tài)方法的。中添加類(lèi)方法十分容易類(lèi)方法和靜態(tài)方法是同一個(gè)東西在的語(yǔ)法中,我們可以使用關(guān)鍵字修飾方法,進(jìn)而得到靜態(tài)方法。 一步,一步前進(jìn)の一步 ES6深入淺出之Classes。翻譯的同時(shí)亂加個(gè)人見(jiàn)解,強(qiáng)烈推薦閱讀原作者的文章,言簡(jiǎn)意賅。es6-classes-in-depth 類(lèi)語(yǔ)...
摘要:生成的類(lèi)的原型會(huì)被自動(dòng)調(diào)整,而你還能調(diào)用方法來(lái)訪問(wèn)基類(lèi)的構(gòu)造器。唯一能避免調(diào)用的辦法,是從類(lèi)構(gòu)造器中返回一個(gè)對(duì)象。 起源 JS 從創(chuàng)建之初就不支持類(lèi),也沒(méi)有把類(lèi)繼承作為定義相似對(duì)象以及關(guān)聯(lián)對(duì)象的主要方式,這讓不少開(kāi)發(fā)者感到困惑。而從 ES1 誕生之前直到ES5 時(shí)期,很多庫(kù)都創(chuàng)建了一些工具,讓 JS 顯得貌似能支持類(lèi)。盡管一些 JS 開(kāi)發(fā)者強(qiáng)烈認(rèn)為這門(mén)語(yǔ)言不需要類(lèi),但為處理類(lèi)而創(chuàng)建的代...
摘要:不同于其他面向?qū)ο笳Z(yǔ)言,以前的中中沒(méi)有類(lèi)的概念,主要是通過(guò)原型的方式來(lái)實(shí)現(xiàn)繼承,中引入了原型鏈,并且將原型鏈用來(lái)實(shí)現(xiàn)繼承,其核心是利用原型使得一個(gè)對(duì)象繼承另一個(gè)對(duì)象的方法和屬性,中原型繼承的關(guān)鍵是將一個(gè)實(shí)例的原型對(duì)象指向另一個(gè)實(shí)例,因此前一 不同于其他面向?qū)ο笳Z(yǔ)言,ES6以前的JavaScript中中沒(méi)有class類(lèi)的概念,主要是通過(guò)原型的方式來(lái)實(shí)現(xiàn)繼承,JavaScript中引入了原...
摘要:使用類(lèi)創(chuàng)建實(shí)例對(duì)象也是直接對(duì)類(lèi)使用命令,跟中構(gòu)造函數(shù)的用法一致。中沒(méi)有構(gòu)造函數(shù),作為構(gòu)造函數(shù)的語(yǔ)法糖,同時(shí)有屬性和屬性,因此同時(shí)存在兩條繼承鏈。子類(lèi)的屬性,表示構(gòu)造函數(shù)的繼承,總是指向父類(lèi)。 1 Class in ES6 ES6提出了類(lèi)(Class)的概念,讓對(duì)象的原型的寫(xiě)法更像面向?qū)ο笳Z(yǔ)言寫(xiě)法。 ES6中通過(guò)class定義對(duì)象,默認(rèn)具有constructor方法和自定義方法,但是包含...
閱讀 3779·2021-09-07 10:19
閱讀 3700·2021-09-03 10:42
閱讀 3650·2021-09-03 10:28
閱讀 2618·2019-08-29 14:11
閱讀 880·2019-08-29 13:54
閱讀 1652·2019-08-29 12:14
閱讀 480·2019-08-26 12:12
閱讀 3687·2019-08-26 10:45