s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板。class
可以看作只是一个语法糖,通过class
关键字,可以定义类。让对象原型的写法更加清晰、更像面向对象编程的语法。
一. Class的基本用法
1. constructor方法
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
} toString() {
return '(' + this.x + ', ' + this.y + ')';
}
ES6的类,完全可以看作构造函数的另一个写法。类的数据类型就是函数,类本身就指向构造函数。使用时候,类必须使用new
调用。
class Point {
// ...
} typeof Point // "function"
Point === Point.prototype.constructor // true prototype对象的constructor属性,直接指向“类”的本身,这与 ES5 的行为是一致的。 class Bar {
doStuff() {
console.log('stuff');
}
} var b = new Bar();
b.doStuff() // "stuff"
类的所有方法都定义在类的prototype
属性上面。在类的实例上面调用方法,其实就是调用原型prototype对象上的方法,所以类的新方法可以添加在prototype
对象上面。Object.assign
方法可以很方便地一次向类添加多个方法。
class Point {
constructor() {
} toValue() {
}
} // 等同于 Point.prototype = {
constructor() {},
toValue() {},
}; Object.assign(Point.prototype, {
toString(){},
})
2.class的静态属性和实例属性
2.1类的实例属性:类的实例属性可以用等式,写入类的定义之中。(Class 内部只有静态方法,没有静态属性)
class MyClass {
myProp = ; constructor() {
console.log(this.myProp); //
}
为了可读性的目的,对于那些在constructor
里面已经定义的实例属性,新写法允许直接列出。
class ReactCounter extends React.Component {
state = {
count:
};
2.2 类的静态属性:类的静态属性只要在上面的实例属性写法前面,加上static
关键字就可以了。
class MyClass {
static myStaticProp = ; constructor() {
console.log(MyClass.myStaticProp); //
}
}
3. class的静态方法:类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
} Foo.classMethod() // 'hello' var foo = new Foo();
foo.classMethod()// TypeError: foo.classMethod is not a function //如果静态方法包含this关键字,这个this指的是类,而不是实例。静态方法可以与非静态方法重名。
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。
3.1实例方法
/* --- 实例方法 -- */
function ClassA() { //定义构造函数
};
ClassA.prototype.func = function() { //在构造函数的原型上添加方法
console.log("This is an instance method.");
}
var instance = new ClassA(); //新建一个实例
ClassA.func(); // Error:ClassA.func is not a function
instance.func(); //This is an instance method.
上面代码结果报错如下。。。
// 定义在某个具体对象(实例)上的方法是实例方法
function ClassA() { //定义构造函数
};
var instance = new ClassA(); //新建一个实例
instance.func = function() {
console.log("This is an instance method.")
}
// ClassA.func(); // Error:ClassA.func is not a function
instance.func(); //This is an instance method.
4 this和super关键字
4.1 `super`这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
第一种情况,`super`作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次`super`函数。
4.2
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
5 .类的继承
5.1 Class 可以通过`extends`关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
class Point {
} class ColorPoint extends Point {
}