js与es6对比
1.js中没有类(class)这个概念,通过构造函数的方式实例化对象。
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);
2.es6中,引入类这个概念。
- constructor方法,就是构造方法。(对应上面js代码中的构造函数Point)。
- this指向实例化对象。
- toString是类原型对象上的方法。
- 类不存在变量提升。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
//注意定义方法的时候,这里不用function关键字哦
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
实例化的时候,也是使用new
。跟构造函数的用法一样。
var p = new Point(1, 2);
类的方法
1.类所有的方法都是定义在原型对象prototype上的,包括constructor也是类原型对象上的方法。
class Point {
constructor() {
// ...
}
toValue() {
// ...
}
}
// 等同于
Point.prototype = {
constructor() {},
toValue() {},
};
2.在类的实例上面调用方法,其实就是调用原型上的方法。
class B {}
let b = new B();
//实例化对象的constructor 是在__proto__的,不过原型链中,
//在自身上找不到的方法或者属性时,会原型上找。
//即b.constructor==b.__proto__.constructor
b.constructor === B.prototype.constructor // true
3.类的内部所有定义的方法,都是不可枚举的。
4.属性可以使用表达式,例如下面的类的方法名就叫做“sayHello”
let methodName = 'sayHello';
class Square {
constructor() {
}
[methodName]() {
// ...
}
}
constructor 方法
1.constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
2.constructor
方法,直接指向“类”的本身。(与es5中一致)
console.log(Point===Point.prototype.constructor) //true
类的实例
1.通过new来实例化对象,不加会报错。
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);
2.实例化的时候,在类的constructor中通过this定义的属性,是实例对象自身的方法。而在类中定义的方法(例如上面的toString方法),则会挂在实例对象原型__proto__
上。
get和set
get取值函数,set存值函数。(一般用不到,懒得写,知道有这么回事得了~~)
静态方法
在方法上加static
关键字,就是“静态方法”。
- 可以直接通过类调用。
- 静态方法中的this指向的是类,而不是实例,所以不会被实例继承。
class Foo {
static classMethod() { //静态方法
return 'hello';
}
}
Foo.classMethod() // 'hello'
- 父类的静态方法,可以被子类继承。
- 静态方法也是可以从super对象上调用的。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod();
}
}
Bar.classMethod() // "hello"
实例属性的新写法
实例属性一般在constructor的通过this定义,也可以定义在类的最顶层。
class Par{
bb="hello"; //实例的属性可以在顶层定义,不用加this
constructor (){
this.aa=1;
}
}
var p=new Par();
console.log(p.bb) // hello
静态属性
静态属性就是类自身的属性。
class Par{
constructor (){
//....
}
}
Par.aa="haha"; //aa是静态属性
console.log(Par.aa) //"haha"
目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static
关键字。
class Par{
// 新写法
static aa="haha";
}