ES6 - Day1-基础知识

1. 面向对象编程介绍

1.1 面向过程编程

面向过程：分析出解决问题的步骤，然后用函数把这些步骤一步一步实现，使用的时候在一个一个依次调用

例子：将大象装进冰箱里

1. 打开冰箱门 --> 2. 把大象装进去 --> 3. 关上冰箱门

1.2 面向对象编程

面向对象：把事物分成一个一个对象，由对象之间分工合作

例子：将大象装进冰箱里

找出对象，并写出对象的功能

1. 大象对象

• 进去

2. 冰箱对象

• 打开
• 关闭

1.2.1 面向对象特效

• 封装性
• 继承性
• 多态性

1.3 面向过程和面向对象的对比

• 面向过程
  • 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用面向过程编程
  • 缺点：没有面向对象易维护，易复用，易扩展
• 面向对象：
  • 优点：易维护，易复用，易扩展，可以设计出低耦合的系统，使系统更加灵活，更易于维护
  • 缺点：性能比面向过程低

2. ES6中的类和对象

2.1 创建类

语法：

class name{
    //class body
}

创建实例:

var xx = new name();

2.2 类的继承

2.2.1 extends关键字

语法:

class Father{
    //父类
    constructor(){}
    sing(){
        console.log('唱歌')
    }
}
class Son extends Father{
    //子类
}
var son = new Son()
son.sing()

2.2.2 super关键字

语法：

class Father{
    //父类
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum(){
        console.log(this.x + this.y)
    }
}
class Son extends Father{
    //子类
    constructor(x,y){
        //子类在构造函数中使用 `super`，必须放到this前面
        super(x,y);	//调用了父类中的构造函数
        this.x = x;
        this.y = y
    }
}
var son = new Son(1,2)
son.sum()	//3

super关键字调用父类的普通函数：

class Father{
    say(){
        console.log("我是父亲")
    }
}
class Son extends Father{
    //子类
    say(){
        console.log(super.say() + "的儿子");
    }
}
var son = new Son(1,2)
son.say()	//我是父亲的儿子

2.3 this的指向问题

• 构造函数里的 this 指向的是创建的实例对象；

• 方法里面的 this 指向这个方法的调用者

var that;
class Star {
    constructor(uname, age){
        that = this;
        this.uname = uname;
        this.age = age;
    }
    singe(){
        // 方法里的 `this` 指向的是 `name` 这个实例对象，因为 `name` 调用了他，谁调用了就指向谁，指向
        console.log(this);
    }
}
var name = new Star("刘德华");
name.singe();
console.log(that === name);	// true

3. 实战案例 - 动态添加标签页

功能需求：

1. 点击 tab栏，可以切换效果
2. 点击 + 号，可以添加 tab项和内容
3. 点击 x 号，可以删除当前的 tab项和内容
4. 双击 tab项文字或内容项文字，可以修改里面的文字内容

抽取对象：Tab对象

1. 该对象具有切换功能
2. 该对象具有添加功能
3. 该对象具有删除功能
4. 该对象具有修改功能

代码示例