JS面向物件程式設計——ES6 中class的繼承用法詳解
本文例項講述了 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關鍵字不僅可以用來繼承類,還可以用來繼承原生的建構函式。因此可以在原生資料結構的基礎上,定義自己的資料結構。
vue使用
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程式設計有所幫助。