唯品秀前端博客

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的实例上,可以读取这个属性。
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(12) 打赏
标签:

上一篇:

下一篇:

相关推荐

1 条评论关于"【ES6】Class类的基本使用 – 带你快速入门秒懂新世界"

表情

最新评论

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

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

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