es6 面向对象 ...扩展运算符

在学习es6的面向对象之前 我们需要对es5的面向对象有一定的了解，明确实现继承的方法以及构造函数

1 es5的面向对象
在es5的面向对象里 需要明确什么是构造函数以及他与普通函数的区别，还有继承以及继承的属性和方法
1）构造函数
含义：当一个函数用于创建对象时，称为构造函数

（1）与普通函数的区别： 声明上对比：
1. 普通的函数声明需要带有返回值和无返回值void这个关键字
2. 构造函数定义的时候，不需要有返回值这一说。 （2） 函数名对比
1. 普通的函数，函数名可以遵循标识符的规则，最好有意义函数名
2. 构造函数名必须和当前类名保持一致 （3）作用上对比：
1. 普通函数是为了修饰一个对象的行为时，我们去定义函数
2. 构造函数是为了对象的初始化并且可以给变量赋值 （4） 函数重载对比：
1. 普通函数在一个类中可以完成函数的重载
2. 构造函数也可以在一个类完成函数的重载

2）实现继承的方法
1.call和apply
2.直接改变prototype
3.比如dog类继承animal类 dog.prototype=new Animal(); Dog.prototype.constructor=Dog;
代码：

  function Animal(name){
            this.name=name
        }
        Animal.prototype.run=function(){
            alert("runrunrun"+this.name);
        }//实例化对象执行的方法
        Animal.run2=function(){
            alert("22222");
        }//整个类执行的方法
        var dog=new Animal("dog");
        dog.run();
        Animal.run2();

es6的面向对象

(一) ES6中对象的创建
我们使用ES6的class来创建Student

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


        }

(二) ES6中对象的继承
es6中添加了专门用来实现继承的关键字 extends super

 class Animal{
            constructor(name,age){
                this.name=name;
                this.age=age
            }
            run(){
                alert(this.name+"runrunrun");
            }
            static run2(){
                alert(this);
            }
        }

  class Cat extends Animal{    cat继承animal animal是父类也叫做超类
            constructor(name,age,miao){
                super(name,age);
                this.miao=miao;
            }
            say(){
                alert(this.name+"喵喵喵") 
            }
        }
        var cat1=new Cat("小花",2,"猫叫");
        cat1.say();     小花喵喵喵
        cat1.run();     小花runrunrun

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

…运算符
可分为：剩余运算符（rest） 扩展运算符（spread）
一 …作为rest剩余运算符 把剩余的数组组成一个数组

1 解构赋值的时候，把解构源剩余的值解构为一个数组

let [a,b,...c]=[1,2,3,4];  
        console.log(a,b,c);  a=1 b=2 c=[3,4]

2…作为函数的参数

  function fun1(a,...b){
           console.log(a,b)  a=1 b=[2,3]
        }
        fun1(1,2,3)

二 …作为扩展运算符 展开运算符 spread

1.把类数组转化为数组

 var set=new Set([1,2,3,1,2]);   set类似于数组去重的作用
        // [1,2,3];
        var res=[...set];//【1，2，3】

2.复制数组(第一层的深复制)

   var arr2=[...res];
   console.log(arr2)    arr2=[1,2,3]

3.合并数组

   var arr3=[...res,...arr2];
    console.log(...arr3); arr3=1 2 3 1 2 3