国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

ES5 構(gòu)造函數(shù)與ES6 Class的區(qū)別

這篇具有很好參考價(jià)值的文章主要介紹了ES5 構(gòu)造函數(shù)與ES6 Class的區(qū)別。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

  • Class 類中不存在變量提升
 ?  // es5
? ? ? ? var bar ?= new Bar(); // 可行
? ? ? ? function Bar() {
? ? ? ? ? ? this.bar = 42;
? ? ? ? }
? ??
    //es6
? ? ? ? const foo = new Foo(); // Uncaught ReferenceError
? ? ? ? class Foo {
? ? ? ? ? ? constructor() {
? ? ? ? ? ? ? ? this.foo = 42;
? ? ? ? ? ? }
? ? ? ? }
  • class內(nèi)部會(huì)啟用嚴(yán)格模式
? ? // es5
? ?function Bar() {
? ? ? ?// 引用一個(gè)未聲明的變量
? ? ? ?baz = 42; // it's ok
? ?}
? ?var bar ?= new Bar();?

? ?// es6
? ?class Foo {
? ? ? ?constructor(){
? ? ? ? ? ?// 引入一個(gè)未聲明的變量
? ? ? ? ? ?fol = 42;// Uncaught ReferenceError: fol is not defined
? ? ? ?}
? ?}
? ?let foo = new Foo();
  • class的所有方法都是不可枚舉的
? // es5
? function Bar() {} ??
? Bar.answer = function () {};
? Bar.prototype.print = function () {};
? console.log(Object.keys(Bar));// ["answer"]
? console.log(Object.keys(Bar.prototype))// ["print"]
? // es6
? class Foo {
? ? ? constructor(){}
? ? ? static answer() {}
? ? ? print(){}
? }
? console.log(Object.keys(Foo))// []
? console.log(Object.keys(Foo.prototype));// []
  • class 必須使用new調(diào)用
 // es5
? ? function Bar(){ }
? ? var bar = Bar();// it's ok;
? ? // es6
? ? class Foo {

? ? }
? ? let foo = Foo();// Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'
  • class 內(nèi)部無法重寫類名
?// es5?
? ? function Bar() {
? ? ? ? Bar = 'Baz';
? ? ? ? this.bar = 42;
? ? }
? ? var bar = new Bar();
? ? console.log(bar);// Bar {bar: 42}
? ? console.log(Bar);// 'Baz'

? ? // es6
? ? class Foo {
? ? ? ? constructor(){
? ? ? ? ? ? this.foo = 42;
? ? ? ? ? ? Foo = 'Fol'; // Uncaught TypeError: Assignment to constant variable.
? ? ? ? }
? ? }
? ? let foo = new Foo();
? ? Foo = 'Fol';// it's ok
  • class 的繼承有兩條繼承鏈

一條是: 子類的__proto__ 指向父類

另一條: 子類prototype屬性的__proto__屬性指向父類的prototype屬性.

es6的子類可以通過__proto__屬性找到父類,而es5的子類通過__proto__找到Function.prototype

? ? // es5
? ? function Super() {}
? ? function Sub() {}
? ? Sub.prototype = new ?Super();
? ? Sub.prototype.constructor = Sub;
? ? var sub = new Sub();
? ? console.log( Sub.__proto__ === Function.prototype);// true

? ? // es6
? ? class Super{}
? ? class Sub extends Super {}
? ? let sub = new Sub();
? ? console.log( Sub.__proto__ === Super);// true
  • es5 與 es6子類this的生成順序不同。

es5的繼承是先建立子類實(shí)例對(duì)象this,再調(diào)用父類的構(gòu)造函數(shù)修飾子類實(shí)例(Surper.apply(this))。

