ES6里新增的类以及类的继承

类(class)

ES6引入了class(类)这个概念，作为对象的模板。通过class关键字可以定义类。

class Person ={
    constructor(name,age){
        console.log( `构造函数执行了,${name},${age}` );
   }
}

let p1 = new Person('Strive',18);
console.log(typeof Person) ;  // function

再来看个例子:

class Point {
constructor(x, y){
       this.x=x;
       this.y=y;
}

tostring(){
        return '('+this.x’+'+this.y+’)’ ;
   }
}

var point =new Point (2, 3);
point.tostring()        //(2, 3)

上面的代码定义了一个“类”,可以看到里面有一个 constructor函数,这就是构造函数。而this关键字则代表实例对象。

再来看个例子:

最终打印出 名字为:Strive 年龄:18

类的继承

可以通过 extends关键字实现类的继承，看个例子：

        // 父类

       class  Person{
              constructor(name){
                  this.name = name;  
              }

              showName( ){
                   return ` 名字为:${this.name}`;
              } 

              showTest( ){
               return  ` 测试父类和子类有相同的方法名`;
             }
       }

       // 子类
      class  Student extends Person{             
             constructor(name,skill){
                  super(name);
                  this.skill = skill; 
              }
             showSkill( ){
                return   `张三的技能为${ this.skill }`
              }

             showTest( ){
               return  '子类里的showTest'
             }
       }

       // 调用

      let  stu1 = new Student('Strive', '逃学');
      console.log(stu1.showName( ));  //名字为Strive
      console.log(stu1.showSkill( ));  //张三的技能为逃学
      console.log(stu1.showTest( )); // 子类里的showTest

再来看个类的继承实现拖拽的例子:

效果如下:

div1和div2都可拖拽，且div2向左只能拖到div1这样的边界