javaScript 語言中，生成實例對象的傳統方法是通過構造函數,與傳統的面向對象語言（比如 C++ 和 Java）差異很大，ES6 提供了更接近傳統語言的寫法，引入了 class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。
es6 class 與es5的面向對象的區別：
1. 寫法不同，使用關鍵字class
2.當new一個實例，默認有一個constructor方法，且默認返回實例對象（this）,也可以返回另一對象
3.類的所有方法都在prototype屬性上，但是不可枚舉，且每方法結束不能使用分號
4.類的調用必須通過new 一個實例,且類的內部默認使用嚴格模式
5.不存在變量提升，必須先聲明，再調用
6.class的this 默認指向當前類
7.class 的靜態方法，使用關鍵字static,不需new,直接通過類來調用
8. 實例屬性和靜態屬性的寫法，實例屬性在類的內部直接使用等式（=）寫法，也可以寫在constructor 方法里，靜態屬性只需在實例屬性前加一個關鍵字static即可
9.類的繼承使用關鍵字extends,繼承機制與es5完全不同，
es5的繼承原理：先new子類的實例對象this,再通過將父類的方法和屬性添加到子類的this上(parents.call(this))。
Es6的繼承原理：先創造父類的實例對象this,所以要構造函數constructor（）訪問父類的屬性使用this,必須先調用super()方法；再通過子類的constructor()來修改this
10．類的繼承可以繼承原生的構造函數，es5不可以
1. 一般寫法（es5 與es6）
//一.ES5寫法：function Animate(name){ this.name = name;}Animate.prototype.getname = function(){ console.log(this.name)}var p =new Animate("lity");p.getname();//二.ES6,面向對象的寫法,calss,class Person{ //constructor()：構造方法是默認方法，new的時候回自動調用，如果沒有顯式定義，會自動添加 //1.適合做初始化數據 //2.constructor可以指定返回的對象 constructor(name,age){ this.name = name; this.age = age; } getval(){ console.log(`你是${this.name},${this.age}歲`); }} var c1 = new Person("lity",20); c1.getval(); ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到
注意 ：class 類的本質還是一個函數,類本身就指向構造函數。
typeof Person //functionPerson === Person.prototype.constructor // true
我們使用Object的一些屬性或者方法檢測一下 用es6 寫的實例對象
//1.查看實例對象c1的__proto__是否指向Person的原型(Person.prototype) console.log(c1.__proto__==Person.prototype)//true console.log(c1.__proto__)//原型對象的所有方法 //2.isPrototypeOf:檢測實例對象是否是某個函數的原型 console.log(Person.prototype.isPrototypeOf(c1));//true//3.constructor:查看某個對象的構造函數 console.log(c1.constructor); //4.hasOwnProperty:檢測某個屬性是否是自己的屬性；不是原型對象上的屬性和方法 console.log(c1.hasOwnProperty("name"))//true; //5.in：通過in可以檢測屬性是否在自己中(this)或者是原型中存在 console.log("getval" in c1)//原型上存在，true console.log("name" in c1)//constructor(自己上存在)，true //6.自定義檢測屬性是否是存在 function hasproperty(attr,obj){ return obj.hasOwnProperty(attr)&&(attr in obj); } console.log(hasproperty("name",c1));//true;2.表達式寫法
//class表達式const Myclass = class Me{//這里的Me是沒有作用的 constructor(name,jog){ this.name = name; this.jog = jog; } getval(){ console.log(`name is ${this.name},job is a ${this.jog}`); }} var obj1 = new Myclass("lylt","teacher"); obj1.getval();3.class的私有方法(ES6不提供寫法)和私有屬性(也不提供寫法，提案用#識別)
所謂私有方法和私有屬性，是指只能在類的內部使用，不能在類外部調用
4.ES6規定Class類沒有靜態屬性,只有靜態方法：static
所謂靜態，不需要實例化對象，直接調用
class Foo { static classMethod() { return 'lity'; } } console.log(Foo.classMethod()) // 'hello'5.new.target屬性
new是在構造函數生成實例的命令，ES6為new提供了一個屬性.target,
返回通過new 命令實例對象的class(構造函數)，一般用于類的內部
//ES5：原始寫法對象function objtarge(name){ if(new.target==undefined){ throw new Error("必須實例化對象"); }else{ this.name = name }}var targets = new objtarge("litys");console.log(targets.name);//litys//es6寫法:class內部使用new.target，返回當前的calssclass caltartget{ constructor(name){ console.log(new.target==caltartget);//true if(new.target!==caltartget){ throw new Error("實例化對象不是caltrget"); }else{ this.name = name; } }}var caltart = new caltartget("lity");console.log(caltart.name);//lity6.this指向
類的方法內部如果含有this，它默認指向類的實例。但是，必須非常小心，一旦單獨使用該方法，很可能報錯
如下示例
class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); }}const logger = new Logger();const { printName } = logger;printName(); // TypeError: Cannot read property 'print' of undefined分析以上示例：prinName 的方法中this,默認指向 類Logger，但是將改方法單獨調用，就會報錯，this會指向所在運行的環境，所以因為找不到this.print()方法而報錯。
針對以上解決this指向的方法：
（1）. 使用bind(this)
（2）. 使用es6 的箭頭函數 （）=>{}
（3）.使用Proxy 代理
//1.bind()方法class Logger { constructor() { this.printName = this.printName.bind(this); } // ...}//2.箭頭函數 （）=>{}class Logger { constructor() { this.printName = (name = 'there') => { this.print(`Hello ${name}`); }; } // ...}//3. Porxy().................7.class 的get() 和set() 方法
與 ES5 一樣，在“類”的內部可以使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行為。
class MyClass { constructor() { // ... } get prop() {// 使用 get 攔截了該方法的返回值 return 'getter'; } set prop(value) {//當對該方法賦值時能獲取到該賦值 console.log('setter: '+value); }}let obj = new MyClass();obj.prop = 123;// setter: 123inst.prop// 'getter'8.繼承
Class 可以通過extends關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。
//es5 的繼承//父類function Person(name,sex){ this.name = name;//屬性 this.sex = sex;//屬性 }//定義一個原型方法Person.prototype.show = function(){ console.log("我的姓名是"+this.name+"==="+"我的性別是"+this.sex)}//子類function Worker(name,sex,job){ //構成函數偽裝：使用call()方法綁定this，偽裝繼承父級的屬性 Person.call(this,name,sex); this.job = job;}//繼承父類的原型方法：（介紹三種方法）//寫法一：通過遍歷父級的原型一個個賦給子級的原型(es5 的原型是可枚舉的，es6的不可以枚舉)(var i in Person.prototype){ Worker.prototype[i] = Person.prototype[i];}//寫法：重新new一個父級對象賦給子級的原型Worker.prototype = new Person();Worker.prototype.constructor = Worker;//寫法三：創建一個原型對象賦給子級的原型；(es5 推薦)Worker.prototype = Object.create(Person.prototype);Worker.prototype.constructor = Worker;var workers = new Worker("小明","男","job")//es6 的繼承class Person{ constructor(name,sex){ this.name = name;//屬性 this.sex = sex;//屬性 }}class Worker extends Person{ constructor(name,sex,job){ super(); this.job =job; }}var workers = new Worker("小明","男","job")8.1:super關鍵字：在子類中不同情況用法不同,既可以當作函數使用，也可以當作對象使用。
(1)：super作為函數，只能在constructor中使用:代表父類，返回子類的this
(2)：super作為對象，在普通函數中，cuper指向父類的原型對象，可以訪問原型對象的屬性和方法,注意，父類的實例的屬性和方法是訪問不了的
(3)：super作為對象，在靜態方法中，cuper指向的是父類，不是父類的原型對象
示例分析如下：
//父類class Aniamte{ constructor(){ if(new.target == Aniamte){ throw new Error("本類不能實例化，只能有子類繼承"); } } //靜態方法 static getval(mgs){ console.log("父類的static",mgs) } //普通方法 setname(){ console.log("該方法有子類重寫") } }//子類class Dog extends Aniamte{ constructor(){ super();//調用此方法,this才用可以用,代表父類的構造函數，返回的卻是子類 //super() ==父類.prototype.constructor.call(子類/this) console.log(this)//Dog {} this.age = 20; } //靜態方法,super在靜態方法中作為對象使用，指向父類； static getval(mgs){ super.getval(mgs)//父類的static niceday console.log("子類的static",mgs)//子類的static niceday } setname(name){ //普通方法，super作為對象使用，指向父類的原型對象，父類.prototype; super.setname();//該方法有子類重寫 this.name = name; return this.name }};Dog.getval("niceday");//靜態方法，直接調用//var parAni = new Aniamte();//報錯var dogs = new Dog();//new 一個示例對象dogs.setname("DOYS");////DOYS8.2.原生構造函數的繼承，ES5不支持，ES6利用extend可以繼承原生構造函數
//ESMAScript的構造函數有以下幾種/* Boolean()* Unmber()* String()* Array()* Date()* Function()* RegExp()* Error()* Object()*///實例一：自定義類Myarray 繼承了原生的數組的構造函數，擁有原生數組的屬性和方法了class Myarray extends Array{ constructor(){ super(); console.log(this.constructor.name)//Myarray }}var myarr = new Myarray();console.log(Object.prototype.toString.call(myarr));//[object Array]myarr.push(1,2,1);console.log(myarr.length)//3總結
以上所述是小編給大家介紹的es6新特性之 class 基本用法解析，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
