es5 類與es6中class的區(qū)別小結(jié)
前言
在es5中主要是通過構(gòu)造函數(shù)方式和原型方式來定義一個(gè)類，在es6中我們可以通過class來定義類，今天整理一下它們的區(qū)別。
關(guān)于es5中定義類的方式，可以看這一篇Js的‘類'，我們這里主要聊es5類和es6中class類的區(qū)別。
一、class類必須new調(diào)用，不能直接執(zhí)行。
class類執(zhí)行的話會(huì)報(bào)錯(cuò)，而es5中的類和普通函數(shù)并沒有本質(zhì)區(qū)別，執(zhí)行肯定是ok的。
二、class類不存在變量提升
圖2報(bào)錯(cuò)，說明class方式?jīng)]有把類的定義提升到頂部。
三、class類無法遍歷它實(shí)例原型鏈上的屬性和方法
function Foo (color) {
this.color = color
}
Foo.prototype.like = function () {
console.log(`like${this.color}`)
}
let foo = new Foo()
for (let key in foo) {
// 原型上的like也被打印出來了
console.log(key) // color、like
}
class Foo {
constructor (color) {
this.color = color
}
like () {
console.log(`like${this.color}`)
}
}
let foo = new Foo('red')
for (let key in foo) {
// 只打印一個(gè)color,沒有打印原型鏈上的like
console.log(key) // color
}
四、new.target屬性
es6為new命令引入了一個(gè)new.target屬性，它會(huì)返回new命令作用于的那個(gè)構(gòu)造函數(shù)。如果不是通過new調(diào)用或Reflect.construct()調(diào)用的，new.target會(huì)返回undefined
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必須使用 new 命令生成實(shí)例');
}
}
let obj = {}
Person.call(obj, 'red') // 此時(shí)使用非new的調(diào)用方式就會(huì)報(bào)錯(cuò)
五、class類有static靜態(tài)方法
static靜態(tài)方法只能通過類調(diào)用，不會(huì)出現(xiàn)在實(shí)例上；另外如果靜態(tài)方法包含 this 關(guān)鍵字，這個(gè) this 指的是類，而不是實(shí)例。static聲明的靜態(tài)屬性和方法都可以被子類繼承。
class Foo {
static bar() {
this.baz(); // 此處的this指向類
}
static baz() {
console.log('hello'); // 不會(huì)出現(xiàn)在實(shí)例中
}
baz() {
console.log('world');
}
}
Foo.bar() // hello
總結(jié)
到此這篇關(guān)于es5 類與es6中class的區(qū)別的文章就介紹到這了,更多相關(guān)es5類與es6中class區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
不間斷向上滾動(dòng)的效果，想必大家都有見到過吧，本文也為大家準(zhǔn)備一個(gè)使用js實(shí)現(xiàn)的不間斷向上滾動(dòng)效果，感興趣的朋友可以參考下2013-12-12
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下2014-05-05
JavaScript禁止右擊保存圖片,禁止拖拽圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript禁止右擊保存圖片,禁止拖拽圖片的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
JavaScript 異步調(diào)用框架 (Part 2 - 用例設(shè)計(jì))
在上一篇文章里說到，我們要設(shè)計(jì)一個(gè)異步調(diào)用框架，最好能夠統(tǒng)一同步異步調(diào)用的接口，同時(shí)具體調(diào)用順序與實(shí)現(xiàn)方式無關(guān)。那么我們現(xiàn)在就來設(shè)計(jì)這樣一個(gè)框架的用例。2009-08-08
Bootstrap整體框架之JavaScript插件架構(gòu)
這篇文章主要介紹了Bootstrap整體框架之JavaScript插件架構(gòu)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了js獲取滾動(dòng)距離的方法,涉及javascript針對(duì)頁(yè)面滾動(dòng)條的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用
本篇文章主要介紹了強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
使用JavaScript實(shí)現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼
鏈表（Linked list）是一種常見的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，是一種線性表，但是并不會(huì)按線性的順序存儲(chǔ)數(shù)據(jù)，而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針(Pointer) 。下面我們用 JavaScript 代碼對(duì)鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)2017-08-08
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問題，但注意一下，會(huì)使您的編程輕松些，即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。2008-05-05
使用Turn.js實(shí)現(xiàn)翻書效果的完整步驟
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手,其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果,下面這篇文章主要給大家介紹了關(guān)于使用Turn.js實(shí)現(xiàn)翻書效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12