ES6面向对象须知

语法糖

es6 的面向对象是 es5 的语法糖 , 跟之前的逻辑还有实现的效果是一样的 , 只不过写法更方便了 , 可以认为是对原来的原型的写法进行了封装

constructor

constructor函数就相当于是es5里的构造函数 , 用来定义属性

定义类

class Animal{
    constructor(name,age){
        this.name=name;	//属性
        this.age=age;
    }
    
    run(){	//方法
        alert(this.name+"runrunrun");
    }//不加static的方法就相当于是es5里在原型上扩充的方法 被实例化对象调用
    
    static run2(){
        alert(this);//this不再指向实例化对象而是指向整个类Animal
    }//在方法的前面加上static关键字 这个方法就变成了静态方法，被整个类调用，不能被实例化对象调用
}

var dog=new Animal("dog","19");
dog.run();	//dogrunrunrun
Ani/mal.run2();	//整个animal类的代码

继承

es6中添加了专门用来实现继承的关键字 extends 和 super

class Cat extends Animal{
    constructor(name,age,miao){
        super(name,age);	//继承父类animal的属性
        this.miao=miao;		//cat自己的属性
    }
    say(){	//cat自己的方法
        alert(this.name+"喵喵喵");
    }
}
var cat1=new Cat("小花",2,"猫叫");
cat1.say();	//小花喵喵喵(自己的方法)
cat1.run();	//小花runrunrun(继承父类的方法)

以上代码 cat 继承animal , animal是父类也叫做超类

剩余运算符和扩展运算符…

(1) …作为 rest 剩余运算符 , 把剩余的数组成一个数组

// 1.解构赋值的时候 , 把解构源剩余的值解构为一个数组
   let [a,b,...c]=[1,2,3,4];  
   console.log(a,b,c);	//1,2,[3,4]

//2....作为函数的参数
   function fun1(a,...b){
      console.log(a,b);	//1,[2,3] 
   }
   fun1(1,2,3);

(2) …作为扩展运算符 (展开运算符 spread)

// 1.把类数组转化为数组
   var set=new Set([1,2,3,1,2]);
   var res=[...set];//[1,2,3]	(set有唯一性,可以达到去重的效果)

// 2.复制数组(第一层的深复制)
   var arr2=[...res];
   console.log(arr2);	//[1,2,3]

// 3.合并数组
   var arr3=[...res,...arr2];
   console.log(arr3);	//[1, 2, 3, 1, 2, 3]
   console.log(...arr3);	//1 2 3 1 2 3