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)文章
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)2015-11-11
原生javascript兼容性：currentStyle、scrollTop、event以及綁定事件IE的綁定事件為attachEvent/detachEvent等等兼容性測試實例,感興趣的朋友可以參考下哈2013-07-07
可以拖動的div是一個比較難以做到的效果，特別是在瀏覽器對于js代碼的運行效率還不是足夠高的情況下，不過聽說firefox對于js的支持正在增加，大概是料到了js在網(wǎng)頁瀏覽的桌面化趨勢中所占的重要地位吧。2009-06-06
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會報錯,本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧2024-02-02
JavaScript實現(xiàn)網(wǎng)頁加載進度條代碼超簡單
網(wǎng)頁進度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進度情況，loading進度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂，效果非常好，需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
下面小編就為大家?guī)硪黄谌c運算符的使用方法(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了js同源策略,較為詳細(xì)的分析了javascript中同源策略的概念與相關(guān)應(yīng)用注意事項,需要的朋友可以參考下2015-05-05
Jquery作者John Resig自己封裝的javascript 常用函數(shù)
Jquery作者John Resig自己封裝的常用函數(shù), 大家可以參考下。2009-11-11
淺談在fetch方法中添加header后遇到的預(yù)檢請求問題
下面小編就為大家?guī)硪黄獪\談在fetch方法中添加header后遇到的預(yù)檢請求問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02