唯品秀前端博客
当前位置: 前端开发 > JavaScript > 【ES6】Class类的基本使用

【ES6】Class类的基本使用

2018-08-15 分类:JavaScript 作者:管理员 阅读(1676)

js语言中,生成实例对象的传统方法就是通过构造函数:

1
2
3
4
5
6
7
8
9
function Point(x, y) {
     this.x = x;
     this.y = y;
 }
Point.prototype.toString = function () {
     return `( ${this.x} , ${this.y} )`
 }
var p = new Point(1, 2);
p.toString(); //"(1,2)"

这种面向对象和(Java、c++)差别很大,让人感到困惑;ES6提供了class(类)这个概念,作为对象的模板。通过class关键字,可以定义类;

基本上,ES6的class可以看做知识一个语法糖,它的绝大部分功能,ES5都可以看到,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程语法而已;上面的代码用class改写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `( ${this.x}, ${this.y} )`;
    }
    toValue() {
        return this.x + this.y;
    }
}
var p = new Point(1, 2);
p.toString(); //"(1,2)" p.toValue(); //3

定义了一个Point类,他里面有个constructor方法,这就是构造方法;而this关键字则代表实例对象,也就是说,ES5的构造函数Point,对应ES6的Point类的构造方法; Point类除了构造方法,还定义了一个toString方法,定义类的方法的时候,前面不需要加function这个关键字,直接将函数定义放进去就行了 ,另外,方法之间不需要逗号分隔;

构造函数的prototype属性,在ES6的类上继续存在,实际上,类的所有方法都定义在类的prototype属性上面;

constructor方法

constructor方法是类的默认方法,通过new 命令生成对象实例时,自动调用该方法,一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会被默认添加;

1
2
3
4
class Point{ }
//等同于
class Point { constructor () { } }
//定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。

不存在变量提升

1
2
new Foo();//ReferenceError
class Foo();

Foo类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。

Class 的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

1
2
3
4
5
6
7
8
9
class Foo {
    static classMethod() {
        return 'hello';
    }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。

1
2
3
4
5
6
7
8
9
10
11
12
class Foo {
    static bar() {
        this.baz();
    }
    static baz() {
        console.log('hello');
    }
    baz() {
        console.log('world');
    }
}
Foo.bar() // hello

静态方法bar调用了this.baz,这里的this指的是Foo类,而不是Foo的实例,等同于调用Foo.baz。另外,从这个例子还可以看出,静态方法可以与非静态方法重名。

父类的静态方法,可以被子类继承。

1
2
3
4
5
6
7
class Foo {
    static classMethod() {
        return 'hello';
    }
}
class Bar extends Foo {}
Bar.classMethod() // 'hello

静态方法也是可以从super对象上调用的。

Class 的静态属性和实例属性

静态属性指的是 Class 本身的属性,即Class.propName,而不是定义在实例对象(this)上的属性。

1
2
3
4
class Foo {}
Foo.prop = 1;
Foo.prop // 1
//Foo类定义了一个静态属性prop,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。
类的实例属性

类的实例属性可以用等式,写入类的定义之中

1
2
3
4
5
6
7
8
class MyClass {
    myProp = 42;
    constructor() {
        console.log(this.myProp);
        // 42
    }
}
//myProp就是MyClass的实例属性。在MyClass的实例上,可以读取这个属性。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(8) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
8

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 1 条评论 - 【ES6】Class类的基本使用

  1. 948 Windows 7 搜狗浏览器 2.X

    三天两头过来看一看,每次看完都有新体验!

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 219 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 829 条
  • 链接总数: 13 个
  • 标签总数: 405 个
  • 建站时间: 943 天
  • 注册用户: 1258 人
  • 访问总量: 8872336 次
  • 最近更新: 2019年7月15日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线