本文實(shí)例講述了 ES6 中class的繼承用法。分享給大家供大家參考，具體如下：

JS是一種基于對(duì)象的語(yǔ)言，要實(shí)現(xiàn)面向?qū)ο螅瑢?xiě)法跟傳統(tǒng)的面向?qū)ο笥泻艽蟮牟町悺S6引入了Class語(yǔ)法糖，使得JS的繼承更像面向?qū)ο笳Z(yǔ)言的寫(xiě)法。

此篇博客，分為：基本介紹、Vue使用案例

Class可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多；

class Father { }class Son extends Father {}

代碼定義了一個(gè)Son 類(lèi)，該類(lèi)通過(guò)extends關(guān)鍵字，繼承了Father類(lèi)的所有屬性和方法，但是由于沒(méi)有部署任何代碼,所以這兩個(gè)類(lèi)完全一樣，等于復(fù)制了一個(gè)Father類(lèi)。

class Son extends Father { constructor (name,age,city) {super(name,age);//調(diào)用父類(lèi)的constructor(name,age);this.city = city; } toString () { return this.city+ ' ' +super.toString();//調(diào)用父類(lèi)的toString() }}

constructor方法和toString方法之中，都出現(xiàn)了super關(guān)鍵字，他在這里表示父類(lèi)的構(gòu)造函數(shù)，用來(lái)新建父類(lèi)的this對(duì)象；

子類(lèi)必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)，這是因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，而是繼承父類(lèi)的this對(duì)象，然后對(duì)其進(jìn)行加工，如果不調(diào)用super方法，子類(lèi)就得不到this對(duì)象；

class Father { } class Son extends Father { constructor(){ }}let s = new Son();//referenceError : this is not defined

Son繼承了父類(lèi)Fatherm,但是他的構(gòu)造函數(shù)沒(méi)有調(diào)用super方法，這導(dǎo)致新建實(shí)例時(shí)報(bào)錯(cuò)；ES5的繼承，實(shí)質(zhì)是先創(chuàng)造子類(lèi)的實(shí)例對(duì)象this，然后再將父類(lèi)的方法添加到this上（Parent.apply(this)）,ES6的繼承機(jī)制完全不同，實(shí)質(zhì)是先創(chuàng)造父類(lèi)的實(shí)例對(duì)象this（所以必須先調(diào)用super方法）,然后再用子類(lèi)的構(gòu)造函數(shù)修改this；如果子類(lèi)沒(méi)有定義constructor方法，這個(gè)方法會(huì)默認(rèn)添加，也就是說(shuō)，不管有沒(méi)有顯式定義，任何一個(gè)子類(lèi)都有constructor方法。

class Son extends Father {} //等同于class Son extends Parent { constructor(...args) { super(...args); }}

另一個(gè)需要注意的是：在子類(lèi)的構(gòu)造函數(shù)中，只有調(diào)用super之后，才能使用this關(guān)鍵字，否則會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇?lèi)實(shí)例的構(gòu)建，是基于對(duì)父類(lèi)實(shí)例加工，只有super方法才能返回父類(lèi)實(shí)例；

