ES6 class的應(yīng)用實例分析
更新時間：2019年06月27日 09:07:30 作者：Johnny丶me
這篇文章主要介紹了ES6 class的應(yīng)用,結(jié)合實例形式分析了class在ES6面向?qū)ο蟪绦蛟O(shè)計中定義類的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了ES6 class的應(yīng)用。分享給大家供大家參考，具體如下：
class
- class 本身是個語法糖，主要為了考慮在編碼上更加人性化
- 內(nèi)部有super,static,get 等關(guān)鍵詞
- 使用起來非常類似于后臺語言
使用class進行類的實現(xiàn)應(yīng)用
'use strict';
// User 類
class User {
constructor(name,age) {
this.name = name;
this.age = age;
}
static getName() {
return 'User';
}
static getAge() {
return this.age;
}
setName(name) {
this.name = name;
}
setAge(age) {
this.age = age;
}
get info() {
return 'name:' + this.name + ' | age:' + this.age;
}
}
// Manager 類
class Manager extends User{
constructor(name,age,password){
super(name,age);
this.password = this.password;
}
changePwd(pwd) {
return this.password = pwd;
}
get info() {
var info = super.info; // 使用super繼承父級 get
return info + ' === new';
}
}
// typeof User: function typeof Manager: function
console.log('typeof User: ', typeof User, ' typeof Manager: ', typeof Manager);
let manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23 === new
console.log(User.prototype);
console.log(Manager.prototype);
在class之前使用原型對象定義類的應(yīng)用
// 構(gòu)造函數(shù)
function User(name,age) {
this.name = name;
this.age = age;
}
// 原型
User.prototype = {
getName:function(){
return 'User';
},
setName:function(name){
this.name = name;
},
getAge:function(){
return this.age;
},
setAge:function(age){
this.age = age;
}
}
// 取值函數(shù)和存執(zhí)函數(shù)
Object.defineProperty(User.prototype,'info', {
get() {
return 'name:' + this.name + ' | age:' + this.age;
}
});
var user = new User('Joh', 26);
console.log(user); // User {name: "Joh", age: 26}
// 子類
function Manager(name, age, password) {
User.call(this, name, age);
this.password = password;
}
Manager.__proto__ = User; // 繼承靜態(tài)方法
Manager.prototype = Object.create(User.prototype); // 繼承prototype原型方法
Manager.prototype.changePwd = function (pwd) {
this.password = pwd;
};
var manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23
console.log(User.prototype); // 不變
console.log(Manager.prototype); // {changePwd:function(){}, info:"name:undefined | age:undefined", __proto__:指向Manager.prototype}
使用 class 定義的類不被提升，需按順序執(zhí)行
正常：
let user = new class User {
constructor(name) {
this.name = name;
}
}('Joh');
console.log(user); // User {name: "Joh"}
錯誤：
var man = new Man(); // 此處報錯，使用class聲明的類不會被提升 Uncaught ReferenceError: Man is not defined
class Man {
constructor(name){
this.name = name;
}
}
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
測試代碼是確保代碼穩(wěn)定的第一步。能做到這一點的最佳方法之一就是使用單元測試。這篇文章主要介紹了如何用JavaScript編寫你的第一個單元測試，感興趣的可以了解一下2022-11-11
Layer彈出層動態(tài)獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇Layer彈出層動態(tài)獲取數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript實現(xiàn)可拖動變色并關(guān)閉層窗口實例
這篇文章主要介紹了javascript實現(xiàn)可拖動變色并關(guān)閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS判斷客服QQ號在線還是離線狀態(tài)的方法,可實現(xiàn)完整的判斷QQ在線及對話的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組之展開運算符的相關(guān)資料,你可以通過展開操作符(Spread operator)擴展一個數(shù)組對象和字符串,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
javascript實現(xiàn)設(shè)置、獲取和刪除Cookie的方法
這篇文章主要介紹了javascript實現(xiàn)設(shè)置、獲取和刪除Cookie的方法,涉及javascript操作cookie的常用技巧,非常簡單實用,需要的朋友可以參考下2015-06-06
深入理解JavaScript系列（16） 閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包（closure）。閉包其實大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
本文將深入探討如何使用強大的xlsx庫來操作Excel文件,本文將涵蓋如何在Node.js和瀏覽器環(huán)境中讀取Excel文件,創(chuàng)建新的Excel文件等內(nèi)容,感興趣的小伙伴可以了解下2024-11-11
這篇文章主要為大家詳細介紹了利用js canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
下面小編就為帶來一篇js導(dǎo)出excel文件的簡潔方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11