es6|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]

【es6|es6 面向对象 ...扩展运算符】3.合并数组
var arr3=[...res,...arr2]; console.log(...arr3); arr3=1 2 3 1 2 3

    推荐阅读