成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術文章
文章詳情頁

JS面向對象編程——ES6 中class的繼承用法詳解

瀏覽:181日期:2024-05-22 11:53:52

本文實例講述了 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 1var 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 //trueA.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; } //定義在類中的方法不需要添加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的方式得到一個實例對象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程序設計有所幫助。

標簽: JavaScript
相關文章:
成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久
欧美性生活久久| 男男成人高潮片免费网站| 精品国产一区二区在线观看| 亚洲色图欧美偷拍| 九色|91porny| 不卡的电视剧免费网站有什么| 国产亚洲成人一区| 欧美一区二区三区在线视频 | 日韩一区有码在线| 久久国内精品视频| 亚洲精品韩国| 精品少妇一区二区三区视频免付费| 一区二区三区在线免费观看| 丁香激情综合国产| 一本色道久久综合精品竹菊| 国产精品美女久久久久久久| 韩国三级中文字幕hd久久精品| 亚洲精品精选| 精品粉嫩超白一线天av| 久久国产精品无码网站| 一区三区视频| 精品毛片乱码1区2区3区 | 亚洲一区二区精品久久av| 成人福利视频网站| 欧洲生活片亚洲生活在线观看| 1024国产精品| 99精品在线免费| 欧美精品自拍偷拍动漫精品| 亚洲一区二区偷拍精品| 国内精品久久久久久久97牛牛| 欧美一区二区视频观看视频| 亚洲午夜私人影院| 亚洲欧洲午夜| 欧美精品一卡两卡| 午夜精品一区二区三区电影天堂| 欧美日韩综合| 欧美精品一区二区精品网| 国产在线视频精品一区| 国产午夜精品久久| 久久久久免费| 一区二区视频免费在线观看| 欧美日韩精品免费观看视频完整| 91精品国产高清一区二区三区蜜臀 | 日韩午夜激情视频| 一区二区久久久久久| 91亚洲男人天堂| 日韩视频永久免费| 国产专区综合网| 色婷婷狠狠综合| 亚洲一区二区黄色| 影音先锋一区| 久久精品视频在线免费观看| 国产高清一区日本| 欧美亚洲另类激情小说| 天天色 色综合| 国产精品午夜av在线| 国产精品五月天| 99久久久精品| 精品国产一区二区三区久久影院| 久久成人综合网| 在线免费不卡电影| 天堂一区二区在线| 老鸭窝毛片一区二区三区| 一区二区三区小说| 在线欧美一区| 国产精品久久久久久久久免费相片 | 久久久久国产免费免费| 亚洲综合色丁香婷婷六月图片| 国产精品v日韩精品v欧美精品网站| 精品乱人伦小说| 国产盗摄一区二区| 91精品久久久久久久91蜜桃| 国产一区二区导航在线播放| 在线不卡的av| 国内精品免费**视频| 欧美丰满嫩嫩电影| 国产一区二区电影| 91精品综合久久久久久| 国产盗摄精品一区二区三区在线 | 久久综合久久99| 粉嫩av亚洲一区二区图片| 欧美一区二区大片| 国产福利一区二区三区视频| 欧美丰满美乳xxx高潮www| 国产精品一区在线| 日韩女优制服丝袜电影| 99精品国产99久久久久久白柏 | 日韩一级精品视频在线观看| 国产99久久久国产精品潘金| 日韩欧美高清一区| 99re热视频精品| 国产日韩视频一区二区三区| 国精品一区二区三区| 久久久影院官网| 欧美国产精品| 成人免费在线视频| 亚洲国产国产亚洲一二三| 一区二区三区在线免费观看| 在线视频精品一区| 午夜久久久久久| 玖玖精品视频| 国产综合成人久久大片91| 欧美一级生活片| 99视频超级精品| 国产精品不卡在线| 亚洲欧美日韩国产一区| 美女一区二区视频| 欧美自拍丝袜亚洲| 岛国精品在线观看| 欧美激情一区二区三区蜜桃视频| 狠狠色丁香久久综合频道| 一区二区三区在线播放| 免费欧美在线| 美女免费视频一区| 日韩欧美精品在线| 国产精品九九| 亚洲一区二区中文在线| 日本道色综合久久| 国产69精品久久久久毛片| 国产视频视频一区| 国产日韩亚洲| 久久99久久久欧美国产| 欧美www视频| 91丨porny丨蝌蚪视频| 亚洲人成影院在线观看| 久久久久综合| 国产suv精品一区二区883| 国产精品午夜电影| 久久精品一区二区三区中文字幕| 亚洲成人中文在线| 欧美日韩亚洲国产精品| 亚洲免费观看高清完整版在线| 色88888久久久久久影院野外| 国产99久久久国产精品潘金| 国产精品美女久久久久久2018 | 国产欧美一区二区三区国产幕精品| 亚洲成人精品一区| 91麻豆精品国产91久久久久久久久| 91网上在线视频| 亚洲不卡一区二区三区| 91精品国产高清一区二区三区 | 在线国产亚洲欧美| 大尺度一区二区| 亚洲婷婷综合久久一本伊一区| 老司机午夜精品视频| zzijzzij亚洲日本少妇熟睡| 亚洲综合免费观看高清完整版 | 亚洲色图都市小说| 欧美综合天天夜夜久久| 99精品国产视频| 亚洲午夜久久久久久久久电影网 | 伊人一区二区三区| 欧美精三区欧美精三区| 欧美日韩蜜桃| 九九久久精品视频| 国产欧美久久久精品影院| 美玉足脚交一区二区三区图片| 久久国产尿小便嘘嘘尿| 国产精品全国免费观看高清| 欧美影片第一页| 伊人久久婷婷| 国产又黄又大久久| 亚洲欧美另类小说| 日韩西西人体444www| 国产精品久久久久久模特| 成人夜色视频网站在线观看| 一区二区免费看| 欧美日韩一区二区在线视频| 欧美精品18| 久久99精品久久久久| 亚洲婷婷在线视频| 91精品国产综合久久久久久久久久 | 欧美高清视频一区| 日韩激情视频网站| 国产三级三级三级精品8ⅰ区| 久久资源av| 韩国亚洲精品| 国产69精品久久久久毛片| 亚洲成人av免费| 国产精品色婷婷| 欧美一区二区观看视频| 性欧美videos另类喷潮| 91麻豆蜜桃一区二区三区| 免费视频一区二区| 国产精品伦理一区二区| 欧美专区日韩专区| 99精品国产福利在线观看免费 | 亚洲三级影院| 成人精品免费网站| 日韩av中文字幕一区二区三区| 国产精品久久久久久亚洲毛片 | 国产精品一区免费视频| 亚洲成av人**亚洲成av**| 国产精品久久久久久久第一福利 | 91精品国产黑色紧身裤美女| 色综合久久88色综合天天| 99精品视频免费观看视频| 成人av电影在线网| 蜜桃久久久久久久| 婷婷亚洲久悠悠色悠在线播放 |