学JS的心路历程 - JS的Class

没错，你没有看错，虽然前面说JS是原型继承，但在ES6以后新增了class关键字！！！

不过底层实作仍然是以原型继承方式进行，所以基本上算是一个语法糖。

今天我们就来看一下如何使用吧！

class

首先先来看一个最简单的class例子。

class Person{

constructor（val）{

this.age = val；

}

say（）{

return“Hi！”；

}

}

var Jason = new Person（29）；

Jason instanceof Person；//true

Jason.age；//29

Jason.say（）；//“Hi！”

在类别（class）中可以明确定义一个建构式函式，会在建立新的Person物件时被呼叫，在类别主体内也能直接新增方法。

当然我们也可以用原本的原型继承来写。

function Person（val）{

this.age = val；

}

Person.prototype.say =“HI！”；

var Jason = new Person（29）；

但是，要注意如果用类别的话要注意Hoisting的问题！！

var Jason = new Person（29）；//ReferenceError: Person is not defined

class Person{

constructor（val）{

this.age = val；

}

say（）{

return“Hi！”；

}

}

静态方法Static methods

一个类别的静态方法，不需要被实例化就可以被呼叫，不过也无法被实例化的新物件使用，也就是只能类别层级使用(vmwork)。

class Person{

constructor（val）{

this.age = val；

}

say（）{

return“Hi！”；

}

static evilThink（）{

return“I want steal somthing”

}

}

var Jason = new Person（29）；

“evilThink”in Jason；//false

Person.evilThink（）；//“I want steal somthing”

用原型继承可以这样写。

function Person（val）{

this.age = val；

}

Person.evilThink = function（）{

return“I want steal somthing”

}

Person.prototype.say = function（）{

return“HI！”；

}

var Jason = new Person（29）；

“evilThink”in Jason；//false

Person.evilThink（）；//“I want steal somthing”

extends建立子类别

可以用extends建立子类别。

class Person{

constructor（age，weight）{

this.age = age；

this.weight = weight；

}

say（）{

return“Hi！”；

}

}

class trickyMan extends Person{

say（）{

return“R~”

}

}

var Jason = new trickyMan（29,96）；

Jason instanceof Person；//true

Jason instanceof trickyMan；//true

Jason.say（）；//“R~”

用原型继承则是这样写。

function Person（age，weight）{

this.age = age；

this.weight = weight；

}

Person.prototype.say = function（）{

return“HI！”；

}

function tricky（）{}

tricky.prototype.say = function（）{

return“R~”；

}

var Jason = new tricky（29）；

Jason.say（）；//“R~”

super呼叫父类别

如果要在子类别呼叫父类别可以用super。

class Person{

constructor（age，weight）{

this.age = age；

this.weight = weight；

}

say（）{

return“Hi！”；

}

}

class trickyMan extends Person{

say（）{

return super.say（）；

}

}

var Jason = new trickyMan（29,96）；

Jason.say（）；//“HI！”

如果用原型继承来写的话。

function Person（age，weight）{

this.age = age；

this.weight = weight；

}

Person.prototype.say = function（）{

return“HI！”；

}

function tricky（）{}

tricky.prototype.say = function（）{

return Person.prototype.say（）

}

var Jason = new tricky（29）；

Jason.say（）；//“HI！”

以上就是class的用法，一样如果有错误及来源未附上也欢迎留言指正，那么我们明天见(leafor)。