ES6中class類用法實(shí)例淺析

更新時(shí)間：2017年04月06日 11:57:11 作者：布瑞澤的童話

這篇文章主要介紹了ES6中class類用法,結(jié)合實(shí)例形式分析了ES6中類的實(shí)現(xiàn)方法與相關(guān)語法使用技巧,需要的朋友可以參考下

本文實(shí)例講述了ES6中class類用法。分享給大家供大家參考，具體如下：

類語法是ES6中新增的一個(gè)亮點(diǎn)特色。我們熟悉的JavaScript終于迎來了真正意義上的類。在之前，想要通過javascript來實(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);
 }
}

然后通過實(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);
 }
}

可以看到簡便了不少。

Class語法的推出可不光光是為了簡化噢，還有很多關(guān)鍵字。比如：

static關(guān)鍵字用來定義類的靜態(tài)方法，靜態(tài)方法是指那些不需要對(duì)類進(jìn)行實(shí)例化，使用類名就可以直接訪問的方法。靜態(tài)方法經(jīng)常用來作為工具函數(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)成員變量，但是我們可以通過另外的方式來實(shí)現(xiàn)：

static get baseUrl() {
  return 'www.baidu.com'
}

在類語法推出之前，我們想要實(shí)現(xiàn)繼承，必須通過prototype來指定對(duì)象，而現(xiàn)在我們可以通過extends關(guān)鍵字來實(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)沒有變，只不過extends裹了一層語法糖而已。

希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫的圖像化顯示功能
neovis.js?由vis.js支持的圖形可視化以及來自Neo4j的數(shù)據(jù)。這篇文章主要介紹了基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫的圖像化顯示功能,需要的朋友可以參考下
2022-02-02
JavaScript查看數(shù)據(jù)返回值的方法
console.log()、alert()?都是JavaScript中用于在開發(fā)過程中輸出信息或向用戶顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下
2024-07-07
js原生日歷的實(shí)例(推薦)
下面小編就為大家?guī)硪黄猨s原生日歷的實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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ù)端渲染
這篇文章主要介紹了VUE基于NUXT的SSR 服務(wù)端渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法詳解
在微信小程序開發(fā)時(shí)，它的image標(biāo)簽有一個(gè)默認(rèn)高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對(duì)image的寬高設(shè)置，本文就來分享一下JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法吧
2023-03-03
AJAX使用了UpdatePanel后無法使用alert彈出腳本
今天在做項(xiàng)目的時(shí)候發(fā)現(xiàn)個(gè)問題。。使用UpdatePanel后alert腳本就要報(bào)錯(cuò)了。
2010-04-04
JS實(shí)現(xiàn)前端分頁效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)前端分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過運(yùn)算與動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-12-12
JavaScript插件化開發(fā)教程（六）
本文是javascript插件化開發(fā)系列教程的第六篇文章，還是重點(diǎn)對(duì)上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。
2015-02-02