js进阶不含ES6

面向对象编程介绍

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

面向对象就是把事务分解成为一个个对象，然后由对象之间分工与合作。

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

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

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

面向对象的特性

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

面向对象与面向过程的比较

面向过程

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

面向对象

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

类

类的本质

类的本事是一个函数 function 我们也可以简单地认为类就是构造函数地另一种写法

• 类有原型对象prototype

• 类也有一个原型对象prototype 里面有constructor 指向类本身

• 类可以通过原型对象添加方法

• Star.prototype.sing = function(){};
  

ES6的本质是语法糖

类和面向对象

面向对象的思维特点

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

对象

对象是由属性和方法构成的

• 属性：事物的特征，在对象中用属性来表示 （常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

类 class

类 抽象了对象的公共部分，它泛指某一大类

对象 特指某一个，通过类实例化一个具体的对象

在ES6 中创建类

语法

class name{
	//class body
}

创建实例

let xx = new name();

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

// 1、创建类 class 创建一个 明星类
        class Star {
            constructor(uname,age) {
                this.uname = uname;
                this.age = age;
            }
        }

        // 2、利用类创建对象 new
        let ldh = new Star("刘德华",20);
        let zxy = new Star('张学友',60);

        console.log(ldh.uname); //刘德华
        console.log(zxy.uname); //张学友

类constructor 构造函数

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

创建类的注意事项

• 通过class 关键字创建类，类名我们还是习惯性定义首字母大写
• 类里面有个constructor 函数，可以接受传递过来的参数，同时返回实例对象
• constructor 函数 只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数。
• 生成实例 new 不能忽略
• 最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类型后面加大括号，构造函数不需要加function

类中添加共有的方法

• 我们类里面所有的函数不需要写function
• 多个函数方法之间不需要用逗号分隔

 <script>
        // 1、创建类 class 创建一个 明星类
        class Star {
   
            constructor(uname, age) {
   
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
   
                console.log(this.uname + "唱" + song);
            }
        }

        // 2、利用类创建对象 new
        let ldh = new Star("刘德华", 20);
        let zxy = new Star("张学友", 60);

        console.log(ldh.uname); //刘德华
        console.log(zxy.uname); //张学友

        ldh.sing("冰雨");
        zxy.sing("李香兰");
    </script>

类的继承

  // 1、类的继承
        class Father {
   
            constructor() {
   }
            money() {
   
                console.log(100);
            }
        }
        class Son extends Father {
   }
        let son = new Son();
        son.money();//100        son.money();//100

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    class Father{
   
            constructor(x,y){
   
                this.x = x;
                this.y = y;
            }
            sum(){
   
                console.log(this.x+this,y);
            }
        }

        class Son{
   
            constructor(x,y){
   
                //this.x = x;
                //this.y = y;     这样子使用是错误的
                
                //调用了父类中的构造函数
                super(x,y);
            }
        }
        let son = new Son(100,30);
        son.sum();//130

原因是son中的x，y与father是不一样的

super()

super()调用父类普通函数以及继承中属性方法查找原则 就近原则

 // super
        class Father{
   
            say(){
   
                console.log("我是你爹");
            }
        }
        // class Son{
   
        //     say(){
   
        //         console.log('我是你儿');
        //     }
        // }
        // let son =new Son();
        // son.say(); //我是你儿
        class Son extends Father{
   
            say(){
   
                //console.log('我是你儿');
                console.log(super.say())   //son.say()   --->我是你爹
            }
        }
        let son =new Son();
        son.say(); //我是你儿

• 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
• 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）

super必须放到子类this之前

下面的代码讲的是保证继承父类属性的同时追加子类自身属性。

    class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
        }

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

                this.x = x;
                this.y = y;
                 
                //super(x, y);   在this之后报错，应该先调用父类中的构造函数再用this，

            }
            subtract() {
                console.log(this.x - this.y);
            }
        }

        let son = new Son(5, 3);
        son.subtract(); //2

注意：子类构造函数使用super，必须放到this前面（必须先调用父类的构造方法，再使用子类构造方法）

类和对象

四个注意点：

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

constructor 里面的this 指向的是 创建的实例对象

this的指向问题

<button id="btn">按钮</button>
    <script>
        let that;
        let _that;
        class Star {
     
            //constructor 里面的this 指向的是 创建的实例对象
            constructor(uname, age) {
     
                that = this;
                console.log(this);

                this.uname = uname;
                this.age = age;
                // this.sing() //undefined
                this.btn = document.getElementById("btn");
                this.btn.onclick = this.sing;
            }
            sing() {
     
                // 这个sing方法里面的this 指向的是btn 这个按钮，因为这个按钮调用了这个函数
                console.log(this);
                console.log(this.uname); //undefined
                console.log(that.uname) //刘德华
            }
            dance() {
     
                // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
                _that = this;
                console.log(this);
            }
        }
        let ldh = new Star("刘德华");
        ldh.dance();//bject { uname: "刘德华", age: undefined, btn: