
<!DOCTYPE html>
<html lang="zh-cn">
 
<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>
    <style></style>
</head>
 
<body>
 
 
    <script>
 
        // 声明类
        class Animal {
            // 构造函数（固定的）
            constructor(n) {
                // 添加属性
                this.name = n;
            }
            // 类内部编写的自定义方法
            eatFood() {
                console.log(this.name + "在吃东西！")
            }
        }
 
        // 创建实例
        const cat  =  new Animal("猫");
        console.log(cat);//
        new Animal("猫").eatFood();
        new Animal("狗").eatFood();
        new Animal("羊").eatFood();
        new Animal("兔子").eatFood();
 
 
    </script>
</body>
 
</html>

2.类的继承

ES6 类还支持继承，可以通过 extends 关键字来实现类的继承。super 关键字用于调用父类的构造函数。


<!DOCTYPE html>
<html lang="zh-cn">
<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>
    <style></style>
</head>
<body>
 
 
    <script>
        // 面向对象是一种写代码思想
 
        // 类  
            // 父类： 系统  System (版本信息,尺寸，显示版本)
 
            // 子类： 应用  App (名称，显示版本，显示名称)
 
            // 子类： 页面  Page(时间，显示版本，显示名称)
 
 
        // 代码：
        // 父类
        class System {
            constructor(author){
                this.version = "v1.0.0";
                this.author = author;
            }
            showVersion(){
                console.log("当前系统版本:"+this.version);
            }
        }
 
        // 子类App继承父类System
        // 利用 extends 继承父类的成员
        class App extends  System {
            // 构造函数
            constructor(author){
                // 超类方法
                super(author);//调用父类的构造函数
                // 添加当前类的属性
                this.name = "QQ";
            }
            // 显示名称
            showName(){
                console.log("应用名称:"+this.name);
            }
        }
 
        // 子类Page继承App
        class Page  extends App {
            constructor(author){
                super(author)
                this.time = "2024-03-22 18:00:00"
            }
        }
 
 
        // 创建System实例
        const system = new  System("zhangsan");
        console.log(system);//System {version: 'v1.0.0', author: 'zhangsan'}
 
        // 创建App的实例
        const app = new App("zhangsan");
        // app.showVersion();// 当前系统版本:v1.0.0
        // app.showName();//应用名称:QQ
        console.log(app);// App {version: 'v1.0.0', author: 'zhangsan', name: 'QQ'}
 
 
        // 创建Page的实例
        const page = new Page("zhangsan");
        // page.showVersion();
        // page.showName();
        console.log(page);// Page {version: 'v1.0.0', author: undefined, name: 'QQ', time: '2024-03-22 18:00:00'}
 
    </script>
</body>
</html>

3.类的静态成员

类的静态成员是指与类本身相关联而不是与类的实例相关联的属性和方法。静态成员在类的实例化过程中不会被继承，而是直接通过类本身来访问。通过static设置。


<!DOCTYPE html>
<html lang="zh-cn">
 
<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>
    <style></style>
</head>
 
<body>
 
 
    <script>
 
        // 静态成员不是给类实例使用的,而是直接给类使用
        class Animal {
            // 静态属性
            static name = "狮子动物";
            // 静态方法
            static showName() {
                console.log("这是" + Animal.name);
            }
        }
 
        // 创建实例
        const a1 = new Animal()
        console.log(a1);
        console.log(a1.name);//undefined
 
        // 由类直接引用或使用的属性和方法，叫做静态成员
        console.dir(Animal)
        console.dir(Animal.name)
        Animal.showName()
 
 
       
 
    </script>
</body>
 
</html>

4.私有属性

ES6 中引入了私有字段（private fields）的概念，可以使用 # 符号来定义私有属性。私有字段只能在类的内部访问，外部无法访问或修改。这种方式提供了真正意义上的类私有属性。


<!DOCTYPE html>
<html lang="zh-cn">
 
<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>
    <style></style>
</head>
 
<body>
 
 
    <script>
 
 
        // 私有属性这个说法是这样的
        // 只能在当前类的内部使用的属性
        class App {
            // 声明私有属性
            #color = "红色";
            showColor() {
                console.log("这是~~~" + this.#color);
            }
        }
        const app = new App();
        console.log(app);
        app.showColor();
 
 
        // console.log(app.color);// undefined
        // console.log(app.#color);// 报错
        class Page extends App {
            constructor() {
                super();
            }
            getColor(){
                // console.log("我想得到颜色"+this.#color);// 报错
            }
        }
        const page = new Page();
        // page.showColor();
        // page.getColor();
 
    </script>
</body>
 
</html>

二、模块化(基本)

ES6 模块化是 ECMAScript 6 标准中引入的一种模块化系统，它提供了一种简洁且可靠的方式来组织 JavaScript 代码，并支持在不同文件之间共享和重用代码。

在 ES6 模块化中，一个文件就是一个模块，可以通过 export 和 import 关键字来导出和导入模块中的内容。

注意：export 和 import 这俩命令，不能直接在script中使用，往往是在webpack构建的项目工程中使用，目前，可以把script标签的type属性设置为module ，就可以使用export 和 import。

1.定义组件与引入组件

通过export定义组件


// math.js
 
export function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}

通过import引入组件


// main.js
<script type="module">     
    import { add, subtract } from './math.js';
    console.log(add(5, 3)); // 输出 8
    console.log(subtract(5, 3)); // 输出 2
 
<script>

2.书写方式

1) 按需导出导入

模块功能分开书写，通过大括号导入需要的模块功能


//搜索模块
 
//search.js
 
export const search1 = ()=> { } 
export const search2 = ()=> { } 
export const search3 = ()=> { }
 
//项目中导入
 
import { search1 , search2 } from "./modules/search.js"

2) 全部导出导入

把全部模块功能写在一个对象中，直接引入这个对象，通过.来调用需要的模块功能


//banner.js
 
export default { init (){ } }
 
//项目中导入
 
import Banner from "./modules/banner.js"

3) 设置模块的别名


//导出：
 
// 定义对象 
const comp = {     name: "我是组件" }
// 导出时，设置对象的别名 
export { comp as 自定义名称 }; 
export { comp as aaa };
 
//导入：
 
<script type="module">     
    // 按需导入 ，使用自定义名称     
    import { aaa } from './modules/demo.js';     
    console.log(aaa);//{name: '我是组件'} 
</script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/294708