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
推荐阅读
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 六步搭建ES6语法环境
- 数组常用方法一
- jQuery插件
- iOS面试题--基础
- 口红选得好,对象不愁找......
- java静态代理模式
- Python-类和对象
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法