Dovis's blog

# ES6中的class基本语法

通过声明式定义的变量的性质与 function不同，更为类似 let和 const，不会提前解析，不存在变量提升，不与全局作用域挂钩和拥有暂时性死区等。

ES5的继承可以参考之前的文章：继承

ES6的class可以看作是一个语法糖，因为绝大部分功能ES5都能实现。新的class写法只是让对象原型的写法更加清晰，更像面向对象变成的语法而已。（所以类class相当于原型对象）

ES5构造函数创建新对象：

function Point(x, y) {
    this.x = x;
    this.y = y;
}
Point.prototype.toString = function () {
    return '(' + this.x + ',' + this.y + ')'
} // 原型方法

var p = new Point(x, y)
1
2
3
4
5
6
7
8
9

用类的语法重写：

class Point {
    constructor(x, y) {
        this.x = x; // this代表实例对象
        this.y = y;
    } // 构造方法
    toString() {
        return '(' + this.x + ',' + this.y + ')'
    } // 方法之间不需要加逗号分隔，会报错
}

type of Point // function 类的数据类型就是函数
Point === Point.prototype.constructor // true
1
2
3
4
5
6
7
8
9
10
11
12

# constructor方法

类的默认方法，通过new命令生成的对象实例时自动调用该方法。一个类必须有默认方法。

constructor方法默认返回实例对象（this），不过完全可以指定返回另外一个对象。

class Foo {
    constructor () {
        return Object.create(null);
    }
}
1
2
3
4
5

这样子就导致实例对象不是Foo类的实例

new Foo() instanceof Foo // false
1

# 与构造函数相同的地方

  1. ES5的构造函数Point对应ES6的Point类的构造方法。使用类的时候也是像构造函数一样直接使用new操作符即可。
  2. 类的所有方法都定义在类的prototype属性上。所以上述例子如同：
Point.prototype = {
    constructor() {},
    toString() {},
    toValue() {}
}
1
2
3
4
5
  1. 与ES5一样，实例的属性除非显式定义在本身，即this对象上，否则都是定义在原型即(class)上。
  2. 与ES5一致类的所有实例共享一个原型对象
var p1 = new Point(2, 3);
var p2 = new point(3, 2);

P1.__proto__ === p2.__proto__ // true
1
2
3
4

意味着可以通过实例的__proto__属性为类添加方法

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ',' + this.y + ')'
    }
}
console.log(Point.prototype.constructor === Point)
var p1 = new Point(2,3);
p1.__proto__.printName = function () {
    console.log(3333)
};
p1.printName()
var p2 = new Point(4,2)
p2.printName() // 3333
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

因为p2的原型和p1的原型一样，所以也一样可以调用printName方法。这意味着，使用实例的__proto__属性改写原型必须相当谨慎，不推荐使用，因为这会改变Class的原始定义，影响到所有实例。

  1. 都有name属性
// ES6
calss Point {}
console.log(Point.name) // Point

// ES5
function Point() {}
console.log(Point.name) // Point
1
2
3
4
5
6
7

在类的实例上调用方法，其实就是调用原型上的方法

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true
1
2
3
4

类的所有方法，除构造方法之外都定义在prototype对象上，所以类的新方法可以添加在该对象上。利用Object.assign()

TIP

类内部所定义的全部方法是不可枚举的，在构造函数本身和prototype上添加的属性和方法是可枚举的。类内部定义的方法默认是严格模式，无需显式声明。

# 与ES5行为不一致的地方

  1. 类的内部定义的所有方法都是不可枚举的，这一点和ES5的行为不一致
Object.keys(Point.prototype) // []
1
  1. 类的属性名可以采用表达式
let methodName = 'getArea';

class Square {
    constructor(length) {

    }
    [methodName] () {

    }
}
1
2
3
4
5
6
7
8
9
10
  1. 类和模块内部默认使用严格模式
  2. 类必须使用new来调用，不然会报错。普通构造函数是不一定需要。
  3. typeof下类为function，而原型对象为object。虽然function也是特殊的object
  4. 类不存在变量提升
