JavaScriptES6高级学习记录之js面向对象

绿色
紫色
橙色

---

一、面向对象编程

1.面向对象编程介绍

• 面向过程POP 分析出解决问题所需的步骤，用函数把这些步骤一步一步实现，使用的时候再一次一次调用。分析好了步骤，按照步骤解决问题；
• 面向对象OOP 把事物分解乘一个个对象，然后由对象之间分工合作。以对象功能来划分问题而不是步骤。
  

2.面向对象的特性

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

3.面向过程

• 优点：性能比面向对象高，适合硬件练习紧密的东西，比如单片机；
• 缺点没有面向对象易维护，易复用，易扩展

4.面向过程和面向对象对比

面向过程的方法写出来的程序时蛋炒饭
面向对象方法写出的程序时盖浇饭）
（今晚去吃牛杂咯）

二、ES6中的类和对象

1. 面向对象

面向对象更贴近实际生活，可以使用面向对象描述现实世界事物，但是呢事物又分为了具体的事物和抽象的事物，比如手机 小米XX手机

---

面向对象思维特点：
1.抽取（抽象 ）对象共用的属性和行为组织（封装）成一个类模板
2.对象进行实例化，获取类的对象
面向对象编程考虑时有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情

2.对象

对象是具体事物（一本书，一个人）
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串，数值，数组，函数等
对象是属性和方法组成 的

• 属性：事物的特征，在对象中用属性来表示
• 方法：事物的行为，在对像中用方法来表示（函数？）

3.类class

类抽象了对象的公共部分，泛指一大类
对象特指某一个，通过类实例化一个具体的对象
面向对象的思维

4.创建类

class name{
class body
}
//创建实例
var xx=new name();

<script>
        //1.创建类 class 创建一个明星类start
        class Star {
            constructor(uname, age) {
                    this.uname = uname;
                    this.age = age;
                }
                //方法 函数sing()
            sing(song) {
                console.log(this.uname + '唱了' + song);
            }
        }
        //2.利用类创建对象new 
        var ldh = new Star('刘大海', 33);
        var zxy = new Star('大可', 11);
        console.log(ldh.uname);
        console.log(ldh);
        ldh.sing('大海');
        zxy.sing('李香兰')
    </script>

• class关键字创建类，第一个字母大写
• 类里面要写constructor函数，接收传递过来的参数，返回实例对象，不写也没事（但还是写比较好？），类会自动生成
• 生成实例用var ldh=new Star();
• 创建类，类名后米娜不需要（），生成实例的时候需() 构造函数不需要function
• 函数方法之间不需要添加,分离

5.类 constructor构造函数

三、类的继承

1.继承

子承父业
子类继承父类的一些属性和方法

1.继承简单案例代码如下

<script>
        //1.类的继承
        class Father {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        //2.extends继承
        class Son extends Father {

        }
        var son = new Son();
        son.money();
    </script>

2.super(x,y)关键字调用父类中的构造函数

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, 3);
        son.sum();

3.super关键字super.say()调用父类的普通函数
继承中的属性或者方法查找是根据就近原则查找

• 继承中，实例化子类输出一个方法，先看子类有没有这个方法，如果又就执行子类
• 继承中，如果子类没有，就查找父类有没有这个方法（函数），如果又就执行父类这个方法、
  先找子类有没有这个方法，如果有就执行子类没有就找父类父类有就执行父类

<script>
        //super 关键字调用父类普通函数
        class Father {
            say() {
                return 'Father';
            }
        }
        class Son extends Father {
            say() {
                // console.log('son');
                console.log(super.say() + '的son');
                //super.say()调用父类中的普通函数 say()
            }
        }
        var son = new Son();
        son.say();
    </script>

4.子类继承父类的同时扩展自己方法（函数）
子类在狗仔函数中使用super 必须放到this前面（必须先调用父类的构造方法再使用子类构造方法）

<script>
        class Father {
            constructor(x, y) {
                this.x = x;
                thix.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //子类继承父类加法方法，同时扩展自己减法功能
        class Son extends Father {
            constructor(x, y) {
                //利用super调用父类构造函数
                //super 必须在子类构造方法之前
                super(x, y);
                this.x = x;
                this.y = y;
            }
            subtract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(5, 3);
        son.subtract();
    </script>

5.类和对象注意事项

• 在ES 6中类美欧变量提升是必须先定义再使用
• 类里面的共有属性和方法一定要加this使用
• this指向问题 :constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
• 使用变量来解决this不指向实例但是需要使用实例

<button>点击</button>
    <script>
        var that, _that;
        class Star {
            constructor(uname, age) {
                that = this;
                //constructor里面的this指向创建的实例对象
                this.uname = uname;
                this.age = age;
                // this.sing(); 加this this this指向实例对象
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing; //sing不加（）加（）就调用了，要的是点击button再调用
            }
            sing() {
                //这个this指向btn按钮，因为按钮 调用了这个函数
                console.log(this);
                // console.log('hihihihi');
                // console.log(this.uname);
                //借助变量that that里面存放的是ldh
                console.log(that.uname);
            }
            dance() {
                //这里的this也指向实例对象，因为在后面的ldh.dace();ldh调用了这个函数
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('刘德华');
        console.log(that == ldh);
        ldh.dance();
        console.log(_that == ldh); //这句话放到dance前面结果就是false
        // ldh.sing();
        //1.在ES 6中类美欧变量提升是必须先定义再使用
        //2.类里面的共有属性和方法一定要加this使用
    </script>

• 2020.12.05 JS ES6高级 day01 类和对象 10

四、面向对象案例

1.面向对象的tab栏切换

功能要求
1.点击tab栏能切换
2.点击+能增加tab栏

• 创建新的选项卡li和新的内容section
• 把创建的两个元素追加到对应的父元素当中
• 动态创建li 可以使用createElement但是里面元素内容较多，需要innerHTML赋值，再appendChild追加到父元素里面；
• 改为使用insertAdjacentHTML(）直接把字符串格式的元素添加 到父元素中 把li追加到父元素ul里面的最后面

var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
            //2.2把创建的两个元素追加到对应的父元素当中
            that.ul.insertAdjacentHTML('beforeend', li);

• appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素
  点击+号之后需要重新再获取所有的li和section,怎么解决新产生的元素的获取问题，在初始化函数里面再重新获取一次新增以后的元素
  3.递减tab栏右上角可以删除tab栏

4.可以修改tab栏里面的文字
抽象对象：tab对象 具有以上的4个功能
代码
页面一加载就会执行constructor,在construcor里面调用了this.init();,在init()里面调用this.updateNode();

---

总结