ES6-class

取值函数和存值函数;

    和ES5一样;同样通过set和get关键字;对某个属性进行存和取得拦截

class MyClass{ constructon(){} get prop(){ return 'getter' } set prop(value){ return console.log('setter:'+value); } };
var inst=new MyClass();
inst.prop='123';
//setter:123
inst.prop
//getter;
上面代码中prop对应有相应的取值函数和存值函数;因此取存都被进行自定义了;


存值和取值都是定义在Descriptor[描述]属性上的;例如如下代码

class CustomHtmlElement{
constructor(element){
this.element=element;
}
get html(){
return this.element.innerHTML;
}
set html(element){
this.element.innerHTML=value;
}
};


与函数一样;类可以使用表达式的形式定义;
const MyClass=class Me{
getClassName(){
return Me.name;
}
};
这个类的名字是MyClass;不是Me;Me只是在类的内部使用;代替当前这个类;
let inst=new MyClass();
inst.getClassName();//Me;
Me.name//出错;Me is not defined;
上面的代码说明;Me只是在函数的内部使用;如果内部没用的话;也可以直接省掉;
const MyClass=class{}
let person=new class{
constructon(name){
this.name=name;
}
sayName(){
console.log(this.name);
}
}('张三');
person.sayName();
上面代码中,person是一个立即执行的类的实例。

**注意事项:

  • 类和模块默认为严格模式;所以不需要使用use strict;

  • 不存在声明提升;
    new Foo();//Error;
    class Foo();
    上面个的代码中;Foo类使用在前;定义在后;这样报错;ES6不会把类的声明提升到头部。
    {
    let Foo=class{};
    class Barextends Foo{
    }
    };
    这样代码不会出错;如果存在变量提升就会出错;因为class被提升到代码头部;而let不会;所以导致Bar继承Foo的时候,Foo还没有定义;

  • name属性
    由于本质上;ES6的类只是ES5的构造函数的一层包装;所以函数的许多特性都被class继承,包括name属性
    class Point{};
    Point.name//'Point'

  • Generator方法;
    如果某个方法之前加上了* 就表示Generator函数。
    Class Foo{
    constructor(...args){
    this.args=args;
    }
    *Symbol.iterator{
    for(let arg of this.args){
    yield arg
    }
    }
    }
    for (let x of new Foo('hello','world')){
    console.log(x);
    };
    //hello
    //world;
    上面代码中Foo类的Symbol.iterator方法前面有个iterator前面有一个星号;表示该方法是一个Generator函数;Symbol.iterator方法返回一个Foo类的默认遍历器;for...of循环会自动调节用这个遍历器;

  • this的指向;
    类的方法内部如果含有this;它默认只想这个类的实例;但是必须要非常小心;一旦单独使用该方法,很可能报错
    class Logger{
    printName(name='there'){
    tthis.print(hello ${name})
    }
    print(text){
    console.log(text)
    }
    };
    const logger = new Logger()
    const {printName}=logger;
    printName();//Type

2静态方法;

类相当于实例的原型;所有在类中定义的方法;都会被实例继承;如果在一个方法前面加上static;就表示该方法;不会被实例继承;而是只能通过类调用;这就称为静态方法;
class Foo{
static classMethod(){
return 'hello'
}
};
Foo.classMethod();//hello;
var foo=new Foo();
foo.classMethod();
//TypeError:foo.classMethod is ot a function;
上面代码中,Foo类的classMethod方法前面有static关键字;表明该方法;是一个静态方法;可以直接调用;不能继承使用;
父类的静态方法;可以别子类继承。
class Foo{
static classMethod(){
return 'hello'
}
}
class Bar extends Foo{
}
Bar.classMethod();//hello;
上面代码中父类Foo有个静态方法;
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。另外,从这个例子还可以看出,静态方法可以与非静态方法重名。

class Foo{
static classMethods(){
retutn 'hello'
}
}
class Bar extends Foo{
static class Method(){
return super.classMothod()+",too";
}
}
Bar.classMethod();//hello ,too;

3.实例属性的新写法;

实例属性除了

你可能感兴趣的:(ES6-class)