ES6面向对象

ES6面向对象

一、面向对象

1、面向过程编程POP

面向过程(Process-oriented programming)就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个地依次调用就可以了。

2、面向对象OOP

面向对象(Object Oriented Programming)是把实务分解成一个个对象，然后由对象之间分工合作。

先找出对象，并写出这些对象的功能。

面向对象是以对象功能来划分问题，而不是步骤。

3、面向对象的优点

在面向对象程序开发思想中，每个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型项目。

面向对象的特性：

• 封装
• 继承
• 多态

4、面向过程和面向对象的对比

(1)面向过程

• 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
• 缺点：没有面向对象易维护、易复用、易扩展。

(2)面向对象

• 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更灵活、更易于维护。
• 缺点：性能比面向过程低。

二、ES6中的类和对象

1、类 class

ES6中新增了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象的。

• 类抽象了对象的公共部分，它泛指某一大类(class)。
• 对象特指某一个，通过类实例化一个具体的对象。

2、创建类和对象

// 1.创建类class
class Star {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}
// 2.利用类创建对象new
new Star();

3、类constructor构造函数

constructor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor()。

4、类添加方法

直接写到类中，注意不需要写function关键字。多个函数方法之间不需要添加逗号分隔。

		class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            // 方法不需要使用function关键字，方法之间不需要加逗号
            // 可以传入参数
            sing(song) {
                console.log(this.uname + '唱' + song);
            }
        }
        // 2.利用类创建对象new
        var ldh = new Star('刘德华');
        console.log(ldh);
        ldh.sing('《冰雨》');

三、类的继承

程序中的继承：子类可以继承父类的一些属性和方法。

1、extends关键字

子类继承父类中的money()方法。

		// 1、类的继承
        class Father {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        class Son extends Father {

        }
        var son = new Son();
        son.money();

但是，下面代码会报错。因为父类中的sum()方法，this指向的是父类的数据，而子类在调用时，会发生错误。

		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) {
                this.x = x;
                this.y = y;
            }
        }
        var son = new Son(1, 2);
        son.sum();

由此，出现super关键字。

2、super关键字

使用super关键字，调用父类的方法。将子类对象传入的参数调用父类的构造函数，实现计算。

		class Son extends Father {
            constructor(x, y) {
                // this.x = x;
                // this.y = y;
                super(x, y);  // 调用父类中的构造函数
            }
        }

super关键字用于访问和调用对象父类上的函数。除了可以调用父类的构造函数，还可以调用父类的普通函数。

(1)不使用super关键字

		class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father {
            // 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
            // 如果子类没有，就去查找父类有没有这个方法，如果有。则执行父类的方法(就近原则)
            say() {
                console.log('我是儿子');
            }
        }
        var son = new Son();
        son.say();

此时，直接调用子类中的say方法。

继承中的属性或者方法的查找原则：
1、继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
2、如果子类没有，就去查找父类有没有这个方法，如果有。则执行父类的方法(就近原则)

(2)使用super关键字

		class Son extends Father {
            say() {
                // console.log('我是儿子');
                // super.say()就是调用父类中的普通函数say()
                console.log(super.say() + '的儿子');
            }
        }

使用super.say()调用父类中的普通函数say()。

3、子类继承父类的方法同时扩展自己方法

子类继承父类的sum()方法，同时扩展自己的substract()方法。

		// 父类有加法方法
        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() 调用父类的构造函数
                // super 必须在子类this之前调用
                super(x, y);
                this.x = x;
                this.y = y;
            }
            substract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(5, 3);
        son.substract();
        son.sum();

注意，子类中利用super()调用父类的构造函数时，super一定要在子类this之前调用。

4、使用类的注意事项

• 1、类里面共有的属性和方法一定要加this使用
• 2、在ES6中，类没有变量提升，所以必须先定义类，才能通过类实例化对象

		class Star {
            constructor(uname, age) {
                // 2、类里面共有的属性和方法一定要加this使用
                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;  // sing不要加括号，不然会立即执行
            }
            sing() {
                // console.log('hi');
                console.log(this.uname);
            }
        }
        // 1、在ES6中，类没有变量提升，所以必须先定义类，才能通过类实例化对象
        var ldh = new Star('刘德华');

