面向对象和类的继承（ES6新增）

面向对象编程

面向过程 POP
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。
面向对象 OOP
把事物分解成一个个对象，然后由对象之间分工与合作：

面向对象是以对象功能来划分问题，而不是步骤。
在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工
面向对象编程具有灵活，代码可复用，容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：
封装性
继承性
多态性：同一个对象在不同的时刻，体现出不同的状态。

面向过程就是一份蛋炒饭，面向对象写出来的程序就是一份盖浇饭，想吃什么口味就什么汤汁。

面向对象思维

ES6中的类和对象

类
抽象了对象的公共部分，它泛指某一大类（class） （苹果）
对象特指某一个，通过类实例化一个具体的对象 （我正在吃的这个苹果）

面向对象的思维特点

1. 抽取（抽象）对象公用的属性和行为组织（封装）成一个类（模板）
2. 对类进行实例化，获取类的对象

创建类

注意：类必须使用new实例化对象

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

类里面所有的函数不需要写function关键字

类的继承

super关键字
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(x, y); //调用了父类中构造函数
            }
        }
        var son = new Son(1, 2);
        son.sum();

super关键字可以调用父类普通函数
super.say() 调用父类中的普通函数
继承中的属性或者方法查找原则：就近原则
继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
super必须在子类this之前调用（必须先调用父类的构造方法，在使用子类构造方法）

注意点：

1. 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。
2. 类里面的共有的属性和方法一定要加this使用。因为调用的是类里面的构造函数
3. 类里面的this指向问题
4. constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者

 <button>点击</button>
    <script>
        var _that = 0;
        var that;
        class Star {
            constructor(uname, age) {
                //constructor里面的this指向的是创建的实例对象 也就是ldh
                that = this;
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            sing() {
                //这个sing方法里面的this 指向的是 btn 这个按钮，因为这个按钮调用了这个函数
                console.log(that.uname); //that存储的是constructor里面的this

            }
            dance() {
                //这个dance里面的this指向的是实例对象 ldh 因为ldh 调用了这个函数
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('六六六');
    </script>

创建元素新方法

element.insertAdjacentHTML(position, text);

只有通过createElement创建的元素，appendChilld才能进行追加。但是insertAdjacentHTML可以追加字符串

双击事件是：ondblick
如果双击文字，会默认选定文字，此时需要双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

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