JavaScript笔记-面向对象编程（1）创建类与类的继承

面向对象编程

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

ES6 之前js并不存在类这个概念

ES6 发布于2015年 目前有一些高版本的浏览器支持 但是也只支持其部分功能 大部分还是只支持ES5

在ES6 没有发布之前 对象不是由类创建的 而是由构造函数创建的

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

所以概括一下 类是公共的属性和行为

对象是一个具体的例子。

关于类的创建。

    //1. 创建类class 这里创建一个明星类
        class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            sing(song) { //不用加function 这个关键字
                console.log(this.uname + song);

            }
        }
        //2. 利用类创建对象 new 并存储在一个变量里
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);
        zxy.sing('李香兰'); //输出张学友李香兰

        //注意事项1 通过class关键字来创建类 类名第一个字母大写 约定习俗
        //注意事项2 类里面有个constructor函数 也就是构造函数 可以接受传递过来的参数 同时返回实例对象
        //注意事项3 构造函数 constructor 只要 new 生成实例时 就会被自动调用
        //注意事项4 new这个关键字不可以省略
        //注意事项5 我们类里面 添加新的方法 不需要function关键字
        //注意事项6 多个函数之间不需要用逗号分隔

关于类的继承
使用extends关键字

        class Father {
            constructor() {

            }
            getmoney() {
                console.log('我继承了100');

            }
        }
        class Son extends Father {
            //子类是空的 也不要紧 因为继承了父类 所以父类里面的属性和方法是可以使用的
            //这里是不涉及this

        }
        var little_son = new Son();
        little_son.getmoney();

当父类中涉及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 little_son= new Son(1,3);
            little_son.sum();
            

以上代码会报错 理由是因为sum函数中的this指向的是父类的constructor里面包含的this数据

而在儿子调用这个函数的时候 (1,3)是传给了子类的constructor，这个constructor里面的this.x this.y与父类指向的是不一样的

解决这个问题的方法就是用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); //调用了父类中的构造函数(普通函数也可以用super)
                    
                }
            }
            var little_son= new Son(1,3);
            little_son.sum();
            //以上不会报错

说白了super允许我们调用父类里面的constructor。

更多关于继承的例子。

        class Father {
            say() {
                return '我是爸爸';
            }
        }

        class Son extends Father {
            say() {
                console.log(super.say() + '的儿子');

            }
        }
        var little_son = new Son();
        son.say();//打印结果：我是爸爸的儿子 利用super调用father里面的一般函数

//父类有加法方法
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); //super必须在this之前 
    this.x=x;//先经过这一步 然后由super传递到父类
    this.y=y;

}
subtract(){
    console.log(this.x-this.y); //这里必须用this.x this.y 
//如果你 只用x y 会报错 uname也同理
    
}
}

var son_shili=new Son(5,3);
son_shili.subtract();
son_shili.sum();//不会报错