JavaScript高级 class类篇

路痴先森

已于 2023-12-22 17:09:14 修改

阅读量447

点赞数 5

文章标签： javascript 开发语言 ecmascript

于 2023-12-22 17:07:15 首次发布

本文链接：https://blog.csdn.net/qq_57162921/article/details/135155904

版权

1、class类的实现

class的基本结构

定义及用法：class关键字定义类，创建构造函数，类名首字母大写

语法结构：

class 类名{
  constructor(参数1,参数2){
    // 构造函数体，添加实例对象成员
  }
  方法名(){
    // 添加原型对象成员
  }
  static 方法名{
    // 添加静态成员，只能用类调用
  }
}
var d=new 类名

ES5中，使用function定义一个类，并使用它来创建对象

function Person(name, age){
    //实例成员
    this.name = name;
    this.age = age;
}
Person.prototype.doWork = function(){
    console.log("ES5中在原型对象上添加方法")；
}
var p = new Person("Neld", 10);

在ES6中，使用class关键字定义同样的类

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    doWork(){
        console.log("ES6中在原型对象上添加方法");
    }
}
var p = new Person("Neld",10);
console.log(p);

ES6中使用class定义类只是一种语法糖（语法糖能够增加程序的可读性，从而减少程序代码出错的机会的一种语法），底层最终还是转换成ES5中使用的function类定义类，以及其中的实例成员和原型成员。

class使用的细节

（1）constructor方法是创建对象的构造方法，通常在这里为实例对象定义属性（方法也是可以的），new 之后会自动调用。

（2）constructor方法外面的方法是对象的原型方法。

（3）在之前外面还为构造方法添加过成员（静态成员），前面要加static。

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    static doWork(){
        console.log("ES6中在原型对象上添加方法");
    }
}
Person.doWork()

2、创建类和生成实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>创建类和生成实例</title>
</head>
<body>
    <script type="text/javascript">
        class Start{
            constructor(name,age,year){
                this.name=name;
                this.age=age;
                this.year=year;
            }
        }
 
        var zs = new Start('张三','25','750');
        var ls = new Start('李四','30','750');
 
        console.log(zs.age);
        console.log(ls.name);
    </script>
</body>
</html>

3、类中添加共有方法

（1）类的共有属性放在constructor里面

（2）多个函数方法之间不需要添加逗号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类中添加共有方法</title>
</head>
<body>
    <script type="text/javascript">
        class Start{
            constructor(name,age,year){
                this.name=name;
                this.age=age;
                this.year=year;
            }
            sing(song){
                console.log(this.name +"唱"+ song);
            }
        }
 
        var zs = new Start('张三','25','750');
        var ls = new Start('李四','30','750');
 
        console.log(zs.age);
        console.log(ls.name);
        zs.sing('娘子')
        ls.sing('啊哈')
    </script>
</body>
</html>

4、类继承extends和super关键字

extends：继承

super：调用了父类中的构造函数（传值到父类中使用父类的方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类继承extends和super关键字</title>
</head>
<body>
    <script type="text/javascript">
        // class Father{
        //     constructor(){
                
        //     }
        //     money(){
        //         console.log(100);
        //     }
        // }
        // class Son extends Father{
 
        // }
        // var son = new Son();
        // son.money();
 
        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(22,54);
        son.sum();
    </script>
</body>
</html>

5、super调用父类普通函数以及继承中属性方法查找原则

继承中的属性或方法查找原则：就近原则

（1）继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法

（2）继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>super调用父类普通函数以及继承中属性方法查找原则</title>
</head>
<body>
    <script type="text/javascript">
        class Father{
            say(){
                return "我是粑粑";
            }
        }
        class Son extends Father{
            say(){
                console.log(super.say() + "的儿子");
                //super.say()就是调用父类中的普通函数 say()
            }
        }
        var son = new Son();
        son.say();
    </script>
</body>
</html>

6、super必须放到子类this之前

子类在构造函数中使用super，必须放在this前面（必须先调用父类的构造方法，在使用子类构造方法）

subtract()：减法操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>super必须放到子类this之前</title>
</head>
<body>
    <script type="text/javascript">
        class Father{
            constructor(x,y){
                this.x = x;
                this.y = y;
            }
            add(){
                console.log(this.x + this.y);
            }
        }
 
        //子类继承父类加法方法 同时扩展减法方法
        class Son extends Father{
            constructor(x,y){
                //利用super调用父类的构造函数
                //super必须在子类this之前调用
                super(x,y);
                this.x = x;
                this.y = y;
            }
            subtract(){
                console.log(this.x - this.y);
            }
        }
 
        var son = new Son(98,5);
        son.add();
        son.subtract();
    </script>
</body>
</html>

7、使用类2个注意点

1.在ES6中，类没有变量提升，所以必须先定义类，才能通过实例化对象

2.类里面的共有的属性和方法一定要加this使用

3.constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用类2个注意点</title>
</head>
<body>
    <button>点击</button>
    <script type="text/javascript">
        var that;
        var _that;
        class Star{
            constructor(uname,age){
                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
                console.log(this);
                that = this;
            }
            sing(){
                //这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
                console.log(this);
                console.log(that.uname);//that里面存储的是constructor里面的this
            }
            dance(){
                //这个_that里面的this 指向的是实例对象 ldh 因为 ldh 调用了这个函数
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('离歌笑',20);
        console.log(that === ldh);
        ldh.dance();
        console.log(_that === ldh);
    // 1. 在 ES 6 中类没有变量提升 所以必须先定义类 才能通过实例化对象
    // 2. 类里面的共有的属性和方法一定要加this使用
    // 3. constructor 里面的this指向实例对象 方法里面的this指向这个方法的调用者
    </script>
</body>
</html>