class Father { constructor (x,y) { this.x= x; this.y = y; }} class Son extends Father { constructor (x, y, color) { this.color =color ;//ReferenceError : this is not defined super(x,y); this.color = color;//正確 }} let s = new Son(25,8,'green');s instanceof Son //true s instanceof Father //true

子類(lèi)的constructor方法沒(méi)有調(diào)用super之前，就使用this關(guān)鍵字，結(jié)果報(bào)錯(cuò)，而放在super方法之后就是正確的；

Object.getPrototypeOf()方法用來(lái)從子類(lèi)上獲取父類(lèi)

Object.getPrototypeOf( Son ) ===Father//true//因此可以用這個(gè)方法判斷，一個(gè)類(lèi)是否繼承了另一類(lèi)

super 關(guān)鍵字super這個(gè)關(guān)鍵字，既可以當(dāng)作函數(shù)使用，也可以當(dāng)作對(duì)象使用，（1）第一情況是：super當(dāng)作函數(shù)調(diào)用時(shí)，代表父類(lèi)的構(gòu)造函數(shù)，ES6要求，子類(lèi)的構(gòu)造函數(shù)必須執(zhí)行一個(gè)super函數(shù)；

class Father { } class Son extends Father { constructor () { super(); }}//子類(lèi)Son的構(gòu)造函數(shù)之中的super()，代表調(diào)用父類(lèi)的構(gòu)造函數(shù)。這是必須的，否則 JavaScript 引擎會(huì)報(bào)錯(cuò)。

super雖然代表了父類(lèi)Father的構(gòu)造函數(shù)，但是返回的是子類(lèi)Son的實(shí)例，即super內(nèi)部的this指向的是Son，因此super()在這里相當(dāng)于Father.constructor.call(this)；而且作為函數(shù)時(shí)，super()只能用在子類(lèi)的構(gòu)造函數(shù)中，在其他地方會(huì)報(bào)錯(cuò)；

class A { constructor (){console.log(new.target.name); } } class B extends A { constructor () { super(); } } new A()//A new B()//B

new.target指向當(dāng)前正在執(zhí)行的函數(shù)，在super()執(zhí)行時(shí)，他指向的是子類(lèi)B的構(gòu)造函數(shù)，而不是父類(lèi)A的構(gòu)造函數(shù)，super()內(nèi)部的this指向的是B；

（2）第二種情況，super作為對(duì)象時(shí)，在普通方法中，指向父類(lèi)的原型對(duì)象，在靜態(tài)方法中，指向父類(lèi)；

class Father{ getName ( ) { return 'MGT360124'; }}class Son extends Father { constructor () { super(); console.log(super.getName() ) //“MGT360124” }}let s = new Son();

子類(lèi)Son中的super.p()就是將super當(dāng)作一個(gè)對(duì)象使用，這時(shí),super在普通方法中，指向Father.prototype,所以super.getName()就相當(dāng)于Father.prototype.getName();//'MGT360124'，由于super指向父類(lèi)的原型對(duì)象，所以定義在父類(lèi)實(shí)例上的方法或者屬性，是無(wú)法通過(guò)super調(diào)用的；

class Father { constructor () { this.p =2 }} class Son extends Father { get m ( ) { return super.p; } getValue ( ) { return super.a; }}let s = new Son();s.m//undefined

p是父類(lèi)Father實(shí)例的屬性，super.p就引用不到它

如果屬性定義在父類(lèi)的原型對(duì)象上，super就可以取到。

class A {}A.prototype.x = 2; class B extends A { constructor() { super(); console.log(super.x) // 2 }} let b = new B();

屬性x是定義在A.prototype上面的，所以super.x可以取到它的值。

ES6 規(guī)定，通過(guò)super調(diào)用父類(lèi)的方法時(shí)，super會(huì)綁定子類(lèi)的this。

class Father { constructor () { this.x =1;//這個(gè)this指向的是Father對(duì)象的實(shí)例 } print () { console.log(this.x); }} class Son extends Father { constructor () { super();this.x = 2;//這個(gè)this指向的是Son對(duì)象的實(shí)例 } m() { super.print(); }}let s = new Son();s.m();//2

super.print()雖然調(diào)用的是Father.prototype.print()，但是Father.prototype.print()會(huì)綁定子類(lèi)Son的this，導(dǎo)致輸出的是2，而不是1，也就是說(shuō)，實(shí)際上執(zhí)行的是 super.print.call(this)。

如果super作為對(duì)象，用在靜態(tài)方法中，這時(shí)super將指向父類(lèi)，而不是父類(lèi)的原型對(duì)象；

class Parent { static myMethod (msg) { console.log('static',msg);} myMethod (msg) { console.log('instance' ,msg);}} class Child extends Parent { static myMethod(msg) {super.myMethod(msg); } myMethod (msg) { super.myMethod(msg); } } Child.myMethod(1);//static 1var child = new Child();child.myMethod(2);//instance 2

super在靜態(tài)方法之中指向父類(lèi)，在普通方法之中指向父類(lèi)的原型對(duì)象。注意，使用super的時(shí)候，必須顯式指定是作為函數(shù)、還是作為對(duì)象使用，否則會(huì)報(bào)錯(cuò)。類(lèi)的prototype屬性和proto屬性大多數(shù)瀏覽器的ES5實(shí)現(xiàn)之中，每一個(gè)對(duì)象都有proto屬性，指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性，class作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有prototype屬性和proto屬性，因此同時(shí)存在兩條繼承鏈；（1）子類(lèi)的proto屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)；（2）子類(lèi)prototype屬性的proto屬性，表示方法的繼承，總是指向父類(lèi)的prototype屬性；

class A{}class B{}//B的實(shí)例繼承A的實(shí)例Object.setPrototypeOf(B.prototype, A.prototype); //B 的實(shí)例繼承A的靜態(tài)屬性O(shè)bject.setPrototypeOf(B,A); const b = new B();

《對(duì)象的擴(kuò)展》一章中Object.setPrototypeOf()方法的實(shí)現(xiàn)：

Object.setPrototypeOf = function (obj, proto) {obj.__proto__ = proto; return obj ;}

因此

Object.setPrototypeOf( B.prototype , A.prototype );//等同于B.prototype.__proto__ = A.prototype ; Object.setPrototypeOf(B, A);//等同于B.__proto__ = A;

這兩條繼承鏈，可以理解為：作為一個(gè)對(duì)象，子類(lèi)B的原型（proto屬性）是父類(lèi)（A）；作為一個(gè)構(gòu)造函數(shù)，子類(lèi)B的原型對(duì)象（prototype屬性）是父類(lèi)的原型對(duì)象（prototype）的實(shí)例；

extends的繼承目標(biāo)extends關(guān)鍵字后面可以跟很多類(lèi)型的值；

class B extends A{}

只要A有一個(gè)prototype屬性的函數(shù)，就能被B繼承，由于函數(shù)都有prototype屬性（除了Function.prototype函數(shù)）,因此A可以使任意函數(shù)，下面三種情況：（1）子類(lèi)繼承Object類(lèi)

class A extends Object {}A.__proto__ === Object //true;A.prototype.__proto__ === Object.prototype //true

這種情況就是 ： A就是構(gòu)造函數(shù)Object的復(fù)制，A的實(shí)例就是Object的實(shí)例（2）不存在任何繼承

class A {}A.__proto__ === Function.prototype //trueA.prototype.__proto__ = Object.prototype //true

這種情況是：A作為一個(gè)基類(lèi)（不存在任何繼承）,就是一個(gè)普通的函數(shù)，所以直接繼承Function.prototype。但是A調(diào)用后返回一個(gè)空對(duì)象（即Object實(shí)例），所以A.prototype.proto指向構(gòu)造函數(shù)（Object）的prototype屬性；實(shí)例的proto屬性子類(lèi)實(shí)例的proto屬性的proto屬性，指向父類(lèi)實(shí)例的proto屬性。也就是說(shuō)，子類(lèi)的原型的原型，是父類(lèi)的原型。

原生構(gòu)造函數(shù)的繼承原生構(gòu)造函數(shù)是指語(yǔ)言內(nèi)置的構(gòu)造函數(shù)，通常用來(lái)生成數(shù)據(jù)結(jié)構(gòu)。

Boolean()Number()String()Array()Date()Function()RegExp()Error()Object()

extends關(guān)鍵字不僅可以用來(lái)繼承類(lèi)，還可以用來(lái)繼承原生的構(gòu)造函數(shù)。因此可以在原生數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)上，定義自己的數(shù)據(jù)結(jié)構(gòu)。

testClass.js

//定義類(lèi)class Person{ // 構(gòu)造 constructor(x,y){ this.x = x; this.y = y; } //定義在類(lèi)中的方法不需要添加functiontoString(){ return (this.x + '的年齡是' +this.y+'歲'); } } export {Person};

test.vue

<template><div><p id='testJs'></p></div></template><script>import {Person} from ’./testClass.js’; export default { data() {return {}},mounted(){let text=document.getElementById('testJs');//使用new的方式得到一個(gè)實(shí)例對(duì)象let person = new Person(’張三’,12); text.innerHTML=person.toString();//張三的年齡是12歲console.log(typeof Person);//function }}</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。