js function创建类 js怎么创建一个类

一、创建类与对象

1.创建属性

class Star { // 创建类
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
        }
        var ldh = new Star('刘德华', 99); // 创建对象
        // 结果:Star {uname: '刘德华', age: 99}

看法：可以将类看成加工对象的加工厂，类就是为了方便生成对象而存在，传递入什么参数类会帮你创建一个你想要的对象。

注：(1).类名习惯大写

(2）.constructor会接收传递来的参数，返回实例对象，并且一个类只能包含一个constructor

(3）.生成对象时，new不能省略

2.创建方法

class Star { // 创建类
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 99); // 创建对象
        console.log(ldh); // 结果：Star {uname: '刘德华', age: 99}
        ldh.sing('歌'); // 结果：输出歌

注：1.类里面的函数之间不加逗号

3.创建有关dom元素（按钮）的类

class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing; // 创建时先不调用 不加括号
            }
            sing() {
                console.log('hi');
            }
        }
        var ldh = new Star('Ldh');
        // 实现：点击按钮就会输出hi

二、类的继承

1.继承方法

class Father { // 创建父类
            constructor() {

            }
            say() {
                console.log('hello');
            }
        }
        class Son extends Father { // 子类继承父类

        }
        var son = new Son(); // 由子类创建对象
        son.say(); // 结果：输出hello

2.访问父类方法与函数（传递参数调用问题）

class Father { // 创建父类
            constructor(x, y) {
                this.x = x; // 接收子类传来的1，2进行运算
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father { // 子类继承父类
            constructor(x, y) {
                super(x, y); // son调用了父类的构造函数，将1，2传到父类
            }
        }
        var son = new Son(1, 2); // 1，2作为实参传入son中
        son.sum();

3.子类继承父类函数（同名函数调用问题）

就近原则，子类有就用子类的，子类没有再找父类

class Father {
            say1() {
                console.log('father1');
            }
            say() {
                console.log('father');
            }
        }
        class Son extends Father { // 子类继承父类
            say() {
                console.log('son');
            }
        }
        var son = new Son(); // 子类创建对象
        son.say(); //say函数子类存在，就输出子类中的内容
        // 结果：son
        son.say1(); //say1函数子类中不存在，就返回最近的父类中的内容
        // 结果：father1

4.子类调用父类函数

class Father {
            say() {
                return 'father';
            }
        }
        class Son extends Father { // 子类继承父类
            say() {
                console.log(super.say() + '\'s son'); // 输出引号前加\
                //super调用父类的方法
            }
        }
        var son = new Son(); // 子类创建对象
        son.say(); // 结果：father' son

5.子类继承并增添父类函数

class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            getSum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y); // 向上传递参数，而且super必须在this之前
                this.x = x;
                this.y = y;
            }
            getSub() {
                console.log(this.x - this.y);
            }

        }
        var son = new Son(9, 3);
        son.getSum(); // 结果：12
        son.getSub(); // 结果：6

三、类和对象的注意事项

1.类没有变量提升，所以在用类来创建对象时，必须先定义类，否则会报错。

2.类里面的属性要加this

3.this的指向问题

在constructor中，里面的this指向的是新创建的对象。

在函数中看是谁调用了这个函数就指向谁。

例子：

class Star {
            constructor(uname, age) {
                console.log(this); // this指向新创建的对象
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing; // 创建时先不调用 不加括号
            }
            sing() { // btn调用了sing，this指向btn
                console.log(this);
                console.log('hi');
            }
            dance() { // ldh调用了dance，this指向新创建的对象
                console.log(this);
            }
        }
        var ldh = new Star('Ldh');
        // 实现：点击按钮就会返回btn并且输出hi

如果想在sing里调用uname，可以在类外面先定义一个全局变量that，在constructor中把this赋值给that来通过that传递新创建的对象，再调用新创建的对象里面的uname。