建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
講解一下ES6Class使用方法
ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。
創(chuàng)新互聯(lián)公司公司2013年成立，先為懷柔等服務建站，懷柔等地企業(yè)，進行企業(yè)商務咨詢服務。為懷柔企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
基礎用法
類定義
類表達式可以為匿名或命名。
// 匿名類
let Example = class {
constructor(a) {
this.a = a;
}
}
// 命名類
let Example = class Example {
constructor(a) {
this.a = a;
}
}
類聲明
class Example {
constructor(a) {
this.a = a;
}
}
注意要點：不可重復聲明。
class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
注意要點
類定義不會被提升，這意味著，必須在訪問前對類進行定義，否則就會報錯。
類中方法不需要 function 關鍵字。
方法間不能加分號。
new Example();
class Example {}
類的主體
屬性
prototype
ES6 中，prototype 仍舊存在，雖然可以直接自類中定義方法，但是其實方法還是定義在 prototype 上的。 覆蓋方法 / 初始化時添加方法
Example.prototype={
//methods
}
添加方法
Object.assign(Example.prototype,{
//methods
})
靜態(tài)屬性
靜態(tài)屬性：class 本身的屬性，即直接定義在類內部的屬性（ Class.propname ），不需要實例化。 ES6 中規(guī)定，Class 內部只有靜態(tài)方法，沒有靜態(tài)屬性。
class Example {
// 新提案
static a = 2;
}
// 目前可行寫法
Example.b = 2;
公共屬性
class Example{}
Example.prototype.a = 2;
實例屬性
實例屬性：定義在實例對象（ this ）上的屬性。
class Example {
a = 2;
constructor () {
console.log(this.a);
}
}
name 屬性
返回跟在 class 后的類名(存在時)。
let Example=class Exam {
constructor(a) {
this.a = a;
}
}
console.log(Example.name); // Exam
let Example=class {
constructor(a) {
this.a = a;
}
}
console.log(Example.name); // Example
方法
constructor 方法
constructor 方法是類的默認方法，創(chuàng)建類的實例化對象時被調用。
class Example{
constructor(){
console.log('我是constructor');
}
}
new Example(); // 我是constructor
返回對象
class Test {
constructor(){
// 默認返回實例對象 this
}
}
console.log(new Test() instanceof Test); // true
class Example {
constructor(){
// 指定返回對象
return new Test();
}
}
console.log(new Example() instanceof Example); // false
靜態(tài)方法
class Example{
static sum(a, b) {
console.log(a+b);
}
}
Example.sum(1, 2); // 3
原型方法
class Example {
sum(a, b) {
console.log(a + b);
}
}
let exam = new Example();
exam.sum(1, 2); // 3
實例方法
class Example {
constructor() {
this.sum = (a, b) => {
console.log(a + b);
}
}
}
類的實例化
new
class 的實例化必須通過 new 關鍵字。
class Example {}
let exam1 = Example();
// Class constructor Example cannot be invoked without 'new'
實例化對象
共享原型對象
class Example {
constructor(a, b) {
this.a = a;
this.b = b;
console.log('Example');
}
sum() {
return this.a + this.b;
}
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true
exam1._proto_.sub = function() {
return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2
decorator
decorator 是一個函數(shù)，用來修改類的行為，在代碼編譯時產(chǎn)生作用。
類修飾
一個參數(shù)
第一個參數(shù) target，指向類本身。
function testable(target) {
target.isTestable = true;
}
@testable
class Example {}
Example.isTestable; // true
多個參數(shù)——嵌套實現(xiàn)
function testable(isTestable) {
return function(target) {
target.isTestable=isTestable;
}
}
@testable(true)
class Example {}
Example.isTestable; // true
實例屬性
上面兩個例子添加的是靜態(tài)屬性，若要添加實例屬性，在類的 prototype 上操作即可。
方法修飾
3個參數(shù)：target（類的原型對象）、name（修飾的屬性名）、descriptor（該屬性的描述對象）。
class Example {
@writable
sum(a, b) {
return a + b;
}
}
function writable(target, name, descriptor) {
descriptor.writable = false;
return descriptor; // 必須返回
}
修飾器執(zhí)行順序
由外向內進入，由內向外執(zhí)行。
class Example {
@logMethod(1)
@logMthod(2)
sum(a, b){
return a + b;
}
}
function logMethod(id) {
console.log('evaluated logMethod'+id);
return (target, name, desctiptor) => console.log('excuted logMethod '+id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1
封裝與繼承
getter / setter
定義
class Example{
constructor(a, b) {
this.a = a; // 實例化時調用 set 方法
this.b = b;
}
get a(){
console.log('getter');
return this.a;
}
set a(a){
console.log('setter');
this.a = a; // 自身遞歸調用
}
}
let exam = new Example(1,2); // 不斷輸出 setter ，最終導致 RangeError
class Example1{
constructor(a, b) {
this.a = a;
this.b = b;
}
get a(){
console.log('getter');
return this._a;
}
set a(a){
console.log('setter');
this._a = a;
}
}
let exam1 = new Example1(1,2); // 只輸出 setter , 不會調用 getter 方法
console.log(exam._a); // 1, 可以直接訪問
getter 不可單獨出現(xiàn)
class Example {
constructor(a) {
this.a = a;
}
get a() {
return this.a;
}
}
let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of # which has only a getter
getter 與 setter 必須同級出現(xiàn)
class Father {
constructor(){}
get a() {
return this._a;
}
}
class Child extends Father {
constructor(){
super();
}
set a(a) {
this._a = a;
}
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
class Father1 {
constructor(){}
// 或者都放在子類中
get a() {
return this._a;
}
set a(a) {
this._a = a;
}
}
class Child1 extends Father1 {
constructor(){
super();
}
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2
extends
通過 extends 實現(xiàn)類的繼承。
class Child extends Father { ... }
super
子類 constructor 方法中必須有 super ，且必須出現(xiàn)在 this 之前。
class Father {
constructor() {}
}
class Child extends Father {
constructor() {}
// or
// constructor(a) {
// this.a = a;
// super();
// }
}
let test = new Child(); // Uncaught ReferenceError: Must call super
// constructor in derived class before accessing 'this' or returning
// from derived constructor
調用父類構造函數(shù),只能出現(xiàn)在子類的構造函數(shù)。
class Father {
test(){
return 0;
}
static test1(){
return 1;
}
}
class Child extends Father {
constructor(){
super();
}
}
class Child1 extends Father {
test2() {
super(); // Uncaught SyntaxError: 'super' keyword unexpected
// here
}
}
調用父類方法, super 作為對象，在普通方法中，指向父類的原型對象，在靜態(tài)方法中，指向父類
class Child2 extends Father {
constructor(){
super();
// 調用父類普通方法
console.log(super.test()); // 0
}
static test3(){
// 調用父類靜態(tài)方法
return super.test1+2;
}
}
Child2.test3(); // 3
注意要點
不可繼承常規(guī)對象。
var Father = {
// ...
}
class Child extends Father {
// ...
}
// Uncaught TypeError: Class extends value #
網(wǎng)站名稱：講解一下ES6Class使用方法
文章地址：http://m.fisionsoft.com.cn/article/djdgcoi.html
