码迷,mamicode.com
首页 > Web开发 > 详细

学JS的心路历程 - JS的Class

时间:2018-12-21 13:19:00      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:需要   ons   blank   eal   get   lse   false   语法   tle   

没错,你没有看错,虽然前面说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)。

学JS的心路历程 - JS的Class

标签:需要   ons   blank   eal   get   lse   false   语法   tle   

原文地址:https://www.cnblogs.com/lannyQ-Q/p/10153831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!