ES6中class類用法實(shí)例淺析
本文實(shí)例講述了ES6中class類用法。分享給大家供大家參考，具體如下：
類語(yǔ)法是ES6中新增的一個(gè)亮點(diǎn)特色。我們熟悉的JavaScript終于迎來(lái)了真正意義上的類。在之前，想要通過(guò)javascript來(lái)實(shí)現(xiàn)類，通常會(huì)采用如下構(gòu)造函數(shù)的模式：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Shelby','Court'];
}
Person.prototype = {
constructor:Person,
sayName: function(){
document.write(this.name);
}
}
然后通過(guò)實(shí)例化調(diào)用：
var person1 = new Person('lf',23,'software engineer');
person1.sayName();
下面看看使用ES6的類如何處理：
class Person {
constructor(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = [‘Shelby','Court']
}
sayName () {
document.write(this.name);
}
}
可以看到簡(jiǎn)便了不少。
Class語(yǔ)法的推出可不光光是為了簡(jiǎn)化噢，還有很多關(guān)鍵字。比如：
static關(guān)鍵字用來(lái)定義類的靜態(tài)方法，靜態(tài)方法是指那些不需要對(duì)類進(jìn)行實(shí)例化，使用類名就可以直接訪問(wèn)的方法。靜態(tài)方法經(jīng)常用來(lái)作為工具函數(shù)：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));
但是需要注意的是，ES6中不能直接定義靜態(tài)成員變量，但是我們可以通過(guò)另外的方式來(lái)實(shí)現(xiàn)：
static get baseUrl() {
return 'www.baidu.com'
}
在類語(yǔ)法推出之前，我們想要實(shí)現(xiàn)繼承，必須通過(guò)prototype來(lái)指定對(duì)象，而現(xiàn)在我們可以通過(guò)extends關(guān)鍵字來(lái)實(shí)現(xiàn)繼承：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
但是需要注意的一點(diǎn)就是，繼承的原理還是在利用prototype這點(diǎn)沒(méi)有變，只不過(guò)extends裹了一層語(yǔ)法糖而已。
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能
neovis.js?由vis.js支持的圖形可視化以及來(lái)自Neo4j的數(shù)據(jù)。這篇文章主要介紹了基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能,需要的朋友可以參考下2022-02-02
console.log()、alert()?都是JavaScript中用于在開(kāi)發(fā)過(guò)程中輸出信息或向用戶顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場(chǎng)景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下2024-07-07
下面小編就為大家?guī)?lái)一篇js原生日歷的實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
這篇文章主要介紹了javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法,涉及javascript實(shí)現(xiàn)隔行變色及鼠標(biāo)點(diǎn)擊效果的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了VUE基于NUXT的SSR 服務(wù)端渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法詳解
在微信小程序開(kāi)發(fā)時(shí)，它的image標(biāo)簽有一個(gè)默認(rèn)高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對(duì)image的寬高設(shè)置，本文就來(lái)分享一下JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法吧2023-03-03
AJAX使用了UpdatePanel后無(wú)法使用alert彈出腳本
今天在做項(xiàng)目的時(shí)候發(fā)現(xiàn)個(gè)問(wèn)題。。使用UpdatePanel后alert腳本就要報(bào)錯(cuò)了。2010-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)前端分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過(guò)運(yùn)算與動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
本文是javascript插件化開(kāi)發(fā)系列教程的第六篇文章，還是重點(diǎn)對(duì)上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。2015-02-02