国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

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

js學習筆記之class類、super和extends關鍵詞

瀏覽:99日期:2024-03-21 16:52:11
目錄前言1.es6之前創建對象2.es6之后class的聲明3.類的繼承4.繼承類的靜態成員寫在最后前言

JavaScript 語言在ES6中引入了 class 這一個關鍵字,在學習面試的中,經常會遇到面試官問到談一下你對 ES6 中class的認識,同時我們的代碼中如何去使用這個關鍵字,使用這個關鍵字需要注意什么,這篇來總結一下相關知識點。

正文

1.es6之前創建對象

先來看下es6之前我們要想創建一個對象,只能通過構造函數的方式來創建,將靜態方法添加在原型上面使得每一個實例能夠調用該方法。

function Person(name, age) { this.name = name this.age = age Person.prototype.sayHello = function () {return 'hello,' + this.name + ',早上好' }}let person = new Person('serendipity', 18)console.log(person.sayHello())//hello,serendipity,早上好console.log(person instanceof Person);//trueconsole.log(person instanceof Object);//true2.es6之后class的聲明

類是用于創建對象的模板,他們用代碼封裝數據以處理該數據。js中的 class 類建立在原型之上,但也具有某些語法和語義與ES5類相似語義共享。

實際上,類是一種特殊的函數,就像定義函數聲明和函數表達式一樣,類的語法也有兩個部分組成:類聲明和類表達式。

