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__上。
image.png
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";
}
网友评论