這篇文章將為大家詳細講解有關一文帶你讀懂es5 類與es6中的class有什么不同，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
前言
在es5中主要是通過構造函數方式和原型方式來定義一個類，在es6中我們可以通過class來定義類，今天整理一下它們的區別。
關于es5中定義類的方式，可以看這一篇Js的‘類'，我們這里主要聊es5類和es6中class類的區別。
一、class類必須new調用，不能直接執行。
class類執行的話會報錯，而es5中的類和普通函數并沒有本質區別，執行肯定是ok的。
二、class類不存在變量提升
圖2報錯，說明class方式沒有把類的定義提升到頂部。
三、class類無法遍歷它實例原型鏈上的屬性和方法
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) {
// 只打印一個color,沒有打印原型鏈上的like
console.log(key) // color
}四、new.target屬性
es6為new命令引入了一個new.target屬性，它會返回new命令作用于的那個構造函數。如果不是通過new調用或Reflect.construct()調用的，new.target會返回undefined
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必須使用 new 命令生成實例');
}
}
let obj = {}
Person.call(obj, 'red') // 此時使用非new的調用方式就會報錯五、class類有static靜態方法
static靜態方法只能通過類調用，不會出現在實例上；另外如果靜態方法包含 this 關鍵字，這個 this 指的是類，而不是實例。static聲明的靜態屬性和方法都可以被子類繼承。
class Foo {
static bar() {
this.baz(); // 此處的this指向類
}
static baz() {
console.log('hello'); // 不會出現在實例中
}
baz() {
console.log('world');
}
}
Foo.bar() // hello關于一文帶你讀懂es5 類與es6中的class有什么不同就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
