es6中类的一些使用方法以及使用时的注意项

297 阅读2分钟

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)

输出为:

image.png

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)

image.png

可以看到 ,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 前面的原因。