這篇文章主要介紹了ES6新特性之類和繼承的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、大寧網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為大寧等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
一、類(Class)
1.基本語法
JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù),定義并生成新對(duì)象。下面是一個(gè)例子
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);
ES6提供了更接近傳統(tǒng)語言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板。通過class關(guān)鍵字,可以定義類?;旧希珽S6的class可以看作只是一個(gè)語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用ES6的“類”改寫,就是下面這樣。
//定義類 class Point { constructor(x, y) { //constructor 構(gòu)造方法 this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var p = new Point(1, 2);
構(gòu)造函數(shù)的prototype屬性,在ES6的“類”上面繼續(xù)存在。事實(shí)上,類的所有方法都還是定義在類的prototype屬性上面。
2.constructor方法
constructor方法是類的默認(rèn)方法,通過new命令生成對(duì)象實(shí)例時(shí),自動(dòng)調(diào)用該方法。一個(gè)類必須有constructor方法,如果沒有顯式定義,一個(gè)空的constructor方法會(huì)被默認(rèn)添加。
二、繼承(Extends)
Class之間可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承,這比ES5的通過修改原型鏈實(shí)現(xiàn)繼承,要清晰和方便很多。
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 調(diào)用父類的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 調(diào)用父類的toString() } }
上面代碼中,constructor方法和toString方法之中,都出現(xiàn)了super關(guān)鍵字,它在這里表示父類的構(gòu)造函數(shù),用來新建父類的this對(duì)象。
子類必須在constructor方法中調(diào)用super方法,否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悰]有自己的this對(duì)象,而是繼承父類的this對(duì)象,然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法,子類就得不到this對(duì)象。
三、原生構(gòu)造函數(shù)繼承
原生構(gòu)造函數(shù)是指語言內(nèi)置的構(gòu)造函數(shù),通常用來生成數(shù)據(jù)結(jié)構(gòu)。ECMAScript的原生構(gòu)造函數(shù)大致有下面這些。以前,這些原生構(gòu)造函數(shù)是無法繼承的。
Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
ES6允許繼承原生構(gòu)造函數(shù)定義子類,因?yàn)镋S6是先新建父類的實(shí)例對(duì)象this,然后再用子類的構(gòu)造函數(shù)修飾this,使得父類的所有行為都可以繼承。下面是一個(gè)繼承Array的例子。
class MyArray extends Array { constructor(...args) { super(...args); } } var arr = new MyArray(); arr[0] = 12; arr.length // 1 arr.length = 0; arr[0] // undefined
上面代碼定義了一個(gè)MyArray類,繼承了Array構(gòu)造函數(shù),因此就可以從MyArray生成數(shù)組的實(shí)例。這意味著,ES6可以自定義原生數(shù)據(jù)結(jié)構(gòu)(比如Array、String等)的子類,這是ES5無法做到的。
四、Class的Generator方法
如果某個(gè)方法之前加上星號(hào)(*),就表示該方法是一個(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
上面代碼中,F(xiàn)oo類的Symbol.iterator方法前有一個(gè)星號(hào),表示該方法是一個(gè)Generator函數(shù)。Symbol.iterator方法返回一個(gè)Foo類的默認(rèn)遍歷器,for...of循環(huán)會(huì)自動(dòng)調(diào)用這個(gè)遍歷器。
五、Class的靜態(tài)方法
類相當(dāng)于實(shí)例的原型,所有在類中定義的方法,都會(huì)被實(shí)例繼承。如果在一個(gè)方法前,加上static關(guān)鍵字,就表示該方法不會(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 not a function
上面代碼中,F(xiàn)oo類的classMethod方法前有static關(guān)鍵字,表明該方法是一個(gè)靜態(tài)方法,可以直接在Foo類上調(diào)用(Foo.classMethod()),而不是在Foo類的實(shí)例上調(diào)用。如果在實(shí)例上調(diào)用靜態(tài)方法,會(huì)拋出一個(gè)錯(cuò)誤,表示不存在該方法。
父類的靜態(tài)方法,可以被子類繼承。
class Foo { static classMethod() { return 'hello'; } } class Bar extends Foo { } Bar.classMethod(); // 'hello'
上面代碼中,父類Foo有一個(gè)靜態(tài)方法,子類Bar可以調(diào)用這個(gè)方法。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“ES6新特性之類和繼承的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
當(dāng)前名稱:ES6新特性之類和繼承的示例分析
轉(zhuǎn)載注明:http://bm7419.com/article26/igdpjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)