JS高阶篇05-面向对象类

1.面向过程与面向对象对比

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

2.类

2.1创建类

语法：

//步骤1 使用class关键字
class Person {
  // class body
}     
//步骤2使用定义的类创建实例  注意new关键字
var xx = new Person();   

class Person {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}

// 2. 利用类创建对象 new
var p1 = new Person('张三', 18);
console.log(p1);
console.dir(Person);

2.2类创建添加属性和方法

注意:

1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

3. constructor 函数只要new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

4. 多个函数方法之间不需要添加逗号分隔

5. 生成实例new不能省略

6. 语法规范, 创建类,类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

// 1. 创建类 class  创建一个 明星类
class Person {
    // 类的共有属性放到 constructor 里面
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    sayHi(arg) {
        console.log(this.uname + arg);

    }
}
// 2. 利用类创建对象 new
var p1 = new Person('张三', 18);
var p2 = new Person('李四', 20);
console.log(p1);
console.log(p2);
// (1) 我们类里面所有的函数不需要写function 
//(2) 多个函数方法之间不需要添加逗号分隔
p1.sayHi('说你好');
p1.sayHi('说初次见面请多关照');

2.3类操作DOM元素 

 class Dom {
            // 初始化属性
            constructor(className) {
                this.box = document.querySelectorAll(className)

                console.log(this);
                this.init();
            }
            // 用来初始化事件
            init() {
                for (var i = 0; i < this.box.length; i++) {
                    this.box[i].onclick = this.logEvent
                }
            }

            logEvent() {
                console.log(this);
                this.style.width = 300 + "px";
            }


        }

        var p1 = new Dom('.box')

      
        console.log(p1);

2.4类的继承

extends关键字表示类的继承

子类使用super关键字访问父类的方法

// 父类
class Father{   
} 
// 子类继承父类
class  Son  extends Father {  
}   

 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.

class Father {
            constructor(name, age, height) {
                this.name = name;
                this.age = age;
                this.height = height;
            }
            makeMeony() {
                console.log("疯狂赚钱");
            }
        }
        // extends 欸柯斯ten斯 继承
        class Son extends Father {
            constructor(name, age, height) {
                // super 使用super 方法访问父类身上的属性
                super(name, age, height)
            }
        
            makeMeony(){
                console.log("儿子长大了 自己赚钱");
            }

        }

        var father = new Father("小头爸爸", 50, 180);
        var son = new Son("大头儿子", 31, 170);
        console.log(father);
        console.log(son);
        son.makeMeony()