5、this的指向问题

		var that;
        var _that;
        class Star {
            constructor(uname, age) {
                // 3、constructor里面的this指向的是创建的实例对象
                that = this;
                console.log(this);
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            sing() {
                // sing方法中的this指向的是btn，因为这个按钮调用了这个函数
                console.log(this.uname);  // undefined
                console.log(that.uname);  // that中存储的是constructor中的this
            }
            dance() {
                // dance里面的this 指向的也是实例对象，因为该实例对象调用了这个函数
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('刘德华');
        console.log(that === ldh);
        ldh.dance();
        console.log(_that === ldh);

• constructor里面的this指向实例对象
• 方法里面的this指向这个方法的调用者

分析sing()方法和dance()方法的this指向：

1、sing()方法中的this指向的是btn，因为是这个按钮调用了这个函数：

​ 所以打印this.uname输出的是undefined；如果想输出constructor中的uname，则需要在外面声明一个全局变量that，并将constructor中的this用that存储起来，用于之后的调用。

2、dance()方法中的this指向的是实例对象，因为是实例对象ldh调用了这个函数

四、面向对象案例

面向对象Tab栏。

1、功能需求分析

/**功能需求：
 * 1、点击tab栏，可以切换
 * 2、点击+号，可以添加tab项和内容项
 * 3、点击x号，可以删除当前的tab项和内容项
 * 4、双击tab项文字或者内容项文字，可以修改里面的内容
 */

2、抽取对象：Tab对象

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

3、模块划分

在构造函数中，获取元素；在init函数中，初始化操作让相关的元素绑定事件。

class Tab {
    constructor(id) {
        // 获取元素
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        // 自动调用初始化函数：不过要记住加this
        this.init();
    }
    init() {
        // 初始化操作：让相关元素绑定事件
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = function () {
                console.log(this.index);
            }
        }
    }
    // 1、切换功能
    toggleTab() {
    }
    // 2、添加功能
    addTab() {
    }
    // 3、删除功能
    removeTab() {
    }
    // 4、修改功能
    editTab() {
    }
}
var tab = new Tab('#tab');

4、切换功能

要注意this的指向问题；清除其他元素样式时，可以单独写一个clearClass函数，将lis和sections的样式一块删除，然后在切换功能的函数中进行调用清除的方法。

// 1、切换功能
    toggleTab() {
        that.clearClass();
        this.className = 'liactive';
        // this.sections[this.index].className = 'conactive';  // 会报错，因为此时this指向的是li
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }

5、添加功能

(1)创建新的选项卡li和新的内容section

• 以前的做法：动态创建元素createElement，但元素中的内容较多，需要innerHTML赋值，再appendChild追加到父元素里面。
• 更高级的做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中。

appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素。

(2)把创建的两个元素追加到对应的父元素中

// 2、添加功能
    addTab() {
        that.clearClass();
        // (1)创建新的选项卡li和新的内容section
        // 以前的做法：动态创建元素createElement，但元素中的内容较多，需要innerHTML赋值，在appendChild追加到父元素里面。
        // 更高级的做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中。
        var random = Math.random();
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
        var section = '<section class="conactive">测试' + random + '</section>';
        // (2)把创建的两个元素追加到对应的父元素中
        that.ul.insertAdjacentHTML('beforeend', li);
        that.tabscon.insertAdjacentHTML('beforeend', section);
        that.init();
    }

由于添加新元素时，新元素也需要进行初始化，所以需要重新获取元素(li, section, 以及关闭标签)

	// 重新获取所有的li 和 section 和 关闭按钮
    // 否则新添加的li 和 section没有切换效果
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
    }

在init中调用，每次初始化前都需要先重新获取元素；添加完后也要调用，以重新获取元素。

6、删除功能

删除时，点击关闭图标，首先获取对应的索引。还要阻止冒泡事件：防止触发li的切换点击事件。

然后分为：

• 删除的是当前未选中的li，则原来选中状态的li保持不变

  也就是删除后如果还有li处于选中状态，则直接返回。

• 删除的是当前选中的li，则让其前面的li处于选中状态

  此时需要判断当前li是否存在，即that.lis[index]是否为真。

// 3、删除功能
    removeTab(e) {
        // 阻止冒泡：防止触发li的切换点击事件
        e.stopPropagation();
        var index = this.parentNode.index;
        console.log(index);
        // 根据索引号删除对应的li 和 section，remove()方法可以直接删除指定的元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        // 当删除未选中的li时，原来处于选中状态的li保持不变
        if (document.querySelector('.liactive')) return;
        // 当删除了选中状态的li的时候，让它前面的li处于选定状态
        index--;
        that.lis[index] && that.lis[index].click();
    }

7、编辑功能

核心思路：双击文字时，在元素内部生成一个文本框，当失去焦点或者按下回车后把文本框输入的值赋给原先元素即可。

// 4、编辑功能
    // 核心思路：双击文字时，在元素内部生成一个文本框，当失去焦点或者按下回车后把文本框输入的值赋给原先元素即可
    editTab() {
        var str = this.innerHTML;
        // 如果双击文字，则会默认选定文字，此时需要双击禁止选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        // alert(11);
        this.innerHTML = '<input type="text">';
        var input = this.children[0];
        input.value = str;
        input.select(); // 让文本框中的内容处于选定状态
        // 离开文本框就把文本框中的值给span
        input.onblur = function () {
            this.parentNode.innerHTML = this.value;
        }
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur(); // 手动调用表单失焦事件，不需要鼠标离开操作
            }
        }
    }

由于上方的导航模块和下方的内容模块操作一致，所以都调用editTab()这个方法。

this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;