溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了 ES6 中class的繼承用法。分享給大家供大家參考，具體如下：
JS是一種基于對象的語言，要實現面向對象，寫法跟傳統的面向對象有很大的差異。ES6引入了Class語法糖，使得JS的繼承更像面向對象語言的寫法。
此篇博客，分為：基本介紹、Vue使用案例
Class可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多；
class Father {
}
class Son extends Father {
}
代碼定義了一個Son 類，該類通過extends關鍵字，繼承了Father類的所有屬性和方法，但是由于沒有部署任何代碼,所以這兩個類完全一樣，等于復制了一個Father類。
class Son extends Father {
constructor (name,age,city) {
super(name,age);//調用父類的constructor(name,age);
this.city = city;
}
toString () {
return this.city+ " " +super.toString();//調用父類的toString()
}
}
constructor方法和toString方法之中，都出現了super關鍵字，他在這里表示父類的構造函數，用來新建父類的this對象；
子類必須在constructor方法中調用super方法，否則新建實例時會報錯，這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工，如果不調用super方法，子類就得不到this對象；
class Father { }
class Son extends Father {
constructor(){ }
}
let s = new Son();
//referenceError : this is not defined
Son繼承了父類Fatherm,但是他的構造函數沒有調用super方法，這導致新建實例時報錯；
ES5的繼承，實質是先創造子類的實例對象this，然后再將父類的方法添加到this上（Parent.apply(this)）,ES6的繼承機制完全不同，實質是先創造父類的實例對象this（所以必須先調用super方法）,然后再用子類的構造函數修改this；
如果子類沒有定義constructor方法，這個方法會默認添加，也就是說，不管有沒有顯式定義，任何一個子類都有constructor方法。
class Son extends Father {
}
//等同于
class Son extends Parent {
constructor(...args) {
super(...args);
}
}
另一個需要注意的是：在子類的構造函數中，只有調用super之后，才能使用this關鍵字，否則會報錯。這是因為子類實例的構建，是基于對父類實例加工，只有super方法才能返回父類實例；
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
子類的constructor方法沒有調用super之前，就使用this關鍵字，結果報錯，而放在super方法之后就是正確的；
Object.getPrototypeOf()方法用來從子類上獲取父類
Object.getPrototypeOf( Son ) ===Father //true //因此可以用這個方法判斷，一個類是否繼承了另一類
super 關鍵字
super這個關鍵字，既可以當作函數使用，也可以當作對象使用，
（1）第一情況是：super當作函數調用時，代表父類的構造函數，ES6要求，子類的構造函數必須執行一個super函數；
class Father { }
class Son extends Father {
constructor () {
super();
}
}
//子類Son的構造函數之中的super()，代表調用父類的構造函數。這是必須的，否則 JavaScript 引擎會報錯。
super雖然代表了父類Father的構造函數，但是返回的是子類Son的實例，即super內部的this指向的是Son，因此super()在這里相當于Father.constructor.call(this)；
而且作為函數時，super()只能用在子類的構造函數中，在其他地方會報錯；
class A {
constructor (){
console.log(new.target.name);
}
}
class B extends A {
constructor () {
super();
}
}
new A()//A
new B()//B
new.target指向當前正在執行的函數，在super()執行時，他指向的是子類B的構造函數，而不是父類A的構造函數，super()內部的this指向的是B；
（2）第二種情況，super作為對象時，在普通方法中，指向父類的原型對象，在靜態方法中，指向父類；
class Father{
getName ( ) {
return "MGT360124";
}
}
class Son extends Father {
constructor () {
super();
console.log(super.getName() ) //“MGT360124”
}
}
let s = new Son();
子類Son中的super.p()就是將super當作一個對象使用，這時,super在普通方法中，指向Father.prototype,所以super.getName()就相當于Father.prototype.getName();//"MGT360124"，由于super指向父類的原型對象，所以定義在父類實例上的方法或者屬性，是無法通過super調用的；
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是父類Father實例的屬性，super.p就引用不到它
如果屬性定義在父類的原型對象上，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 規定，通過super調用父類的方法時，super會綁定子類的this。
class Father {
constructor () {
this.x =1;//這個this指向的是Father對象的實例
}
print () {
console.log(this.x);
}
}
class Son extends Father {
constructor () {
super();
this.x = 2;//這個this指向的是Son對象的實例
}
m() {
super.print();
}
}
let s = new Son();
s.m();
//2
super.print()雖然調用的是Father.prototype.print()，但是Father.prototype.print()會綁定子類Son的this，導致輸出的是2，而不是1，也就是說，實際上執行的是 super.print.call(this)。
如果super作為對象，用在靜態方法中，這時super將指向父類，而不是父類的原型對象；
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 1
var child = new Child();
child.myMethod(2);
//instance 2
super在靜態方法之中指向父類，在普通方法之中指向父類的原型對象。
注意，使用super的時候，必須顯式指定是作為函數、還是作為對象使用，否則會報錯。
類的prototype屬性和proto屬性
大多數瀏覽器的ES5實現之中，每一個對象都有proto屬性，指向對應的構造函數的prototype屬性，class作為構造函數的語法糖，同時有prototype屬性和proto屬性，因此同時存在兩條繼承鏈；
（1）子類的proto屬性，表示構造函數的繼承，總是指向父類；
（2）子類prototype屬性的proto屬性，表示方法的繼承，總是指向父類的prototype屬性；
class A{
}
class B{
}
//B的實例繼承A的實例
Object.setPrototypeOf(B.prototype, A.prototype);
//B 的實例繼承A的靜態屬性
Object.setPrototypeOf(B,A);
const b = new B();
《對象的擴展》一章中Object.setPrototypeOf()方法的實現：
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;
這兩條繼承鏈，可以理解為：作為一個對象，子類B的原型（proto屬性）是父類（A）；作為一個構造函數，子類B的原型對象（prototype屬性）是父類的原型對象（prototype）的實例；
extends的繼承目標
extends關鍵字后面可以跟很多類型的值；
class B extends A{
}
只要A有一個prototype屬性的函數，就能被B繼承，由于函數都有prototype屬性（除了Function.prototype函數）,因此A可以使任意函數，下面三種情況：
（1）子類繼承Object類
class A extends Object {
}
A.__proto__ === Object //true;
A.prototype.__proto__ === Object.prototype //true
這種情況就是 ： A就是構造函數Object的復制，A的實例就是Object的實例
（2）不存在任何繼承
class A {
}
A.__proto__ === Function.prototype //true
A.prototype.__proto__ = Object.prototype //true
這種情況是：A作為一個基類（不存在任何繼承）,就是一個普通的函數，所以直接繼承Function.prototype。但是A調用后返回一個空對象（即Object實例），所以A.prototype.proto指向構造函數（Object）的prototype屬性；
實例的proto屬性
子類實例的proto屬性的proto屬性，指向父類實例的proto屬性。也就是說，子類的原型的原型，是父類的原型。
原生構造函數的繼承
原生構造函數是指語言內置的構造函數，通常用來生成數據結構。
Boolean() Number() String() Array() Date() Function() RegExp() Error() Object()
extends關鍵字不僅可以用來繼承類，還可以用來繼承原生的構造函數。因此可以在原生數據結構的基礎上，定義自己的數據結構。
testClass.js
//定義類
class Person{
// 構造
constructor(x,y){
this.x = x;
this.y = y;
}
//定義在類中的方法不需要添加function
toString(){
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的方式得到一個實例對象
let person = new Person('張三',12);
text.innerHTML=person.toString();//張三的年齡是12歲
console.log(typeof Person);//function
}
}
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
