es6中類和extends的本質(zhì)

URLOS 發(fā)布于2019-08-20 13:39 / 3026人閱讀

摘要：首先有一個(gè)地方就是把指向了本身，這里有什么用呢，的時(shí)候是指向一個(gè)這樣的匿名函數(shù)。我們平時(shí)使用的和就是存在這個(gè)匿名函數(shù)里的。

理解es6的類和extends的原理，主要是先理解es5里面函數(shù)和對(duì)象間的關(guān)系（__proto__和prototype的知識(shí)）

class c { 
   constructor(){} 
   //static f() {} 
   a() {} 
} 

class d extends c{
}

通過(guò)typeof打印我們知道，c和d本質(zhì)其實(shí)還是一個(gè)函數(shù).接下來(lái)我們看最開(kāi)始的地方c.prototype。

從圖中我們可以看出，我們?cè)赾lass c里面定義的東西其實(shí)都是定義在c的prototype里的，然后我們?cè)倏匆幌耫.__proto__。

從圖中我們可以知道，d的原型proto是等于函數(shù)c的，繼續(xù)，我們看看d的prototype屬性

??????從圖中我們可以看到d的prototype指向一個(gè)c生成的對(duì)象。并且我們可以通過(guò)打印看到雖然d.prototype指向了c，但是d.pototype.constructor === d是返回true的，這應(yīng)該是js引擎做了修改，這也和我們平時(shí)實(shí)現(xiàn)繼承時(shí)的做法一樣。所以es6的繼承其實(shí)是基于es5的方法的，只是寫(xiě)法變了，語(yǔ)法是為了方便我們寫(xiě)代碼，最后由js做轉(zhuǎn)化，但是也加了一些特性。
??????首先有一個(gè)地方就是把d.__proto__指向了c本身，這里有什么用呢，es5的時(shí)候d.__proto__是指向一個(gè)function(){}這樣的匿名函數(shù)。我們平時(shí)使用的call和apply就是存在這個(gè)匿名函數(shù)里的。es6這個(gè)做法我覺(jué)得應(yīng)該是為了支持static這個(gè)語(yǔ)法。在class c里面定義一個(gè)靜態(tài)的函數(shù)f，他的子類d也可以通過(guò)d.f去訪問(wèn)，我們把剛開(kāi)始的那段代碼里的注釋去掉，通過(guò)打印我們可以知道Object.prototype.hasOwnProperty.call(c,’f’)//true，Object.prototype.hasOwnProperty.call(d,’f’)//false
d.f訪問(wèn)的f其實(shí)是源于他的父類c的，這就是d.proto = c的作用。最后還有一個(gè)地方是，在c里可以定義getter和setter，比如get a(){},這些和es5里都是一樣的，這些屬性都會(huì)被掛在到c.prototype里面去。

GPU云服務(wù)器云服務(wù)器中類對(duì)象類型的轉(zhuǎn)化云計(jì)算的本質(zhì) CDN的本質(zhì) 機(jī)器學(xué)習(xí)的本質(zhì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81169.html

相關(guān)文章

深入學(xué)習(xí)TypeScript

摘要：是的超級(jí)，遵循最新的規(guī)范相當(dāng)于包含了的語(yǔ)法。表示方法沒(méi)有返回任何類型類型表示的是那些永不存在的值的類型，例如異常錯(cuò)誤寫(xiě)法錯(cuò)誤三函數(shù)內(nèi)容概述函數(shù)的定義可選參數(shù)默認(rèn)參數(shù)剩余參數(shù)函數(shù)重載箭頭函數(shù)。一、Typescript 介紹、環(huán)境搭建 1.1 Typescript 介紹 1.TypeScript 是由微軟開(kāi)發(fā)的一款開(kāi)源的編程語(yǔ)言，像后端 java、C#這樣的面向?qū)ο笳Z(yǔ)言可以讓 js 開(kāi)發(fā)...

趙連江 2019-08-23 11:39 評(píng)論0 收藏0
JS 裝飾器解析

摘要：在的中，定義了種不同裝飾器的接口，其中裝飾類以及裝飾類方法的接口定義如下所示下面對(duì)這兩種情況進(jìn)行解析。作用于類的裝飾器當(dāng)裝飾的對(duì)象是類時(shí)，我們操作的就是這個(gè)類本身。相關(guān)鏈接中的裝飾器裝飾器場(chǎng)景實(shí)戰(zhàn)修飾器 showImg(https://segmentfault.com/img/remote/1460000013825346?w=640&h=280); 隨著 ES6 和 TypeScri...

zzbo 2019-08-22 15:30 評(píng)論0 收藏0
談一談創(chuàng)建React Component的幾種方式

摘要：用這種方式創(chuàng)建組件時(shí)，并沒(méi)有對(duì)內(nèi)部的函數(shù)，進(jìn)行綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的，就要手動(dòng)對(duì)需要的函數(shù)進(jìn)行綁定，如上面的，在構(gòu)造函數(shù)中對(duì)進(jìn)行了綁定。當(dāng)我們談起React的時(shí)候，多半會(huì)將注意力集中在組件之上，思考如何將頁(yè)面劃分成一個(gè)個(gè)組件，以及如何編寫(xiě)可復(fù)用的組件。但對(duì)于接觸React不久，還沒(méi)有真正用它做一個(gè)完整項(xiàng)目的人來(lái)說(shuō)，理解如何創(chuàng)建一個(gè)組件也并不那么簡(jiǎn)單。在最開(kāi)始的時(shí)候...

mylxsw 2019-08-20 14:24 評(píng)論0 收藏0
ES6系列---類

摘要：原型會(huì)自動(dòng)調(diào)整，通過(guò)調(diào)用方法即可訪問(wèn)基類的構(gòu)造函數(shù)。在簡(jiǎn)單情況下，等于類的構(gòu)造函數(shù)的值是輸出這段代碼展示了當(dāng)調(diào)用時(shí)等于。大多數(shù)面向?qū)ο缶幊陶Z(yǔ)言都支持類和類繼承的特性，而JavaScript只能通過(guò)各種特定方式模仿并關(guān)聯(lián)多個(gè)相似的對(duì)象。這個(gè)情況一直持續(xù)到ES5。由于類似的庫(kù)層出不窮，最終ES6引入了類特性，統(tǒng)一了類和類繼承的標(biāo)準(zhǔn)。 ES5模仿類先看一段ES5中模仿類的代碼： func...

huayeluoliuhen 2019-08-22 11:09 評(píng)論0 收藏0
es6之js的類

摘要：生成的類的原型會(huì)被自動(dòng)調(diào)整，而你還能調(diào)用方法來(lái)訪問(wèn)基類的構(gòu)造器。唯一能避免調(diào)用的辦法，是從類構(gòu)造器中返回一個(gè)對(duì)象。起源 JS 從創(chuàng)建之初就不支持類，也沒(méi)有把類繼承作為定義相似對(duì)象以及關(guān)聯(lián)對(duì)象的主要方式，這讓不少開(kāi)發(fā)者感到困惑。而從 ES1 誕生之前直到ES5 時(shí)期，很多庫(kù)都創(chuàng)建了一些工具，讓 JS 顯得貌似能支持類。盡管一些 JS 開(kāi)發(fā)者強(qiáng)烈認(rèn)為這門語(yǔ)言不需要類，但為處理類而創(chuàng)建的代...

libin19890520 2019-07-31 10:15 評(píng)論0 收藏0