b站视频学习以及网道es6学习
es6中类的一些使用方法以及使用时的注意项
1 类的基本写法
constructor(name,age ) {
this.name =name ;
this.aeg =age ;
}
say() {
console.log('老王')
}
}
let p1=new Person('zs',23)
console.log(p1)
输出为:
2 类中的方法与属性
class Person {
constructor(name,age ) {
this.name =name ;
this.aeg =age ;
}
a=1
say() {
console.log('老王')
}
}
let p1=new Person('zs',23)
console.log(p1)
可以看到 ,say()这个方法是定义在了实例 p1 的原型上 这也就使得实例可以通过点语法来调用在定义类时定义的这些方法,定义在构造器外的属性不会在原型上 而是作为该实例的属性。
3 静态方法
实例会通过原型继承类中的方法 ,我们可以用static来定义方法 这种方式定义的方法是不会被继承的 ,只能通过类直接调用
static classMethod() {
return 'hello'
}
}
Foo.classMethod() // 'hello'
4 this 指向
类当中的方法的this 默认是指向实例的
const { say } = p1;
say();
同时在say中输出this ,此时this指向的是运行环境 ,单输出并不是window 而是undefine 。这是因为只要用了类的语法 ,类中的代码块会默认开启严格模式
要解决设个问题 可以通过以下方法
- 1可以通过定义全局变量that ,在类中接收this
- 2 在构造器中用bind :this.say = this.say.bind(this)
- 3 直接用箭头函数
class Obj {
constructor() {
this.logThis = () => this;
}
}
const myObj = new Obj();
myObj.logThis() // Obj{}
箭头函数内部的this总是指向定义时所在的对象。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。
5 类的继承
Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
class Father {
}
class Son extends Father {
}
子类的方法以及构造器中必须 调用 super 关键字
上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。这也就是super关键字必须写在 this 前面的原因。