es6的繼承是先建立父類實(shí)例對(duì)象this,再調(diào)用子類的構(gòu)造函數(shù)修飾this。即在子類的constructor方法中必須使用super(),之后才能使用this,如果不調(diào)用super方法,子類就得不到this對(duì)象。文章來源地址http://www.zghlxwxcb.cn/news/detail-462718.html

  • 正是因?yàn)閠his的生成順序不同,所有es5不能繼承原生的構(gòu)造函數(shù),而es6可以繼承
    ? // es5
    ? function MyES5Array() {
    ? ? ? Array.apply(this, arguments);
    ? ? ? // 原生構(gòu)造函數(shù)會(huì)忽略apply方法傳入的this,即this無法綁定,先生成的子類實(shí)例,拿不到原生構(gòu)造函數(shù)的內(nèi)部屬性。
    ? }
    ? MyES5Array.prototype = Object.create(Array.prototype, {
    ? ? ? constructor: {
    ? ? ? ? ? value: MyES5Array,
    ? ? ? ? ? writable: true,
    ? ? ? ? ? configurable: true,
    ? ? ? ? ? enumerable: true
    
    ? ? ? }
    ? })
    ? var arrayES5 = new MyES5Array();
    ? arrayES5[0] = 3;
    ? console.log(arrayES5.length);// 0?
    ? arrayES5.length = 0;
    ? console.log(arrayES5[0]);// 3
    
    ? // es6
    ? class arrayES6 extends Array {
    ? ? ? constructor(...args){
    ? ? ? ? ? super(...args);
    ? ? ? }
    ? }
    ? let arrayes6 = new arrayES6();
    ? arrayes6[0] = 3;
    ? console.log(arrayes6.length);// 1
    ? arrayes6.length = 0;
    ? console.log(arrayes6[0]);// undefined

