写在前面:
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
在本文中我们将学习如何创建一个类和对象
,如何在类中添加方法
,类的继承
,super关键字
,类和对象的三个注意点。
一.如何创建类和对象
class Star{
//类的共有属性放在constructor 里面
constructor(name,age){
this.name=name;
this.age=age;
}
}
//利用类创建对象new
var ldh =new Star("刘德华",19);
var zxy =new Star('张学友',18);
console.log(ldh);
console.log(zxy);
这里讲一下程序是怎么执行的,首先class关键字创建了一个Star类自动生成了constractor函数,这个函数接收传递的参数,返回实例。接着创建一个对象同时自动调用cconstractor函数。new实例化一个对象,那么现在刘德华和张学友就是一个实例,这两个实例传递给name,name接着传值给this.name,this指向的是创建的实例。
二.在类中添加方法
下面我们子啊原有的基础上添加一个sing方法
/* jshint esversion: 6 */
// JavaScript Document
//创建一个类 创建一个明星类
class Star{
//类的共有属性放在constructor 里面
constructor(name,age){
this.name=name;
this.age=age;
}
sing(song){
console.log(this.name+ song);
}
}
//利用类创建对象new
var ldh = new Star('刘德华','8');
console.log(ldh);
ldh.sing('冰雨');
输出:
(1)我们类里面所有的函数不需要写function
(2)多个函数方法之间不需要添加逗号分割
三.类的继承
class Father{
//自动生成constructor函数
constructor(){
}
money(){
console.log(100);
}
}
class Son extends Father{
}
var son =new Son();
son.money();
这里使用extends子类继承了父类的方法和属性
四.super 关键字
super关键字用于访问和调用父类上的函数,可以用来调用父类的构造函数和普通函数。
但是子类在构造函数中使用super关键字必须放在this前面(必须先调用父类的构造方法再使用子类的构造方法)
调用构造函数
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
class Son extends Father{
constructor(x,y){
super(x,y);//调用父类的构造方法
}
}
var son=new Son(1,2);
son.sum();
这里也稍微讲一下执行流程,首先我们用new关键字实例化son,实例化子类,把里面的1和2传给了子类的constructor里面的x,y,接着super调用了父类的constructor所以就相当于父类的constructor里x和y是1和2,接下去this.x=1,this.y=2;在接下去sum方法中就是1+2了所以输出结果是3;
注意:
在继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有先执行子类的。
继承中,如果子类里面没有,就直接去父类找有没有这个方法,如果有就执行父类(就近原则)
调用普通函数
class Father{
say(){
return "我是爸爸";
}
}
class Son extends Father{
say(){
console.log(super.say()+"的儿子");
//super.say()就是调用父类中的普通函数say()
}
}
var son=new Son();
son.say();
五.注意点
1.在ES6中没有变量提升,所以必须先定义类,才能通过类实例化对象
2.类中有共同属性和方法一定要加this
3.constructor里面的this指向实例,方法里面的this指向方法的调用者;
本次介绍就到这,学习愉快 😃