class Person { constructor(name, age) {//自有屬性,該屬性出現在實例上,只能在類的構造器或者方法內部進行創建this.name = namethis.age = age } sayHello() {//等價于Perosn.prototype.sayHelloreturn `hello,${this.name},早上好` }}let person = new Person('serendipity', 18)console.log(person.sayHello());//hello,serendipity,早上好console.log(person instanceof Person);//trueconsole.log(person instanceof Object);//trueconsole.log(typeof Person);//functionconsole.log(typeof Person.prototype.sayHello);//function

類聲明允許在class中使用 constructor 方法定義一個構造器,而不需要定義專門的構造方法來當構造器使用。

class 類的語法與普通es5之前的函數語法相似,但是還存在一些特性需要注意:

(1)類的聲明不會被提升,類的聲明行為和 let 相似,因此執行時類會存在暫時性死區;

(2)類中所有代碼自動運行在嚴格模式下,且改嚴格模式無法退出

(3) 類中所有方法都是不可枚舉的,普通自定義方法只有通過 object.defineProperty() 才能將方法定義為不可枚舉

(4)類中的所有方法內部都沒有 [[construct]] ,因此使用new 來調用他們會拋出錯誤

(5)調用類構造器時不使用 new 會拋出錯誤

(6)試圖在類的方法內部重寫類名會拋出錯誤

將上面的代碼轉換為ES5之前的寫法如下:

let PersonClass = (function () { 'use strict' const PersonClass = function (name, age) {// 判斷是否被new調用構造函數if (typeof new.target === 'undefined') { throw new Error('Constructor must be call with new.')}this.name = namethis.age = age } Object.defineProperty(PersonClass.prototype, 'sayHello', {value: function () { if (typeof new.target !== 'undefined') {//保正調用時沒有使用newthrow new Error('Method cannot be called with new.') } return 'hello,' + this.name + ',早上好!'},enumerable: false,configurable: true,writable: true }) return PersonClass})()var personClass = new PersonClass('serendipity', 18)console.log(personClass.name);//serendipityconsole.log(personClass.sayHello());///hello,serendipity,早上好!

兩個PersonClass 聲明,一個在外部作用域的 let 聲明,另一個在立即執行函數內部的 const 聲明,這就是為何類的方法不能對類名進行重寫,而類的外部的代碼則被允許。同時,只在類的內部類名才被視為使用了const聲明,這意味著你可以在外部(相當于let)重寫類名,但是不能在類的方法內部這么寫。

3.類的繼承

ES6之前的繼承方式主要通過構造函數和原型鏈組合的方式來實現繼承,具體代碼如下:

function Rectangle(length, width) { this.length = length this.width = width Rectangle.prototype.getArea = function () {return this.length * this.width }}function Square(length) { Rectangle.call(this, length, length)}Square.prototype = Object.create(Rectangle.prototype, { constructor: {value: Square,enumerble: true,writeable: true,configurable: true }})var square = new Square(3)console.log(square.getArea());//9console.log(square instanceof Square);//trueconsole.log(square instanceof Rectangle);//true

上面的代碼通過構造函數和原型上面添加靜態方法實現了 Rectangle 父類,然后子類 Square 通過 Rectangle.call(this,length,length) 調用了父類的構造函數,Object.create 會在內部創建一個空對象來連接兩個原型對象,再手動將 constructor 指向自身。這種方法實現繼承代碼繁雜且不利用理解,于是ES6 class 類的創建讓繼承變得更加簡單,使用extends 關鍵字來指定當前類所需要繼承的父類,生成的類的原型會自動調整,還可以使用 super() 方法來訪問基類的構造器。具體代碼如下:

class Rectangle { constructor(length, width) {this.length = lengththis.width = width } getArea() {return this.length * this.width }}class Square extends Rectangle { constructor(length) {super(length, length) } getArea() {return this.length + this.length }}var square = new Square(3)console.log(square.getArea());//6console.log(square instanceof Square);//trueconsole.log(square instanceof Rectangle);//true

上面的代碼中 Square 類重寫了基類的 getArea() 方法,當派生的子類中函數名和基類中函數同名的時候,派生類的方法會屏蔽基類的方法,同時也可以再子類中getArea () { return super.getArea() }中調用基類的方法進行擴展。

4.繼承類的靜態成員

靜態成員:直接在構造器上添加的額外的方法。例如ES5中在原型上添加的方法就屬于靜態成員,ES6 class類引入簡化了靜態成員的創建,只需要在方法與訪問器屬性的名稱前添加 static關鍵字即可。例如下面的代碼用于區分靜態方法和實例方法。

function PersonType(name) {this.name = name; } // 靜態方法 PersonType.create = function(name) {return new PersonType(name); }; // 實例方法 PersonType.prototype.sayName = function() {console.log(this.name); };var person = PersonType.create('Nicholas');

在ES6中要想使用靜態成員如下:

class Rectangle { constructor(length ,width) {this.length = lengththis.width = width } getArea() {return this.length * this.width } static create(length,width) {return new Rectangle(length , width) }}class Square extends Rectangle{ constructor (length){super(length,length) }}var square =Square.create(3,4)console.log(square.getArea());//12console.log(square instanceof Square);//falseconsole.log(square instanceof Rectangle);//true

上面的代碼中,一個新的靜態方法 create() 被添加到 Rectangle 類中,通過繼承,以Square.create() 的形式存在,并且其行為方式與Rectangle.create() 一樣。需要注意靜態成員不懂通過實例來訪問,始終需要直接調用類自身來訪問他們。

寫在最后

以上就是本文的全部內容,希望給讀者帶來些許的幫助和進步,方便的話點個關注,小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: bt天堂国产亚洲欧美在线 | 特级aa一级欧美毛片 | 偷偷操不一样的久久 | 最近中文在线中文 | 精品一区二区三区免费站 | 久久频这里精品99香蕉久 | 久草精品视频 | 中文字幕免费观看 | 欧美大片在线观看成人 | 国产日韩欧美精品一区二区三区 | 国产不卡在线观看视频 | 国产亚洲综合在线 | 亚洲精品成人一区二区 | 国产精品久久久免费视频 | 欧美一级久久 | 久久久久久久91精品免费观看 | 国产不卡a| 亚洲国产成人最新精品资源 | 欧美—级v免费大片 | 成人午夜影院 | 精品一精品国产一级毛片 | 男人亚洲天堂 | 久草手机在线视频 | 免费中文字幕 | 欧美成人tv在线观看免费 | 一级不卡毛片免费 | 久久成年片色大黄全免费网站 | 超级碰碰碰视频视频在线视频 | 91香蕉嫩草| 看5xxaaa免费毛片 | 欧美高清视频手机在在线 | 欧美日韩一区二区在线观看视频 | 国产精品日韩欧美在线第3页 | 国产一区曰韩二区欧美三区 | 亚洲专区一 | 国产精品亚洲精品久久成人 | 特黄大片aaaaa毛片 | 99久久精品国产一区二区 | 久久爱噜噜噜噜久久久网 | 韩日一区二区 | 欧美怡红院免费的视频 |