到了這里,關(guān)于ES5 構(gòu)造函數(shù)與ES6 Class的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 談?wù)凟S5和ES6的區(qū)別

    談?wù)凟S5和ES6的區(qū)別

    我們都知道JavaScript是由三部分組成: 1. ECMAScript(核心):規(guī)定了語言的組成部分=語法、類型、語句、、保留字、操作符、對(duì)象 2. BOM(瀏覽器對(duì)象模型): 支持訪問和操作瀏覽器窗口,可以控制瀏覽器顯示頁面以外的部分。 3. DOM(文檔對(duì)象模型): 把整個(gè)頁面映射為一個(gè)多層節(jié)

    2024年02月02日
    瀏覽(28)
  • this在Es5和Es6的區(qū)別

    在ES5和ES6中,this的指向有所不同。 在ES5中,this的默認(rèn)指向是全局對(duì)象(在瀏覽器環(huán)境中通常是window對(duì)象)。在函數(shù)中,this的指向取決于函數(shù)的調(diào)用方式。例如,在方法調(diào)用中,this指向調(diào)用該方法的對(duì)象;在構(gòu)造函數(shù)中,this指向構(gòu)造出來的新對(duì)象;在定時(shí)器或事件處理函數(shù)

    2024年01月19日
    瀏覽(27)
  • JavaScript、TypeScript、ES5、ES6之間的聯(lián)系和區(qū)別

    JavaScript、TypeScript、ES5、ES6之間的聯(lián)系和區(qū)別

    ECMAScript: ?一個(gè)由 ECMA International 進(jìn)行標(biāo)準(zhǔn)化,TC39 委員會(huì)進(jìn)行監(jiān)督的語言。通常用于指代標(biāo)準(zhǔn)本身。 JavaScript: ?ECMAScript 標(biāo)準(zhǔn)的各種實(shí)現(xiàn)的最常用稱呼。這個(gè)術(shù)語并不局限于某個(gè)特定版本的 ECMAScript 規(guī)范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的實(shí)現(xiàn)。 ECMAS

    2024年02月13日
    瀏覽(34)
  • js繼承的幾種方式(原型鏈繼承、構(gòu)造函數(shù)繼承、組合式繼承、寄生組合式繼承、ES6的Class類繼承)

    js繼承的幾種方式(原型鏈繼承、構(gòu)造函數(shù)繼承、組合式繼承、寄生組合式繼承、ES6的Class類繼承)

    實(shí)現(xiàn)原理: 子類的原型指向父類實(shí)例 。子類在自身實(shí)例上找不到屬性和方法時(shí)去它父類實(shí)例(父類實(shí)例和實(shí)例的原型對(duì)象)上查找,從而實(shí)現(xiàn)對(duì)父類屬性和方法的繼承 缺點(diǎn): 子類創(chuàng)建時(shí)不能傳參(即沒有實(shí)現(xiàn)super()的功能); 父類實(shí)例的修改會(huì)影響子類所有實(shí)例 實(shí)現(xiàn)原理:

    2024年02月07日
    瀏覽(31)
  • 【chatGTP 對(duì)es6與es5的區(qū)別是什么的解析】

    筆者對(duì)chatGPT做了一些提問其結(jié)果另人印象深刻,這回答要比一些博主的文章要精彩的多,機(jī)器取代人工寫作看樣子是時(shí)間問題了 ES6 (ECMAScript 2015) 和 ES5 (ECMAScript 5) 是 JavaScript 的兩個(gè)主要版本,它們之間有很多區(qū)別。 以下是 ES6 相對(duì)于 ES5 的主要區(qū)別: 變量聲明方式: ES6 引入

    2024年02月02日
    瀏覽(18)
  • es5的實(shí)例__proto__(原型鏈) prototype(原型對(duì)象) {constructor:構(gòu)造函數(shù)}

    es5的實(shí)例__proto__(原型鏈) prototype(原型對(duì)象) {constructor:構(gòu)造函數(shù)}

    現(xiàn)在看這張圖開始變得云里霧里,所以簡單回顧一下 prototype 的基本內(nèi)容,能夠基本讀懂這張圖的脈絡(luò)。 先介紹一個(gè)基本概念: 在上面的例子中, Person 叫做構(gòu)造函數(shù)(函數(shù)被進(jìn)行構(gòu)造調(diào)用,為下文方便,稱之為 構(gòu)造函數(shù) ) Person.prototype 叫做 Person 的 原型對(duì)象 person1 又稱之

    2024年02月10日
    瀏覽(23)
  • 構(gòu)造函數(shù)及es6類寫單例模式

    ? ? ? ? 前言,什么叫做單例模式?簡單點(diǎn)說, 單例模式就是只能創(chuàng)建一個(gè)由構(gòu)造函數(shù)及類的實(shí)體,多次調(diào)用得到的都是第一次new出來的對(duì)象 。用處有,例如在需要全局管理的資源、頻繁訪問的配置信息、日志記錄器、 數(shù)據(jù)庫連接池?等情況下都可以使用單例模式來優(yōu)化資

    2024年04月23日
    瀏覽(21)
  • 構(gòu)造函數(shù)與class實(shí)現(xiàn)類的區(qū)別

    首先聊聊ES6 class定義的類和用構(gòu)造函數(shù)new出來的類的一些不同之處 class聲明提升 class聲明內(nèi)部會(huì)啟用嚴(yán)格模式 class的所有方法都是不可枚舉的 class的所有方法都沒有原型對(duì)象prototype class定義的類不能被當(dāng)做函數(shù)調(diào)用

    2024年01月18日
    瀏覽(20)
  • JavaScript版本ES5/ES6及后續(xù)版本

    JavaScript版本ES5/ES6及后續(xù)版本

    Brendan Eich在短短10天內(nèi)創(chuàng)建了JavaScript的第一個(gè)版本。它被稱為摩卡,但已經(jīng)具備了現(xiàn)代JavaScript的許多基本特性! 為了吸引Java開發(fā)人員,Mocha先是更改為LiveScript,然后又更改為JavaScript然而,JavaScript與Java幾乎沒有任何關(guān)系; 微軟推出了IE,從網(wǎng)景復(fù)制JavaScript,并稱之為JScript; 由

    2024年02月13日
    瀏覽(33)
  • 【ES5和ES6】數(shù)組遍歷的各種方法集合

    【ES5和ES6】數(shù)組遍歷的各種方法集合

    特點(diǎn): 沒有返回值,只是針對(duì)每個(gè)元素調(diào)用func 三個(gè)參數(shù):item, index, arr ;當(dāng)前項(xiàng),當(dāng)前項(xiàng)的索引,被遍歷的數(shù)組 for 循環(huán)可以在循環(huán)體中終止或跳過該循環(huán),forEach不可以 特點(diǎn):返回新的arr, 每個(gè)元素為調(diào)用函數(shù)返回的結(jié)果 參數(shù): function:必選,數(shù)組中每個(gè)元素都會(huì)執(zhí)行的函

    2024年02月12日
    瀏覽(22)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包