JavaScript Class介绍以及使用方法(代码说明)

Class

学过Java的小伙伴会发现, 这个class和Java里的class基本语法并没有什么区别… 下面正式开始介绍.

定义类

JavaScript 语言的传统方法是通过构造函数,定义并生成新对象。

1
2
3
4
5
6
7
8
9
10
//例:
function Point (x,y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
}
var oP = new Point(1,2);
console.log(oP);

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,
作为对象的模板。通过class关键字,可以定义类。
基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,
新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
上面的代码用ES6的“类”改写,就是下面这样。

1
2
3
4
5
6
7
8
9
10
11
12
class Point {
constructor(x,y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' +this.y + ')';
}
}
var oP = new Point(1,2);
console.log(oP);
console.log(oP.toString());

需要注意一下几个小问题:

1. 代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。

2. 注意,定义“类”的方法的时候,前面不需要加上function这个保留字,直接把函数定义放进去了就可以了。

3. 另外,方法之间不需要逗号分隔,加了会报错。

4. 类的数据类型就是函数,类本身就指向构造函数

5. 构造函数的prototype属性,在ES6的“类”上面继续存在。
事实上,类的所有方法都定义在类的prototype属性上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
class Point {
constructor() {
this.x = 10;
alert(0);
}
toString() {
alert('1');
}
toValue() {
alert('2');
}
}
console.log(Point.prototype);

这里写图片描述

6. 类的内部所有定义的方法,都是不可枚举的(enumerable)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//例
class Point {
constructor (x,y) {
console.log(x,y);
}
toString() {
console.log(1);
}
}
function Point1 () {
this.toString = function () {
console.log(1);
}
}
Point1.prototype.toValue = function () {
console.log(2);
}
var oP = new Point(1,2);
var oP1 = new Point1();
for (var name in oP) {
console.log(name);// 1 2
}
for (var name in oP1) {
console.log(name);// toString toValue
}

7. 类的实例共享一个原型对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Point {
}
var p1 = new Point();
Point.prototype.say = function () {console.log('YyYy')};
var p2 = new Point();
// 实例的__proto__ 指向构造函数的prototype;
p1.__proto__.printName = function () { console.log('OoOo')};
var p3 = new Point();
p1.printName();//OoOo
p2.printName();//OoOo
p3.printName();//OoOo
p1.say();//YyYy
p2.say();//YyYy
p3.say();//YyYy

继承(单继承)

跟java没啥区别, 但同ES5是有一个区别的; 先看一个继承实例.

1
2
3
4
5
6
7
8
9
10
11
12
13
//例:
class Father {
constructor(){
this.house = 2;
}
}
class Child extends Father{
constructor(){
super();
this.age = 10;
}
}

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES5的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6的继承机制完全不同,

实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。


Class 静态方法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,
// 可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。
// 如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。
//例1
class Foo {
static classMethod() {
console.log('hello');
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod();//报错: foo.classMethod is not a function
//父类的静态方法,可以被子类继承
class Bar extends Foo {
}
Bar.classMethod();//hello
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//例2:
// 静态方法也可以从super对象上调用
class Foo2 {
static classMethod() {
return 'Foo2 staic';
}
}
class Bar2 extends Foo2 {
constructor () {
super();
}
static classMethod() {
console.log(super.classMethod() + ', too');
}
say() {
console.log(super.classMethod() + ', say');//报错 :(intermediate value).classMethod is not a function
}
}
// 子类调用父类的static方法只能在静态函数中调用
var oB2 = new Bar2();
oB2.say();
Bar2.classMethod();
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!