new Foo(); // ReferenceError
class Foo {}
1
2

# Class表达式

const MyClass = class Me {
    getClassName() {
        return Me.name
    }
}
1
2
3
4
5

类的名字是MyClass而不是Me，Me只在类的内部代码可用，指代当前类。

let inst = new MyClass();
inst.getClassName() // Me
1
2

如果内部没用到则可以直接省略

# 私有方法

  1. 将私有方法移除模块，因为模块内部的所有方法都是对外可见的。
class Widget {
    foo (baz) {
        bar.call(this, baz);
    }
}
function bar(baz) {
    return this.snaf = baz;
}
1
2
3
4
5
6
7
8
  1. 利用 Symbol值的唯一性将私有方法的名字命名为一个Symbol值。
const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass {
    // 公有方法
    foo(baz) {
        this[bar](baz);
    }
    // 私有方法
    [bar](baz) {
        return this[snaf] = baz;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# this的指向

类的方法内部如果含有this，默认指向类的实例。但是，一旦单独使用该方法，便会报错。这个时候this指向该方法运行时所在环境。

class Logger {
    printName(name = 'there') {
        this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
logger.printName() // Hello there
const {printName} = logger
console.log(printName)
printName()
1
2
3
4
5
6
7
8
9
10
11
12
13

img

# 解决方案

  1. 在构造方法中绑定this，这样就不会找不到print方法了
constructor() {
    this.printName = this.printName.bind(this)
}
1
2
3
  1. 使用箭头函数
class Logger {
    constructor() {
        this.printName = (name = 'there') =>{
            this.print(`Hello ${name}`)
        }
    }
    // printName(name = 'there') {
    //     this.print(`Hello ${name}`);
    // }
    print(text) {
        console.log(text);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 还有一种利用Proxy，在获取方法的时候自动绑定this。

# Class的取值函数（getter）和存值函数（setter）

不能直接定义属性，并不表示类不能有原型或静态属性。解析class会形成一个构造函数，因此只需像为构造函数添加属性一样为类添加即可。更为直接也是推荐的是只使用getter函数定义只读属性。

在类内部使用get和set关键字对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
    constructor() {},

    get prop() {
        return 'getter'
    }
    set prop(value) {
        console.log('setter: ' +value);
    }
}
let inst = new MyClass();
inst.prop = 123; // setter: 123
inst.prop // 'getter'
1
2
3
4
5
6
7
8
9
10
11
12
13

# Class的Generator方法

某个方法前加上星号*，表示该方法是一个Generator函数。

# Class的静态方法

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

class Foo {
    static classMethod() {
        console.log('hello')
    }
}
Foo.classMethod(); // hello
var foo = new Foo()
foo.classMethod() // gouzao.js:8 Uncaught TypeError: foo.classMethod is not a function
1
2
3
4
5
6
7
8

父类的静态方法可以被子类继承

class Bar extends Foo {}
Bar.classMethod()
1
2

静态方法也可以从super对象上调用

# Class的实例属性和静态属性

# 实例属性

以前我们都是在类的构造方法里面写。 现在的写法：

  1. 可以用等式写入类的定义之中。
class MyClass {
    myProp = 42;
    constructor() {
        console.log(this.myProp) // 42
    }
}
1
2
3
4
5
6
  1. 对于那些已经在构造方法定义的实例属性，新写法允许直接列出

# 静态属性

旧方法：

静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象上的属性。

class Foo {}
Foo.prop = 1;
1
2

现在只要在实例属性的例子前面加上static关键字就可以了

class MyClass {
    static myStaticProp = 42;
    constructor() {
       console.log(MyClass.myStaticProp) // 42
    }
}

var class1 = new MyClass()
console.log(class1.myStaticProp) // undefined
1
2
3
4
5
6
7
8
9

# new.target属性

← Class的继承 →